☰
Table of Contents
Introduction
Introduction
Some Examples
Some Examples
1. Tween
2. Spring
3. Duration-based spring
4. Repeat
5. Reverse
6. While hover
7. While tap
8. While drag
9. Cycling through states
10. Animation sequence
11. Drag: Constraints
12. Drag: Direction locking
13. Drag: Transform
14. Drag: 3D transform
15. Scroll: Progress
16. Scroll: Refresh
17. Page: Indicators
18. Page: Effects
19. Scroll and Page combined
20. SVG path length
21. Keyframes: Position and color
22. Keyframes: Morphing an SVG path
23. Colors: Keyframe animation
24. Colors: Interpolation
25. Colors: Switching between states
26. Tracking the cursor
27. Variants: Animation propagation
28. Variants: Staggered animation
29. Cycling parent and child variants
30. SVG gradient animation
31. Animate Presence
32. Animate Presence: Stack 3D
33. Layout animation
34. Swapping elements
35. Swipe to delete
Code Overrides
Code Overrides
Basic Overrides
Sharing Data Between Overrides
Overriding Canvas Components
Overriding Code Components
Code Components
Code Components
A Simple Code Component
Component Styling
Component Sizing
Motion-Compatible Components
Importing Other Layers, Components, and Packages
Customizing an Existing Component
Property Controls
Flexbox Component
Smart Code Components
Smart Code Components
Props Versus State
Passing Down Props
Sharing State
Letting a Prop Change the State
Simple But Smart
iOS Segmented Control
The Main Properties
The Main Properties
The Animate Property
The Transition Property
The Initial Property
Hooks
Hooks
The useState() Hook
Gesture Animations
Gesture Animations
Variants
Variants
Keyframes
Keyframes
Animation Types
Animation Types
Exit Animations
Exit Animations
Cycling Through States
Cycling Through States
Layout Animations
Layout Animations
Inline Styling Versus CSS Classes
Scale Correction for Child Elements
Customizing Layout Animations
Layout Group
Shared Layout Animations
Motion Values
Motion Values
Chaining and Transforming Motion Values
Scroll-Linked Animations
Scroll Layers for Prototyping
Animating Motion Values
Resetting a Motion Value
Springy Motion Values
Scroll-Triggered Animations
Scroll-Triggered Animations
Using whileInView
Using useInView()
Manual Controls
Manual Controls
The useAnimate() hook
The useAnimationControls() Hook
SVG Animations
SVG Animations
Animating SVG Path Changes
Line Drawing
Animating SVG Gradients
Dragging
Dragging
Axis and Direction Locking
Drag Constraints
Drag Elastic
Drag Momentum
Inertia Animations
Modify Target
Min and Max
Snap to Grid Example
Snap to Corner Example
Drag Events
Drag Controls
Reorder
Reorder
Using a Web API
Using a Web API
Animatable Properties
Animatable Properties
API Overview
API Overview
A Framer Motion Project
A Framer Motion Project
Create React App
CodeSandbox
Routing
Updates
FAQ
Get the guide
Login / Register
Content restricted
plugins premium WordPress