Bouncy Box using DynamicsJS

Recently I was in search of a small animation library that would make animations in Javascript much easier. I came across DynamicsJS ( and was really impressed with how easy it is to use without loosing much control over the animations. You can create some really detailed chained animations and fine tune all the details, or create a simple bounce animation.

Like so...

This is how easy it is to create the effect above.

var slide = function(amount){
  // Trigger the animation
  dynamics.animate(document.querySelector('.box'), {
    translateX: amount
  }, {
    type: dynamics.spring
  // In 1.5sec trigger the opposite animation
    slide(amount * -1); // Go opposite direction
  }, 1500);


// Initiate the looping