Chapter 77: motionValue

Core Idea

Understand Motion Values, the core of Motion's animation system, used for tracking the state and velocity of animated properties. Learn how to manually create, set, get, and subscribe to motion values for advanced animation control and rendering with effects.

Key Concepts

• Set value: Motion Values can be updated with the set method.
• Get value and velocity: The latest value of a Motion Value can be read with .get():
• Render: Motion values can be passed to effects like styleEffect
• API: Returns the latest state of the Motion Value.
• get(): Returns the latest state of the Motion Value.
• getVelocity(): Returns the latest velocity of the motion value.
• set(): Sets the Motion Value to a new state.
• jump(): Jumps the Motion Value to a new state in a way that breaks continuity from previous values
• isAnimating(): Returns true if the value is currently animating.

Code Examples

const x = motionValue(0)

x.on("change", latest => console.log(latest))

animate(x, 100)

• What it demonstrates: Core usage pattern for motionValue.

Key Takeaways

1. Set and get their state.
2. Subscribe to changes via the on method.
3. Automatically end existing animations when starting new animations.

Connects To

• animate(): related Motion doc page.
• React motion component: related Motion doc page.
• springValue: related Motion doc page.
• transformValue: related Motion doc page.
• mapValue: related Motion doc page.