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>
    </>
  );
}