Core Primitives You Will Use Every Day

Framer Motion turns React components into first-class animation citizens. Here are the building blocks:

  • motion components — wrap any HTML element for declarative animation
  • variants — named state objects for coordinated multi-element choreography
  • layout prop — effortless shared-layout transitions (reorder lists, expand cards)
  • Gesture responders — whileHover, whileTap, whileDrag
  • AnimatePresence — animate components as they unmount
const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { staggerChildren: 0.1 } },
};

<motion.ul variants={variants} initial="hidden" animate="visible">
  {items.map(item => <motion.li key={item.id} variants={variants} />)}
</motion.ul>

Scroll-Driven Effects

Use useMotionValue and useTransform for scroll-driven effects, and the new useAnimate hook introduced in v10+ for imperative control.