Skip to content

Instantly share code, notes, and snippets.

@jasonnathan jasonnathan/zoomAnimate.js
Last active Aug 29, 2015

Embed
What would you like to do?
A GSAP Timeline example for a Zoomable user interface
/**
* 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);
}
});
});
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.