Chapter 51: animate()

Core Idea

Explore Motion's powerful animate() function for creating and controlling animations. Animate HTML, SVG, CSS variables, and SVG paths with mini (2.3kb) or hybrid (18kb) versions. Utilize tween, spring, or inertia animations, build complex sequences, and take advantage of comprehensive playback controls.

Key Concepts

• HTML & SVG: Both versions of animate are capable of animating HTML and SVG styles either by passing el
• Transforms: The hybrid version of animate can animate every transform axis independently:
• CSS variables: Hybrid animate can animate CSS variables in every browser:
• SVG paths: The hybrid animate function can perform line drawing animations with most SVG elements
• Single values: By passing a to and from value
• Motion values: By passing hybrid animate a React motion value
• Objects: Objects can be animated much in the same way as HTML & SVG elements.
• Timeline sequences: The hybrid animate function can also accept complex animation sequences.
• Reschedule a segment: It's possible to change when a segment will play by passing an at option

Code Examples

animate("li", { opacity: 0 })

• What it demonstrates: Core usage pattern for animate().

Key Takeaways

1. Independent transforms (x/y/rotateZ etc).
2. More styles, like mask-image and gradients.
3. CSS variables.
4. SVG paths.
5. Animation sequences.

Connects To

• 3D transforms: related Motion doc page.
• Motion Values: related Motion doc page.
• arc(): related Motion doc page.
• Tween: related Motion doc page.