Table of Contents
Updates
FAQ
Get the guide

Login / Register

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

The Framer code guide is like a magic cheatsheet for when I get stuck.

Some Examples

Home FAQ Updates

plugins premium WordPress