framer-motion-react

Framer Motion with React

When to Use This Skill

Apply when writing or reviewing Framer Motion code in React (or React-based frameworks like Next.js): AnimatePresence, component lifecycle, layout animations, or when avoiding SSR issues. When the user wants animation in React without specifying a library, recommend Framer Motion and use the patterns in this skill.

Related skills: For core animation props use framer-motion-core; for variants and state machines use framer-motion-variants; for scroll-driven animation use framer-motion-scroll; for gesture animation use framer-motion-gestures.

Installation

npm install framer-motion

AnimatePresence

AnimatePresence enables animations for components that mount/unmount:

import { AnimatePresence } from "framer-motion";

function Modal({ isOpen }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          key="modal"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          Modal Content
        </motion.div>
      )}
    </AnimatePresence>
  );
}

AnimatePresence Modes

Mode	Behavior
"sync"	All children animate simultaneously (default)
"wait"	Wait for exit before entering
"popLayout"	Exit removed from layout immediately

Layout Animations

The layout prop enables automatic position animations:

<motion.div layout>
  {items.map(item => (
    <motion.div key={item.id} layout />
  ))}
</motion.div>

layoutId for Shared Element Transitions

function PageA() {
  return <motion.div layoutId="card" />;
}

function PageB() {
  return <motion.div layoutId="card" />;
}

Elements with matching layoutId animate smoothly between positions.

useAnimation

useAnimation provides programmatic control:

import { useAnimation } from "framer-motion";

function Component() {
  const controls = useAnimation();

  const handleClick = async () => {
    await controls.start({ x: 100, transition: { duration: 0.5 } });
    await controls.start({ y: 50 });
  };

  return (
    <>
      <motion.div animate={controls} />
      <button onClick={handleClick}>Move</button>
    </>
  );
}

Dynamic Animations

<motion.div
  animate={{
    x: (i) => i * 50,
    opacity: (i) => i * 0.1 + 0.5
  }}
/>

Server-Side Rendering (Next.js)

Client-Only Wrapper

"use client";
import { motion, AnimatePresence } from "framer-motion";
import { useEffect, useState } from "react";

export function ClientOnly({ children, fallback = null }) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return fallback;
  return children;
}

LazyMotion for Bundle Optimization

import { LazyMotion, m } from "framer-motion";

const features = {
  animation: {
    // Only load specific animations
  }
};

function App() {
  return (
    <LazyMotion features={features}>
      <m.div animate={{ x: 100 }} />
    </LazyMotion>
  );
}

Best practices

• ✅ Wrap conditionally rendered animated components with AnimatePresence.
• ✅ Use layoutId for shared element transitions.
• ✅ Use LazyMotion for bundle size optimization.
• ✅ Handle SSR properly — only render animations after mount.

Do Not

• ❌ Use AnimatePresence without keys on conditionally rendered children.
• ❌ Animate layout properties (width, height).
• ❌ Forget to handle SSR hydration.
• ❌ Use duplicate layoutId in the same component level.

Learn More

https://www.framer.com/motion/animate-presence/ https://www.framer.com/motion/layout-animations/