Scribd
Upload
622 views

GreenSock GSAP-JS API Cheatsheet

This document provides a cheat sheet for the GreenSock animation library, summarizing the main components of TweenLite, TweenMax, TimelineLite, and TimelineMax. It includes examples of how to create tweens and timelines, sequence animations, add callbacks, and nest timelines. Additional sections cover easing functions, plugins, file sizes, learning resources, and people to follow for more information on GreenSock.

Uploaded by

cr33pz1lla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
622 views

GreenSock GSAP-JS API Cheatsheet

This document provides a cheat sheet for the GreenSock animation library, summarizing the main components of TweenLite, TweenMax, TimelineLite, and TimelineMax. It includes examples of how to create tweens and timelines, sequence animations, add callbacks, and nest timelines. Additional sections cover easing functions, plugins, file sizes, learning resources, and people to follow for more information on GreenSock.

Uploaded by

cr33pz1lla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

GreenSock Cheat Sheet

TweenLite - TweenMax - TimelineLite - TimelineMax

TweenLite

TimelineLite

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


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

TimelineMax

// Create a variable
var $box = $('#box');

// Create a timeline
var tl = new TimelineLite();

// Create a timeline
var tl = new TimelineMax({options});

// Create a tween
var tween = TweenLite.to($box, 2, {
x: 100,
ease: Power1.easeInOut,
delay: 2,
onComplete: myFunction,
onCompleteParams: [element, 'param2']
});

// Sequence multiple tweens


tl.to($box, 1, {x:50,y:0})
.to($box, 1, {x:50,y:50})
.to($box, 1, {x:-50,y:50})
.to($box, 1, {x:-50,y:0});

// TimelineMax Options
delay: 2, // Number of seconds before animation start
paused: true/false, // Default value is false
repeat: 2, // Number of repeats or -1 for infinite loop
repeatDelay: 1, // Number of seconds between repeats
yoyo: true/false, // If true > A-B-B-A, if false > A-B-A-B
smoothChildTiming: true/false, // Controls child tweens and timelines
useFrames: true/false, // Set timing based on frames (default seconds)

// Default easing functions


ease: Power0.easeNone //no easing = Linear
ease: Power1, Power2, Power3, Power4, Back
Bounce, Circ, Elastic, Expo, Sine
.easeIn .easeOut .easeInOut
ease: RoughEase, SlowMo, SteppedEase
.ease.config()
// http://greensock.com/ease-visualizer
paused: true/false, // Pause Tween
delay: 2, // Amount of delay in seconds
immediateRender: true/false, // Prevent
immediate rendering when using set()
or from()-based methods (eg. fromTo)
// Callback functions
onComplete: // When tween has completed
onStart: // When tween begins
onUpdate: // On every frame of the tween
// From Tween
TweenLite.from(
element,
duration,
{fromVars}
);

// FromTo Tween
TweenLite.fromTo(
element,
duration,
{fromVars},
{toVars}
);

Created with by Petr Tichy, happy tweening! V2.0

// Add tween 0.7 seconds into the timeline


tl.to($box, 1, {scale: 0.5}, 0.7);
// Overlap tween with previous by 0.7 sec
tl.to($box, 1, {scale: 0.5}, '-=0.7');
// Offset/delay tween by 0.7 seconds
tl.to($box, 1, {scale: 0.5}, '+=0.7');
// Set tween without animating
tl.set($box, {scale: 0.5});
// Add Label 1 second into the timeline
tl.add('scaleBox', 1);
// Add tween to label position
tl.to($box, 1, {scale: 0.5}, 'scaleBox');
// Control timeline playback
tl.play(1.5); // Play from 1.5s
tl.play(-1); // Play 1s from end
tl.pause(); // Pause timeline
tl.resume(); // Continue playback
tl.seek(1.5); // Go to 1.5s or 'label'
tl.reverse(); // Reverse playback anytime
tl.timeScale(2); // Speed up timeline
tl.progress(0.5); // Skip to halfway
// staggerFrom, staggerTo, staggerFromTo
tl.staggerFrom($dots, 1, {
autoAlpha: 0
}, 0.1); // Stagger tween start by 0.1

// Callback function
var tl = new TimelineMax({
onStart: myFunc, // Run myFunc() when timeline starts
onStartScope: Object, // What 'this' refers to inside of myFunc
onStartParams: ['{self}', 'param2'] // {self} is timeline itself
});
// Available Callback functions
onStart, onStartScope, onStartParams, onComplete, onCompleteScope,
onCompleteParams, onUpdate, onUpdateScope, onUpdateParams,
onRepeat, onRepeatScope, onRepeatParams, onReverseComplete,
onReverseCompleteScope

