Javascript Animation Snippets

AnimationHelpers.js

// Cross-browser compatible scroll position
function getScrollPosition() {
  return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}

// requestAnimationFrame polyfill
(function requestAnimationFramePolyfill() {
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
      window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                 || window[vendors[x]+'CancelRequestAnimationFrame']; }
  if (!window.requestAnimationFrame)
      window.requestAnimationFrame = function(callback, element) {
          var currTime = new Date().getTime();
          var timeToCall = Math.max(0, 16 - (currTime - lastTime));
          var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
            timeToCall);
          lastTime = currTime + timeToCall;
          return id;
      };

  if (!window.cancelAnimationFrame)
      window.cancelAnimationFrame = function(id) {
          clearTimeout(id);
      };
})();

// Ticking method used by animation controllers in order to request a new animation frame
var ticking = false;
function requestTick() {
  if( !ticking ) {
    requestAnimationFrame(update);
    ticking = true;
  }
}

function update() {
  // PUT ANIMATION LOGIC/CALCULATIONS HERE
}