pipewrk · August 29, 2015 14:13 · Jan 16, 2015 · Jan 16, 2015 · Jan 16, 2015 · Jan 16, 2015
diff --git a/zoomAnimate.js b/zoomAnimate.js
@@ -100,9 +100,7 @@ Meteor.startup(function(){
   /**
    * The click handler for the menu items
    */ 
-   var pageItems = ['#start', '#contact', '#works'];
-
-   _.each(pageItems, function(item){
+   _.each(['#start', '#contact', '#works'], function(item){
 
      // create a jQuery Object. Menu items are just appended with 'Menu'
      var element = $(item + "Menu");

diff --git a/zoomAnimate.js b/zoomAnimate.js
@@ -32,7 +32,7 @@
       // we add a 1.1 second total animation time
       return TweenLite.to(element, 1.1, {
         scale: scale,
-        force3D: true, // added to force hardware accelerated animations if possible
+        force3D: true, // force hardware accelerated animations if possible
         ease: Power4.easeIn
       });
     },

diff --git a/zoomAnimate.js b/zoomAnimate.js
@@ -5,7 +5,7 @@
 * @globals _, $, TimelineLite, TweenLite
 * 
 * See blog post for further reading:
-* www.scriptstreet.com/building-a-zoomable-user-interface-with-meteorjs-greensock
+* www.scriptstreet.com/building-a-zoomable-user-interface-with-meteorjs-gsap
 */
 
   _Animation = {

diff --git a/zoomAnimate.js b/zoomAnimate.js
@@ -1,12 +1,12 @@
-  /**
-   * 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-greensock
-   */
+/**
+* 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-greensock
+*/
 
   _Animation = {
     tl: new TimelineLite,

diff --git a/zoomAnimate.js b/zoomAnimate.js
@@ -100,9 +100,9 @@ Meteor.startup(function(){
   /**
    * The click handler for the menu items
    */ 
-   var menuItems = ['#start', '#contact', '#works'];
+   var pageItems = ['#start', '#contact', '#works'];
 
-   _.each(menuItems, function(item){
+   _.each(pageItems, function(item){
 
      // create a jQuery Object. Menu items are just appended with 'Menu'
      var element = $(item + "Menu");

diff --git a/zoomAnimate.js b/zoomAnimate.js
@@ -51,7 +51,7 @@
         // scales to 1/3 of original scale
         .add(self.tw("#contact", .3333), "-=1.1") 
         // scales to 1/6 of original scale        
-        .add(self.tw("#contact", .1111), "-=1.1");
+        .add(self.tw("#works", .1111), "-=1.1");
 
       return self;
     },
@@ -70,7 +70,7 @@
         // 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("#contact", .3333), "-=1.1");
+        .add(self.tw("#works", .3333), "-=1.1");
 
       return self;
     },
@@ -89,7 +89,7 @@
         // 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("#contact", 1), "-=1.1");
+        .add(self.tw("#works", 1), "-=1.1");
 
       return self;
     }

diff --git a/zoomAnimate.js b/zoomAnimate.js
@@ -0,0 +1,119 @@
+  /**
+   * 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-greensock
+   */
+
+  _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, // added to 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("#contact", .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("#contact", .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("#contact", 1), "-=1.1");
+
+      return self;
+    }
+  }
+
+// Meteor's startup function called when DOM is loaded  
+Meteor.startup(function(){
+  /**
+   * The click handler for the menu items
+   */ 
+   var menuItems = ['#start', '#contact', '#works'];
+
+   _.each(menuItems, 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);
+       }
+     });
+   });  
+})
No results found