Chapter 68: Get started with Motion

Core Idea

Learn Motion animation library: Install, animate HTML/SVG/WebGL elements with spring animations, staggering effects. Complete guide with examples.

Key Concepts

• Install: You can install Motion in two ways:
• Package manager: Motion can be installed via the "motion" package.
• script tag: It's possible to import Motion directly using a script tag.
• Create an animation: The "Hello world!" of any animation library is a simple transform animation.
• What can be animated?: Motion lets you animate anything:
• Customising animations: Motion comes with smart defaults
• Stagger animations: When animating multiple elements
• Development tools: The Motion AI Kit provides visual editing and AI tools to enhance your animation developme
• One click install for Cursor: Animation best practices

Code Examples

npm install motion

• What it demonstrates: Core usage pattern for Get started with Motion.

Key Takeaways

1. HTML/CSS.
2. SVG (like path drawing animations).
3. WebGL (3D graphics).

Connects To

• animate(): related Motion doc page.
• spring: related Motion doc page.
• Motion AI Kit. MotionScore for Agents, current docs and CSS springs: related Motion doc page.
• Install the Motion AI Kit: related Motion doc page.
• Scroll animations in JavaScript with scroll(): related Motion doc page.