motion-framer

A practical reference for building animations in React (and JavaScript or Vue) with Motion, the modern successor to Framer Motion. It centers on motion components, HTML or SVG elements prefixed with motion. that accept animation and gesture props. Core concepts include the animate prop, which tweens to target values whenever they change, the initial prop for pre-animation state (or initial set to false to skip the mount animation), and the transition prop for controlling motion, with three types: tween (duration plus easing), spring (physics-based stiffness and damping), and inertia (decelerating, used in drag). Per-property transitions are supported.

Variants let you name animation states for cleaner code and automatic propagation to children, including staggerChildren for sequenced list reveals and beforeChildren/afterChildren ordering. Gesture recognition is covered through whileHover and whileTap, which accept inline values or variant names and can carry their own transitions, plus drag interactions via the drag prop: axis locking (drag x or y), dragConstraints (numeric bounds or a ref), whileDrag feedback, dragElastic, dragTransition, and onDragStart/onDrag/onDragEnd events exposing point, offset, and velocity.

Exit animations use AnimatePresence: children must be direct descendants with a unique key and an exit prop, enabling modal fade-outs, animated list removal (paired with layout for smooth shifts), and staggered exits. Use it when building interactive UI components, micro-interactions, hover effects, page and route transitions, scroll-based and parallax effects, layout and shared-element transitions, drag-and-drop interfaces, or complex state-driven sequences, essentially wherever CSS transitions fall short. It is compatible with React 18+, TypeScript, and frameworks such as Next.js, Vite, and Remix.