springValue

springValue creates a new motion value that reacts to changes with a physics-based spring animation.

springValue either accepts a number:

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 })

Or another motion value:

const pointerX = motionValue(0)
const x = springValue(pointerX)

document.addEventListener("pointerMove", (e) => {
  // x will animate these changes with a spring animation
  pointerX.set(e.clientX)
})

styleEffect("div", { x })

Usage

springValue accepts either a number value or a motion value.

Number

A number can be provided with or without a unit:

import { springValue } from "motion"

const scaleX = springValue(0)
const rotate = springValue("1turn")

When we've provided a number, we can animate the returned motion value by calling its .set()

scaleX.set(1)
rotate.set("2turn")

Motion value

Alternatively, we can attach a spring onto another motion value by passing it to springValue:

const opacity = motionValue(1)
const x = mapValue(opacity, [0, 1], [0, 100])
const xWithSpring = springValue(x)

Options

All of the normal Motion spring options are supported via a second argument.

springValue(0, { stiffness: 1000 })

1.card {2  transition: scale 200ms linear(3    0, 0.009, 0.036, 0.084, 0.157, 0.255, 0.378,4    0.522, 0.679, 0.832, 0.954, 1.029, 1.052, 1.038,5    1.011, 0.99, 0.984, 0.991, 1.001, 1.005, 16  );7}89.card:hover {10  scale: 1.2;11}