AnimationProvider
Required wrapper managing Framer Motion animations site-wide with automatic accessibility support, test environment detection, and user preference handling.
Live Preview
Basic
Basic Animations
Simple fade and slide animations that respect reduced motion preferences
Animated Card
This card fades in from below when the page loads.
Delayed Animation
This card slides in from the left with a slight delay.
Stagger Children
Animate multiple elements in sequence with stagger effect
Staggered Item
Staggered Item
Staggered Item
Staggered Item
Staggered Item
Staggered Item
Interactions
Hover Animations
Interactive animations triggered by hover and tap gestures
Scale on Hover
This card scales up when you hover over it.
Rotate on Hover
This card rotates slightly when hovered.
Lift on Hover
This card lifts up when you hover over it.
Drag Gestures
Draggable elements with constraints and elastic behavior
Draggable Card
Drag me around!
Horizontal Only
I can only move left and right
Real World
Hero Page Load
Complete hero section animation with coordinated timing
Welcome to Launch77
Build amazing products with smooth animations
Fast
Lorem ipsum dolor sit amet
Secure
Lorem ipsum dolor sit amet
Scalable
Lorem ipsum dolor sit amet
Usage Guidance
✓ When to Use
Wrap the entire app in root layout of every marketing site using Framer Motion animations. Required to prevent animations from breaking in E2E tests and to respect user accessibility preferences.
✗ When NOT to Use
Not needed for static sites without animations, apps not using Framer Motion, or non-marketing pages that don't use animated components.
Props
childrenforceDisableclassNamestyleonClickonChange