Chapter 83: spring

Core Idea

Explore Motion's spring() function for creating realistic spring animations. Learn how to use it with animate() or directly for advanced scenarios like visualizers and CSS spring generation. Understand key options including keyframes, duration, bounce, damping, mass, and stiffness.

Key Concepts

• Sampling a spring: For most use-cases
• Visualiser: It's possible to use spring() to generate CSS transitions.
• CSS generation: It's possible to use spring() to generate CSS transitions.
• keyframes: spring must be provided with two keyframes to animate between.
• Time options: Default: 800
• duration: Default: 800
• visualDuration: If visualDuration is set
• bounce: Default: 0.25
• Physics options: Default: 10

Code Examples

import { animate } from "motion/mini"
import { spring } from "motion"

animate(
  element,
  { transform: "translateX(100px)" },
  { type: spring, bounce: 0.3, duration: 0.8 }
)

• What it demonstrates: Core usage pattern for spring.

Key Takeaways

1. spring supports Sampling a spring.
2. spring supports Visualiser.
3. spring supports CSS generation.

Connects To

• animate(): related Motion doc page.
• CSS spring animations for React, Astro and Vue: related Motion doc page.
• Easing functions: related Motion doc page.
• mix: related Motion doc page.
• Spring example & tutorial for JavaScript: related Motion doc page.