Animation and Springs

Published on 30 December 2022

Like Apple and react-spring has frequency response and damping ratio as two paramaters to cover most cases of spring animation, Framer Motion has literal duration and bounce.

The rest of this piece talks about react-spring exclusively.

Keep frequency: 0, damping: 1 as starting point. At frequency 0 the animation would be instant, so you should gradually increase frequency, to say 0.2 (for 200ms). Play with 0 < damping ≤ 1 and 0 < frequency and refer to the Apple talk from the link mentioned above to understand how to play with them.
If you want to use and easing instead, opt for duration and easing.

@use-gesture/react‘S useDrag Findings

React Spring Visualizer translateY Findings:

You’ll mostly need mass, tension and friction. Feels like mass and friction goes hand in hand. Precision and velocity seems to have rare use-case. Decay can be used slow animation down at the end, mostly used for smooth scroll.

If you’re feeling that almost end of animation, animation clips and jumps to end state then either you need to increase its tension (by 50s) or mass (by 5). Increasing tension seems better choice here (or increase to increase tension by comparatively less amount)

To Learn to Animate



Later (mostly threejs)