spring()
A physics-based animation primitive.
Example:
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =spring ({frame ,fps ,config : {stiffness : 100,},});
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =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()
.
reverse
v3.3.92
Default: false
Render the animation in reverse. See: Order of operations
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
v3.0.27
optional
Stretches the animation curve so it is exactly as long as you specify.
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =spring ({frame ,fps ,config : {stiffness : 100,},durationInFrames : 40,});
spring-example.tstsx
constframe =useCurrentFrame ();const {fps } =useVideoConfig ();constvalue =spring ({frame ,fps ,config : {stiffness : 100,},durationInFrames : 40,});
See also: Order or operations
durationRestThreshold
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.
delay
v3.3.90
optional
How many frames to delay the animation for.
For example, if a delay
of 25
is given frames 0-24 will return the initial value, and the animation will effectively start from frame 25. See also: Order or operations
Order of operations
Here is the order of which the durationInFrames
, reverse
and delay
operations are applied:
durationInFrames
, if you pass a duration.reverse: true
.delay
.Credit
This function was taken from Reanimated 2, which in itself was a huge inspiration for Remotion.