CSS spring physics
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A bare-bones spring physics animation library for CSS and the DOM.


Animate an element with requestAnimationFrame:

var springyEl = document.getElementById('springy');
animateSpring(200, 0, 50, 700, 10, function (x) {
  springyEl.style.left = x + 'px';

Animate an element using hardware-acclerated CSS keyframes:

var springyEl = document.getElementById('springy');
animateSpringViaCss(springyEl, 200, 0, 50, 700, 10, function (x) {
  return 'left: ' + x + 'px;';

Check out the code. It's simple and there are literate comments throughout.


If it can be swiped, thrown or dragged, it should be a spring. If you want realistic physical interactions, you need to model physics.

CSS animations are bounded by a fixed time and use Bezier curves to describe animation easing.

.animated {
  transition: left 500ms cubic-bezier(0.000, 0.405, 0.000, 1.285);

This approach has a couple of problems:

  • When resources become scarce, browsers have to drop animation frames to make sure they deliver an animation on-time. This results in choppy animations.
  • A single Cubic Bezier can only describe a single curve, meaning "bounciness" ain't gonna happen.

Spring physics offers an interesting alternative. Rather than defining an animation by time & easing, springs define animations using tension, friction and mass, simulating the reaction a real spring would have.

The result feels, well... physical. Springs respond in very tangible ways — the velocity and distance of your actions are taken into account.