Chapter 84: springValue

Core Idea

Learn to use Motion's springValue to create motion values that animate with physics-based spring motion. Discover how to apply springs to numbers or existing motion values, and configure them using options like stiffness, damping, and mass for reactive animations.

Key Concepts

• Number: A number can be provided with or without a unit:
• Motion value: Alternatively
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

const x = springValue(0)
const y = springValue("100%")

// These will go to their new target with a spring animation
x.set(100)
y.set("0%")

styleEffect("div", { x, y })

• What it demonstrates: Core usage pattern for springValue.

Key Takeaways

1. springValue supports Number.
2. springValue supports Motion value.
3. springValue supports Animate faster with Motion+..

Connects To

• motionValue: related Motion doc page.
• animate(): related Motion doc page.
• transformValue: related Motion doc page.
• mapValue: related Motion doc page.
• Spring: Follow Cursor example & tutorial for JavaScript: related Motion doc page.