CSS spring physics
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demos
LICENSE.txt
README.md
spring.js

README.md

Boing

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

How?

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.

Why?

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.