What is this ?
I am a big fan of react-spring, a spring-physics based animation library. It has quickly become my go-to library for UI animation in React projects. However, as a newbie to spring-based animations, I've had a hard time visualizing which effect the settings would have.
So, I made this visualizer in order to help me determine the correct spring config for my animations. I hope it is of some help to someone else.
The settings.
Mass
Imagine a fixed spring with a bob on one end, the mass value is the mass of the bob (). While not technically the same, in this instance you can think of it as the weight of the bob.
The higher the mass, the longer it takes for the animation to come to a rest.
Tension
Each spring has a certain stiffness. This is also called the spring constant or tension. In the real world it is caused by properties like the material and coil thickness.
If the spring's tension is high, the spring will contract more powerfully and the animation will feel snappy.
Friction
Imagine a spring as before (), but there is a certain amount of friction in the air. If the friction is higher, there's more power on the spring necessary to pull the bob to its resting position.
The higher the friction, the slower the animation will be. If the friction is low enough, it the bob will overshoot its position at rest. This creates a bouncy effect.
Precision
If the bob () bounces around its resting point, it will continue to do so for some time. The precision determines when to quit bouncing and stop the animation at the resting point.
By keeping the precision low, the animation will be more accurate and it might take longer to reach equilibrium.
Personally I haven't found much use for this setting. Please, let me know if I'm missing something!
Velocity
Imagine pushing the bob () upwards or downwards while releasing it. The speed with which you push the bob is the velocity. Pushing downwards is a negative velocity, pushing upwards is a positive velocity.
Sometimes it's nice to give a little negative velocity to create a sense of anticipation.
If a component is coming from off-screen, it is can be pleasant to give it a positive velocity, so it looks like the component is coming from far away.
Clamp
Imagine putting an solid barrier just above the resting position (), so the bob can not overshoot the resting position. There will be no bounce and the animation comes to a stop immediately.
You might want to use this when animating opacity, a bounce effect is probably not what you are looking for. The same goes for animating to a scale of 0, usually you don't want to show a negative scale, which would flip the animated component.
Another use-case is when you want to move a component to off-screen, clamp it so the animation doesn't continue while the component is off-screen.
Presets
React-spring comes with a set of sweet presets. You can select these to preview them.
Color scheme from Happy Hues bij Mackenzie Child.