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

Animating SVG Path Changes

Animating SVG Path Changes

You can morph the shape of an SVG path; when you take some limitations into account. There’s an easier wayA simple curveThe path’s shapeThe path’s styleAnimating the curveKeyframesMore pathsPaths must be similarBending a straight lineSome more examplesBy Matt PerryBy Viktor Renkema There’s an easier way On this page, I explain how to change the shape […]

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