Framer Motion Animations

Create fluid animations and transitions in React with Framer Motion. Generates layout animations, gesture interactions, scroll-triggered effects, page transitions, and complex orchestrated sequences.

This skill helps you build polished animations with Framer Motion (Motion). It creates enter/exit animations, layout transitions, drag interactions, scroll-linked effects, staggered children, shared layout animations between routes, and performant spring-based physics animations.

When to use

Use when adding micro-interactions, page transitions, scroll animations, drag-and-drop interfaces, or any motion design to React applications. Handles both simple hover effects and complex orchestrated sequences.

Examples

Page transitions

Animate between routes with shared layout

Implement smooth page transitions between list and detail views with shared layout animation for the card element

Scroll-triggered sections

Animate elements as they scroll into view

Create scroll-triggered animations where sections fade and slide in as they enter the viewport with staggered children