GreenSock Cheat Sheet

Documentation: TweenLite - http://bit.ly/TweenLite

TimelineLite - http://bit.ly/TimelineLite
TimelineMax - http://bit.ly/TimelineMax
TweenLite - TweenMax - TimelineLite - TimelineMax TweenMax - http://bit.ly/TweenMax

TweenLite TimelineLite TimelineMax

// Create a variable // Create a timeline // Create a timeline

var $box = $('#box'); var tl = new TimelineLite(); var tl = new TimelineMax({options});

// Create a tween // Sequence multiple tweens // TimelineMax Options

var tween = TweenLite.to($box, 2, { tl.to($box, 1, {x:50,y:0}) delay: 2, // Number of seconds before animation start
x: 100, .to($box, 1, {x:50,y:50}) paused: true/false, // Default value is false
ease: Power1.easeInOut, .to($box, 1, {x:-50,y:50}) repeat: 2, // Number of repeats or -1 for infinite loop
delay: 2, .to($box, 1, {x:-50,y:0}); repeatDelay: 1, // Number of seconds between repeats
onComplete: myFunction, yoyo: true/false, // If true > A-B-B-A, if false > A-B-A-B
onCompleteParams: [element, 'param2'] // Add tween 0.7 seconds into the timeline smoothChildTiming: true/false, // Controls child tweens and timelines
}); tl.to($box, 1, {scale: 0.5}, 0.7); useFrames: true/false, // Set timing based on frames (default seconds)

// Default easing functions // Overlap tween with previous by 0.7 sec // Callback function
ease: Power0.easeNone //no easing = Linear tl.to($box, 1, {scale: 0.5}, '-=0.7'); var tl = new TimelineMax({
ease: Power1, Power2, Power3, Power4, Back onStart: myFunc, // Run myFunc() when timeline starts
Bounce, Circ, Elastic, Expo, Sine // Offset/delay tween by 0.7 seconds onStartScope: Object, // What 'this' refers to inside of myFunc
.easeIn .easeOut .easeInOut tl.to($box, 1, {scale: 0.5}, '+=0.7'); onStartParams: ['{self}', 'param2'] // {self} is timeline itself
ease: RoughEase, SlowMo, SteppedEase // Set tween without animating });
.ease.config() tl.set($box, {scale: 0.5});
// http://greensock.com/ease-visualizer // Available Callback functions
// Add Label 1 second into the timeline onStart, onStartScope, onStartParams, onComplete, onCompleteScope,
paused: true/false, // Pause Tween tl.add('scaleBox', 1); onCompleteParams, onUpdate, onUpdateScope, onUpdateParams,
delay: 2, // Amount of delay in seconds // Add tween to label position onRepeat, onRepeatScope, onRepeatParams, onReverseComplete,
immediateRender: true/false, // Prevent tl.to($box, 1, {scale: 0.5}, 'scaleBox'); onReverseCompleteScope
immediate rendering when using set()
or from()-based methods (eg. fromTo) // Control timeline playback
tl.play(1.5); // Play from 1.5s Free Online Course
// Callback functions tl.play(-1); // Play 1s from end
onComplete: // When tween has completed
onStart: // When tween begins
tl.pause(); // Pause timeline
tl.resume(); // Continue playback
GREENSOCK 101
onUpdate: // On every frame of the tween tl.seek(1.5); // Go to 1.5s or 'label'
The Quickest Way To Get
tl.reverse(); // Reverse playback anytime
// From Tween // FromTo Tween tl.timeScale(2); // Speed up timeline Started With GreenSock
TweenLite.from( TweenLite.fromTo( tl.progress(0.5); // Skip to halfway
element, element,
http://bit.ly/greensock-course
duration, duration, // staggerFrom, staggerTo, staggerFromTo
{fromVars} {fromVars}, tl.staggerFrom($dots, 1, {
); {toVars} autoAlpha: 0 Click the link above and start now!
); }, 0.1); // Stagger tween start by 0.1

Created with by Petr Tichy, happy tweening! V4.0 https://www.ihatetomatoes.net

 GreenSock Cheat Sheet
