Login / Register
Search
Introduction
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. SVG path length
18. Keyframes: Position and color
19. Keyframes: Morphing an SVG path
20. Colors: Keyframe animation
21. Colors: Interpolation
22. Colors: Switching between states
23. Tracking the cursor
24. Variants: Animation propagation
25. Variants: Staggered animation
26. Cycling parent and child variants
27. SVG gradient animation
28. Animate Presence
29. Animate Presence: Stack 3D
30. Layout animation
31. Swapping elements
32. Swipe to delete
The Main Properties
The Animate Property
The Transition Property
The Initial Property
Gesture Animations
Variants
Keyframes
Animation Types
Exit Animations
Cycling through states
Layout animations
Inline Styling Versus CSS Classes
Scale Correction for Child Elements
Customizing Layout Animations
Layout Group
Shared layout animations
Swapping Elements
Recreating Magic Motion
Adding a New Element
Motion Values
Chaining and Transforming Motion Values
Scroll-Linked Animations
Animating Motion Values
Springy Motion Values
Manual Controls
The useAnimate() hook
The useAnimationControls() hook
SVG Animations
Animating SVG Path Changes
Line Drawing
Animating SVG Gradients
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
Routing
Animatable Properties
API Overview

Layout animations

Homepage
Layout animations

Version 2.0 of Framer Motion added layout animations, enabling motion elements to automatically animate to a new size and position.The section Layout Group shows how to animate a group of elements in concert. And for more about animating between different elements, check out Shared Layout Animations. A basic switchThe layout property A basic switchYou’ve probably […]

To access this page, you must purchase The Mighty Motion Guide.
Cycling through states
Inline Styling Versus CSS Classes
plugins premium WordPress
Scroll to Top