Framer Motion Animator

Framer Motion is a production-ready animation library for React. It provides a motion.div component (and other motion.* elements) that accept animation props like initial, animate, exit, whileHover, and whileTap. It handles complex animation sequencing, spring physics, and gesture detection with a declarative API.

animate accepts inline animation values directly on a component. variants allows you to define named animation states as an object and reference them by name — this enables parent-children orchestration via staggerChildren and delayChildren. Variants are preferred for complex animations with multiple elements.

AnimatePresence enables exit animations. Without it, React unmounts components immediately and the exit prop on motion.* elements is ignored. Wrap conditional renders or list items in AnimatePresence to allow components to animate out. The mode prop controls whether old/new components overlap ('sync'), old exits first ('wait'), or new enters first ('popLayout').

useAnimation returns an animation controls object that lets you manually trigger animations with controls.start() and controls.stop(). Useful for triggering animations based on external events like scroll position, intersection observer callbacks, or user interactions that aren't gesture-based.

Spring animations simulate physics-based motion with bounce and natural deceleration. Key parameters: stiffness (how rigid the spring is — higher = snappier), damping (how quickly it stops oscillating — lower = more bounce), mass (virtual weight — higher = slower), and restDelta (threshold to stop animation). Spring feels more natural than duration-based easing for UI elements.