Framer Motion: Add Stunning Animations to Your React App

Why Framer Motion?

CSS animations are powerful but can be verbose. Framer Motion wraps the Web Animations API with a declarative React API that handles spring physics, gesture detection, and layout animations out of the box.

Basic Usage

Replace any HTML element with its motion counterpart — motion.div, motion.button, etc. Then add initial, animate, and exit props to describe the animation states. Framer Motion handles the interpolation automatically.

Variants: Orchestrating Complex Animations

Variants let you define named animation states and propagate them through a component tree. A parent can trigger children animations using orchestration options like staggerChildren, delayChildren, and when.

Scroll-Triggered Animations

Use whileInView to animate elements when they enter the viewport. Combine with viewport={{ once: true }} to prevent the animation from replaying every time the user scrolls past the element.