Login / Register
Search
Introduction
Some Examples
1. Tween
2. Spring
3. Duration-based spring
4. Repeat
5. Reverse
6. While hover
7. While tap
8. While drag
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
Variants
Keyframes
Animation Types
Exit Animations
Cycling through states
Layout animations
Inline Styling Versus CSS Classes
Scale Correction for Child Elements
Customizing Layout Animations
Layout Group
Shared layout animations
Swapping Elements
Recreating Magic Motion
Adding a New Element
Motion Values
Chaining and Transforming Motion Values
Scroll-Linked Animations
Animating Motion Values
Springy Motion Values
Manual Controls
The useAnimate() hook
The useAnimationControls() hook
SVG Animations
Animating SVG Path Changes
Line Drawing
Animating SVG Gradients
Dragging
Axis and Direction Locking
Drag Constraints
Drag Elastic
Drag Momentum
Inertia Animations
Modify Target
Min and Max
Snap to Grid Example
Snap to Corner Example
Drag Events
Drag Controls
Reorder
Routing
Animatable Properties
API Overview

The useAnimationControls() hook

Homepage
The useAnimationControls() hook

From the Docs: useAnimate() is now the preferred way to manually trigger animations. It works with any HTML/SVG element, not just motion components. It also offers powerful playback controls. Basic useStopping an animationReturn after dragA sequence of animationsA sequence with pauses and repositioningInserting a pauseRepositioningSame sequence, multiple elementsA sequence animating separate elementsDynamic startOnly after mountUsing […]

To access this page, you must purchase The Mighty Motion Guide.
The useAnimate() hook
SVG Animations
plugins premium WordPress
Scroll to Top