motionValue

Motion Values track the state and velocity of animated values.

They are composable, signal-like values that are performant because Motion throttles rendering with its optimised frameloop.

Motion Values are usually created automatically by the animate function or motion components. They aren't something you generally have to think about.

But, for advanced use cases, it's possible to create them manually.

const x = motionValue(0)

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

animate(x, 100)

By manually creating motion values you can:

• Set and get their state.

• Subscribe to changes via the on method.

• Automatically end existing animations when starting new animations.

const color = motionValue("#f00")

animate(color, "#0f0")

animate(color, "#333") // Will automatically end the existing animation