A GSAP Timeline example for a Zoomable user interface

zoomAnimate.js

/**
* This was written in Meteor JS, these globals are directly accessible thanks
* to Meteor's Smart Packages
* 
* @globals _, $, TimelineLite, TweenLite
* 
* See blog post for further reading:
* www.scriptstreet.com/building-a-zoomable-user-interface-with-meteorjs-gsap
*/
   
  _Animation = {
    tl: new TimelineLite,
    /**
     * A simple helper method that removes .active class from menu items and
     * adds it to given element.
     * 
     * @param {Object} elementToAdd - jQuery object
     */
    removeActive: function(elementToAdd) {
      $("#mainNav a").each(function() {
        return $(this).removeClass('active');
      });
      return elementToAdd && elementToAdd.addClass('active');
    },
    /**
     * Another helper method that builds an options object for Tweenlite
     * 
     * @params {Object} params - a hash of options
     * @return {Object} TweenLite
     */ 
    tw: function(element, scale) {
      // we add a 1.1 second total animation time
      return TweenLite.to(element, 1.1, {
        scale: scale,
        force3D: true, // force hardware accelerated animations if possible
        ease: Power4.easeIn
      });
    },
    /**
     * Animation for Start Page
     * 
     * returns {Object} _Animation - self
     */ 
    start: function(element) {
      var self = this;
      // remove active class from all other menus and add one for this one  
      self.removeActive(element);

      // add each tween to the timeline, scales to 1
      self.tl.add(self.tw("#start", 1))
        // scales to 1/3 of original scale
        .add(self.tw("#contact", .3333), "-=1.1") 
        // scales to 1/6 of original scale        
        .add(self.tw("#works", .1111), "-=1.1");

      return self;
    },
    /**
     * Animation for Contact Page
     * 
     * returns {Object} _Animation - self
     */     
    contact: function(element) {
      var self = this;
      // remove active class from all other menus and add one for this one  
      self.removeActive(element);

      // now the start page scales to 7.5
      self.tl.add(self.tw("#start", 7.5))
        // scales to original scale since it is in view now
        .add(self.tw("#contact", 1), "-=1.1") 
        // scales to 1/3 of original scale        
        .add(self.tw("#works", .3333), "-=1.1");

      return self;
    },
    /**
     * Animation for Works Page
     * 
     * returns {Object} _Animation - self
     */       
    works: function(element) {
       var self = this;
      // remove active class from all other menus and add one for this one  
      self.removeActive(element);

      // now the start page scales to 7.5
      self.tl.add(self.tw("#start", 7.5))
        // scales to 7.5
        .add(self.tw("#contact",  7.5), "-=1.1") 
        // scales to original scale since it is in view now   
        .add(self.tw("#works", 1), "-=1.1");

      return self;
    }
  }

// Meteor's startup function called when DOM is loaded  
Meteor.startup(function(){
  /**
   * The click handler for the menu items
   */ 
   _.each(['#start', '#contact', '#works'], function(item){
     
     // create a jQuery Object. Menu items are just appended with 'Menu'
     var element = $(item + "Menu");
     
     element.on('click', function(e){
       e.preventDefault();
       // check if a method is defined
       if(_Animation[item] && typeof _Animation[item] === 'function'){
         // call the method, giving the parent Object as context
         return _Animation[item].call(_Animation, element);
       }
     });
   });  
})