Documentation

Documentation

React

useSpring

useSpring

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, or a unit-type (px, % etc) string:

const x = useSpring(0)
const y = useSpring("100vh")

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

x.set(100)
y.set("50vh")

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

x.jump(50)
y.jump("0vh")

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)

This source motion value must also be a number, or unit-type string.

Transition

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

useSpring(0, { stiffness: 300 })

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, or a unit-type (px, % etc) string:

const x = useSpring(0)
const y = useSpring("100vh")

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

x.set(100)
y.set("50vh")

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

x.jump(50)
y.jump("0vh")

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)

This source motion value must also be a number, or unit-type string.

Transition

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

useSpring(0, { stiffness: 300 })

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, or a unit-type (px, % etc) string:

const x = useSpring(0)
const y = useSpring("100vh")

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

x.set(100)
y.set("50vh")

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

x.jump(50)
y.jump("0vh")

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)

This source motion value must also be a number, or unit-type string.

Transition

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

useSpring(0, { stiffness: 300 })

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.