motion components

<motion.div>, <motion.span>, etc. Props: initial, animate, exit, transition. Variants for named states. Spring defaults for natural motion.

layout animations

layout prop auto-animates position/size changes. layoutId shared between elements for smooth morphing (magic motion). LayoutGroup for coordinating sibling animations.

AnimatePresence

Wrap conditional mounts for enter/exit animations. mode="wait" for sequential. mode="popLayout" for layout shift animations. onExitComplete callback.

gestures

whileHover, whileTap, whileDrag, whileFocus, whileInView. drag="x" for axis-locked drag. dragConstraints for boundaries. onDragEnd for callbacks.

variants

Named animation objects. variants={{ open: { opacity: 1 }, closed: { opacity: 0 } }}. Pass to initial/animate/exit. Parent variants cascade to children with transition={{ staggerChildren: 0.1 }}.

scroll-triggered

useInView() hook. whileInView prop. useScroll() for scroll progress. useTransform() to map scroll to motion values. useSpring() for smoothed scroll-driven motion.

motion-framer