Login / Register

3. Duration-based spring

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

Animation Types

Exit Animations

Cycling through states

Layout animations

Inline Styling Versus CSS Classes

Scale Correction for Child Elements

Customizing Layout Animations

Shared layout animations

Swapping Elements

Recreating Magic Motion

Adding a New Element

Chaining and Transforming Motion Values

Scroll-Linked Animations

Animating Motion Values

Springy Motion Values

Manual Controls

The useAnimate() hook

The useAnimationControls() hook

Animating SVG Path Changes

Animating SVG Gradients

Axis and Direction Locking

Drag Constraints

Inertia Animations

Snap to Grid Example

Snap to Corner Example

Animatable Properties

Manual Controls

Manual Controls

Earlier, we had useAnimationControls() to start animations manually, but now there’s the new useAnimate(), which works with all HTML elements (not only Motion elements). The useAnimationControls() hook still exists because not everything is yet possible with useAnimate(). The useAnimate() hook The useAnimationControls() hook

To access this page, you must purchase The Mighty Motion Guide.