TweenLite - TweenMax - TimelineLite - TimelineMax

TweenLite TweenMax Changing CSS Classes

TweenLite TimelineMax TweenLite
Each Loop
// Inc. CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, EasePack, // Remove class .loading from body // Create a main timeline
DirectionalRotationPlugin, TweenLite, TimelineLite, and TimelineMax TweenLite.set($body, {className: '-=loading'}); var $box = $('.box'),
// Add class .loading to body mainTl = new TimelineMax({options});
var tween = TweenMax.to($box, 1, { TweenLite.set($body, {className: '+=loading'});
x: '-=50', // Tween to the current x value minus 50 // Set only class .loading to body // Create a timeline for each box
y: '+=50', // Tween to the current y value plus 50 TweenLite.set($body, {className: 'loading'}); $box.each(function(index, element){
onComplete: myFunction,
ease:Back.easeOut var $box = $(this).find('.boxSmall'),
GreenSock + jQuery
TweenLite
}); boxTl = new TimelineMax();
tl.add(tween, 2); // Add tween 2 seconds into the timeline // Scale box up/down on hover
$box.hover( // Add tweens to box timeline
Plugins and FileTweenLite
Size TweenLite
Nesting Timelines function() { boxTl
TweenLite.to($(this), 1, {scale:1.2}); .to($box, 1, {vars});
// Core files // Create a main timeline
},
TweenLite (9kb) var mainTl = new TimelineMax({options}); // Add boxTl to mainTl
function() {
TimelineLite (4kb) mainTl.add(boxTl);
TweenLite.to($(this), 1, {scale:1});
TimelineMax (6kb) // Create a function returning timeline TweenMax
} });
TweenMax (34kb) function getTimeline(){ http://bit.ly/gsapeach
); http://bit.ly/gsaphover

// Extras // Create sub timeline

// Move box 100px to the right on click TweenLite
Bonus Plugins and Tools
EasePack (2kb) var timeline = new TimelineMax();
$box.on('click', function(e){
jquery.gsap.js (2kb) // Bonus Plugins for Club Members Only
TweenLite.to($(this), 0.3, {x:'+=100px'});
Draggable (12kb) // Add tweens to sub timeline DrawSVGPlugin (3kb) - SIMPLY GREEN
});
timeline physics2D (3kb) - SIMPLY GREEN
http://bit.ly/gsapclick
// Plugins .to(elem, 1, {vars}); physicsProps (3kb) - SIMPLY GREEN
css (15kb) throwProps (10kb) - SHOCKINGLY GREEN
// Random value from a min/max range
bezier (4kb) return timeline; scrambleText (4kb) - SHOCKINGLY GREEN
var delay = getRandom(1, 2);
kinetic (3kb) SplitText (7kb) - SHOCKINGLY GREEN
directionalRotation (1kb) }
// Delay tween by a random number between 1 & 2
attr (1kb) TweenLite
Learning Resources & People to Follow
TweenLite.to($box, 1, {x:'80', delay: delay});
text (1kb) // Make this all happen on page load
scrollTo (1kb) function init(){ http://greensock.com/get-started-js/
function getRandom(min, max) {
raphael (3kb) http://codepen.io/GreenSock/
return min + Math.random() * (max - min);
colorProps (1kb) // Add sub timeline to main timeline http://codepen.io/chrisgannon/
}
cssRule (1kb) mainTl http://codepen.io/sdras/
http://bit.ly/gsapeach
easel (3kb) .add(getTimeline(), 'scene-intro'); http://codepen.io/MAW/
roundProps (1kb) } https://www.youtube.com/ihatetomatoesblog
Got a GSAP Questions?
TweenLite http://greensocktutorials.com/
Version: 1.17.0 init(); https://www.nobledesktop.com/books/gsap
A:http://greensock.com/forums/ B:@ihatetomatoes
Updated 2015-05-28 https://nobledesktop.com/classes/greensock

Created with by Petr Tichy, happy tweening! V4.0 https://www.ihatetomatoes.net