motion-animations

Motion Animations

Reference skill for building production animations with the Motion library (formerly Framer Motion). Consult this before writing any animation code.

Install: npm install motion Import: import { motion, AnimatePresence } from "motion/react" Next.js RSC: use "use client" directive on any component with motion

---

Core Concept

Every HTML/SVG element has a motion.* counterpart. Animation is declarative via props:

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0 }}
  transition={{ type: "spring", stiffness: 200, damping: 20 }}
/>

Animatable properties: x, y, scale, rotate, opacity, filter, clipPath, backgroundColor, borderRadius, boxShadow. Height can animate to/from "auto".

---

Pattern Catalog

1. Entrance Animations (scroll-triggered)

The default for any element appearing on scroll:

<motion.div
  initial={{ opacity: 0, y: 40 }}
  whileInView={{ opacity: 1, y: 0 }}
  viewport={{ once: true, amount: 0.3 }}
  transition={{ duration: 0.6, ease: "easeOut" }}
/>

Always set viewport={{ once: true }} unless bidirectional reveal is intentional.

2. Staggered List Entrance

Use variants for coordinated parent-to-child animations:

const container = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.06, delayChildren: 0.1 } }
}
const item = {
  hidden: { opacity: 0, y: 16 },
  visible: { opacity: 1, y: 0, transition: { type: "spring", bounce: 0.3 } }
}

<motion.ul variants={container} initial="hidden" whileInView="visible" viewport={{ once: true }}>
  {items.map(i => <motion.li key={i} variants={item} />)}
</motion.ul>

Children inherit initial/animate labels automatically from parent — only need variants prop.

3. Exit Animations

AnimatePresence holds elements in DOM until exit completes:

<AnimatePresence mode="wait">
  {isVisible && (
    <motion.div
      key="unique"
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
    />
  )}
</AnimatePresence>