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

Scroll-Linked Animations

Scroll-Linked Animations

How to bind animations to a webpage’s scroll position or the position of a scrollable element inside the page. Or, also, have an element track where it is in the viewport. Tracking scrollingPage scrollA simple exampleAn even simpler exampleOne with useSpring()Transforming Motion valuesInterpolating between numbersInterpolating between CSS calc() valuesInterpolating between CSS gradientsDisplaying Motion valuesSome more examplesViewport scroll […]

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