Advanced Animations with Framer Motion in React

Why Framer Motion?

Framer Motion is the best animation library for React. It has a declarative, intuitive API that feels like writing React component props rather than managing keyframes. It handles spring physics, gesture detection, layout animations, and exit animations out of the box. Complex animations that would take hundreds of lines of CSS and JavaScript can be expressed in 10-20 lines of Framer Motion.

The Basics: motion Components

Wrap any HTML element with motion (e.g., motion.div, motion.h1, motion.button) to make it animatable. Then use the initial, animate, and exit props to define three states. Framer Motion automatically interpolates between them. Add a transition prop to control timing, easing, and spring physics. This is all you need for 80% of UI animations.

Orchestrating with variants

Variants let you name animation states and orchestrate animations across a component tree. Define a parent variant with staggerChildren and delayChildren, then reference child variants by name. The parent automatically staggers its children's animations — perfect for lists where items animate in one after another. Variants are reusable across multiple components by spreading them as props.

Page Transitions with AnimatePresence

AnimatePresence lets components animate out when they are removed from the React tree. Without it, React unmounts components immediately — you can't animate them out. Wrap your route content in AnimatePresence, add exit props to your motion components, and Next.js or React Router page changes become smooth cross-fades or slide transitions. Use the mode='wait' prop to complete the exit animation before the new page enters.

Scroll-Triggered Animations

Use the useInView hook from Framer Motion (or the whileInView prop) to trigger animations when elements scroll into view. Set once: true so the animation only fires once, not every time the element enters the viewport. The viewport prop lets you customize the threshold (how much of the element must be visible) and margin (offset from the viewport edge). This pattern creates the scroll-reveal effect common on modern portfolio and landing pages.

Layout Animations

The layout prop enables automatic layout animations — Framer Motion detects when a component's position or size changes (due to other DOM changes) and smoothly animates it. This creates fluid sorting animations, expanding cards, and tab indicator effects with zero manual calculation. Add layoutId to animate a component's transformation between two different instances in the tree — like a modal that appears to expand from a thumbnail.