Spring Animation Keyframes

Why use it?

• Physics based

  Animations that follow spring physics feel more realistic and organic.

  SPRING

  EASE

• Smooth in all circumstances

  Not everyone has a fast device. This library let's the browser rendering engine run the animation, instead of running it in a JS function, and that ensures the animation runs as smooth as possible.

• Supports SSR and SSG

  JS is only needed to generate the keyframes, you can do that on the server or on the client. Unless your animations depend on runtime data, you can even generate them at compile time.

• Very small bundle size

  If you decide to generate the keyframes on the client, the bundle size is really small, only 1.3 kB (gzipped).

• Works with every framework

  The output of this library is just a string, you can use it with almost anywhere.

Limitations

• No support for dynamic animations

  Dynamic animations (for example drag-and-drop, following the user's mouse, etc.) are not supported. The goal of this library is to pre-calculate all the keyframes for an animation, so anything that can modify the keyframes while the animation is running should use a JS-based animation library like react-spring.

How does it work?

All the animations produced by this library follow the following spring equations:

f(0) = x0

f'(0) = v0

f''(t) = -k*(f(t) - x1) - μ*f'(t)

What this library outputs are the values of f(t), by using a pre-calculated solution to the differential equation.