Animating Spring Physics with Anime.js

Ever wonder why a spring-based motion behaves the way it does? Well, there are 4 different reasons: mass, stiffness, damping, and velocity.

blue spring
The mass of a spring (according to Apple's animation implementation) refers to the mass of the object pulling at the end of the spring.
The stiffness, or tension, of a spring is basically how taut it is, or the elasticity between the atomic bonds.
The damping is anything that causes the spring's motion to be finite, (e.g., friction).
The velocity is the initial velocity of the object attached to the spring.

Play with all 4 variables below!

1 10 1 1

In anime.js, you'd implement spring-based motion like this:

anime({
targets: '.target_name',
translateX: 200,
direction: 'alternate',
loop: true,
easing: spring(mass_number, stiffness_number, damping_number, initial_velocity_number
})
view raw spring-easing.gist hosted with ❤ by GitHub
Want more in-depth resources?
Josh W. Comeau's guide is what I'd call the premier resource
Maxime Henckel's blog post for a thorough intro to the math behind it all

About me

Lucia's headshot

I'm Lucia Cerchie, a developer experience professional who loves to learn in public and create educational scrollytales. Find me on GitHub or LinkedIn