animation.js

animation.js

'use strict';

// A list of layers with initial values
var layers = [
  {
    name: 'red-square',
    width: 200,
    height: 200,
    x: 0,
    y: 0,
    background: '#ff0000'
  }
];

// Each transition has its own spring, but you could easily extend
// this so a transition declared a spring name and let the animation
// class manage sharing them.
var transitions = [
  {
    name: 'slide',
    layers: ['red-square'],
    start: 0,
    end: 200,
    tension: 40,
    friction: 7,
    fields: ['x', 'y']
  },
  {
    name: 'rotate',
    layers: ['red-square'],
    start: 0,
    end: 45,
    tension: 40,
    friction: 7,
    fields: ['rot']
  }
];


document.addEventListener('DOMContentLoaded', function() {
  // create an Animation.
  var animation = window.animation = new Animation(layers, transitions);

 // Not sure exactly how trigger the animation to start should work. I keep
 // a map of them so I can just directly control them here.
  var transition = animation.getTransition('slide');
  transition.go(1);
  var transition2 = animation.getTransition('rotate');
  transition2.go(1);
});