Learn FRAMER-MOTION with Real Code Examples

Framer Motion allows developers to animate React components declaratively.

It provides support for gestures such as drag, hover, tap, and scroll.

Animations can be controlled with spring physics or keyframes for natural motion.

It integrates seamlessly with React’s component model, allowing animations to respond to state changes.

Supports layout animations, shared element transitions, and exit/enter animations for complex UI interactions.

motion.div, motion.span, motion.svg components

Variants to define reusable animation states

Keyframes and transition controls

AnimatePresence for mounting/unmounting animations

Drag and gesture controls

motion - enhanced React component for animation

Variants - reusable animation states

Transition - defines timing, easing, or physics

AnimatePresence - handles mount/unmount animations

motionValue - reactive value for animation control

App.js - main React app

components/ - React components with motion wrappers

animations/ - reusable variants and transition configs

hooks/ - optional motionValue or gesture hooks

pages/ - pages with AnimatePresence transitions

Identify components to animate

Wrap them with motion components

Define initial, animate, and exit states

Attach gesture handlers if needed

Test animations and refine timing/easing

Beginner: simple fade/slide animations

Intermediate: staggered child animations

Advanced: layout and shared element transitions

Expert: interactive drag/scroll animations

Architect: complex multi-component UI choreography

Framer Motion vs React Spring: Framer Motion easier for declarative UI; Spring more physics-focused

Framer Motion vs GSAP: GSAP more powerful for timeline/sequenced animations, works outside React

Framer Motion vs Anime.js: Anime.js lower-level, Framer Motion integrates directly with React

Framer Motion vs CSS transitions: JS-driven animations more flexible and interactive

Framer Motion vs Lottie: Lottie is vector animation playback; Framer Motion is dynamic UI animation

2018 - Initial release of Framer Motion

2019 - Gesture and drag support added

2020 - AnimatePresence and exit animations introduced

2022 - Layout animations and shared element transitions

2024–2025 - Performance optimizations and expanded React integration

motion - animated React component

variant - predefined animation state

transition - controls timing and easing

AnimatePresence - animates mounting/unmounting components

motionValue - reactive value for advanced animation control