GREENSOCK WORKSHOP
Learn How To Animate
Like A Pro With GreenSock!
GREENSOCKTUTORIALS.COM

https://www.ihatetomatoes.net/blog/

GreenSock Cheat Sheet

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


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

TweenLite - TweenMax - TimelineLite - TimelineMax

TweenLite

TweenMax

Changing
CSS Classes
TweenLite

// Inc. CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, EasePack,


DirectionalRotationPlugin, TweenLite, TimelineLite, and TimelineMax
var tween = TweenMax.to($box, 1, {
x: '-=50', // Tween to the current x value minus 50
y: '+=50', // Tween to the current y value plus 50
onComplete: myFunction,
ease:Back.easeOut
});
tl.add(tween, 2); // Add tween 2 seconds into the timeline

Plugins and FileTweenLite


Size
// Core files
TweenLite (9kb)
TimelineLite (4kb)
TimelineMax (6kb)
TweenMax (34kb)

TweenLite
Nesting
Timelines
// Create a main timeline
var mainTl = new TimelineMax({options});
// Create a function returning timeline
function getTimeline(){

// Extras
EasePack (2kb)
jquery.gsap.js (2kb)
Draggable (12kb)
// Plugins
css (15kb)
bezier (4kb)
kinetic (3kb)
directionalRotation (1kb)
attr (1kb)
text (1kb)
scrollTo (1kb)
raphael (3kb)
colorProps (1kb)
cssRule (1kb)
easel (3kb)
roundProps (1kb)
Version: 1.17.0
Updated 2015-05-28

// Create sub timeline


var timeline = new TimelineMax();
// Add tweens to sub timeline
timeline
.to(elem, 1, {vars});
return timeline;
}
// Make this all happen on page load
function init(){

// Add sub timeline to main timeline


mainTl
.add(getTimeline(), 'scene-intro');

init();

Created with by Petr Tichy, happy tweening! V2.0

// Remove class .loading from body


TweenLite.set($body, {className: '-=loading'});
// Add class .loading to body
TweenLite.set($body, {className: '+=loading'});
// Set only class .loading to body
TweenLite.set($body, {className: 'loading'});

TimelineMax

// Create a main timeline


var $box = $('.box'),

mainTl = new TimelineMax({options});

// Create a timeline for each box

$box.each(function(index, element){
var $box = $(this).find('.boxSmall'),

GreenSock
+ jQuery
TweenLite
// Scale box up/down on hover
$box.hover(
function() {
TweenLite.to($(this), 1, {scale:1.2});
},
function() {
TweenLite.to($(this), 1, {scale:1});
}
);
http://bit.ly/gsaphover
// Move box 100px to the right on click
$box.on('click', function(e){
TweenLite.to($(this), 0.3, {x:'+=100px'});
});
http://bit.ly/gsapclick
// Random value from a min/max range
var delay = getRandom(1, 2);
// Delay tween by a random number between 1 & 2
TweenLite.to($box, 1, {x:'80', delay: delay});
function getRandom(min, max) {
return min + Math.random() * (max - min);
}
http://bit.ly/gsapeach

Got a GSAP
Questions?
TweenLite
A:http://greensock.com/forums/ B:@ihatetomatoes

TweenLite
Each
Loop

boxTl = new TimelineMax();

// Add tweens to box timeline


boxTl

.to($box, 1, {vars});

// Add boxTl to mainTl


mainTl.add(boxTl);

});

TweenMax

http://bit.ly/gsapeach

TweenLite
Bonus Plugins
and Tools
// Bonus Plugins for Club Members Only
DrawSVGPlugin (3kb) - SIMPLY GREEN
physics2D (3kb) - SIMPLY GREEN
physicsProps (3kb) - SIMPLY GREEN
throwProps (10kb) - SHOCKINGLY GREEN
scrambleText (4kb) - SHOCKINGLY GREEN
SplitText (7kb) - SHOCKINGLY GREEN

TweenLite
Learning Resources
& People to Follow
http://greensock.com/get-started-js/
http://codepen.io/GreenSock/
http://codepen.io/chrisgannon/
http://codepen.io/sdras/
http://codepen.io/MAW/
https://www.youtube.com/ihatetomatoesblog
http://greensocktutorials.com/
https://www.nobledesktop.com/books/gsap
https://nobledesktop.com/classes/greensock
https://www.ihatetomatoes.net/blog/

You might also like