Delightful and smooth animation primitive. Calculates a position based on physical parameters, start and end value, and time.
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.
The initial value of the animation.
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.
For how many frames per second the spring animation should be calculated. This should always be the
fps property of the return value of
An optional object that allows you to customize the physical properties of the animation.
The weight of the spring. If you reduce the mass, the animation becomes faster!
How hard the animation decelerates.
Spring stiffness coefficient. Play with this one and it will affect how bouncy your animation is.
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
Want to understand the different properties like
damping etc.? We made a video trying to make sense of all the parameters!
Watch: The perfect spring animation
This function was taken from Reanimated 2, which in itself was a huge inspiration for Remotion.