useSpring creates a motion value that will animate to its latest target with a spring animation.

The target can either be set manually via .set, or automatically by passing in another motion value.

Usage

Import useSpring from Motion:

import { useSpring } from "motion/react"

Direct control

useSpring can be created with a number:

const x = useSpring(0)

Now, whenever this motion value is updated via set(), the value will animate to its new target with the defined spring.

x.set(100)

It's also possible to update this value immediately, without a spring, with the jump() method.

x.jump(100)

Track another motion value

Its also possible to automatically spring towards the latest value of another motion value:

const x = useMotionValue(0)
const y = useSpring(x)

Transition

The type of spring can be defined with the usual spring transition option.

useSpring(0, { stiffness: 300 })

Examples