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

Reorder

Reorder

These two components, both included in Reorder, let you create a drag-to-reorder list, which can be vertical or horizontal. You can also add and remove items and make only part of each item draggable. The basicsReorder.GroupReorder.Item<ul> or <ol>No list styleMaking the item grow and adding a shadowA horizontal listAdding and removing itemsAdding an animalAdding an […]

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