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 Vue:

import { useSpring } from 'motion-v'

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

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.

The spring can be configured with a number of options. For whole reference, refer to motion's docs.

useSpring(0, {
  stiffness: 300,
  damping: 100,
  mass: 10,
})

Default: 10

Strength of opposing force. If set to 0, spring will oscillate indefinitely.

Default: 1

Mass of the moving object. Higher values will result in more lethargic movement.

Default: 1

Stiffness of the spring. Higher values will create more sudden movement.

On This Page