Skip to main content

spring()

A physics-based animation primitive.

Example:

tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
});
tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
});

Parameters​

frame​

The current time value. Most of the time you want to pass in the return value of useCurrentFrame(). The spring animation starts at frame 0, so if you would like to delay the animation, you can pass a different value like frame - 20.

from​

Default: 0

The initial value of the animation.

to​

Default: 1

The end value of the animation. Note that depending on the parameters, spring animations may overshoot the target a bit, before they bounce back to their final target.

fps​

For how many frames per second the spring animation should be calculated. This should always be the fps property of the return value of useVideoConfig().

config​

An optional object that allows you to customize the physical properties of the animation.

mass​

Default: 1

The weight of the spring. If you reduce the mass, the animation becomes faster!

damping​

Default: 10

How hard the animation decelerates.

stiffness​

Default: 100

Spring stiffness coefficient. Play with this one and it will affect how bouncy your animation is.

overshootClamping​

Default: false

Determines whether the animation can shoot over the to value. If set to true, if the animation goes over to, it will just return the value of to.

durationInFrames​

Available from v3.0.27 - optional

Stretches the animation curve so it is exactly as long as you specify.

tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
  durationInFrames: 40,
});
tsx
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const value = spring({
  frame,
  fps,
  config: {
    stiffness: 100,
  },
  durationInFrames: 40,
});

durationRestThreshold​

Available from v3.0.27 - optional

How close the animation should be to the end in order to be considered finished for the calculation of the duration. Only has an effect if durationInFrames is also specified.

For example, if a durationRestThreshold of 0.001 is given, and the durationOfFrames is 30, it means that after 30 frames, the spring has reached 99.9% (1 - 0.001 = 0.999) of it's distance to the end value.

YouTube video​

Want to understand the different properties like mass, stiffness, damping etc.? We made a video trying to make sense of all the parameters!

Watch: The perfect spring animation

Credit​

This function was taken from Reanimated 2, which in itself was a huge inspiration for Remotion.

See also​