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

Line Drawing

Line Drawing

How to change the length of a path and make a shorter version of it move back and forth. Extra convenience propertiesMotion values, pleaseMotionized CRA projectThe path animation sequenceThe ovalsA function that kicks off animation sequencesFirst animation: shorten the pathSecond animation: travel along the pathThird animation: grow the pathColor me gradientThe central circleSpinning the iconSome […]

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