GSAP 3 Cheat Sheet

Most code is linked to the appropriate page in the Docs

Links: Get started | Install | Forums | Tips | Learning | CodePen | Club

Basics Timelines Control methods

// "to" tween (animate to provided values) // Create a timeline // retain animation reference to control later
gsap.to(".selector", { // selector text, Array, or object let tl = gsap.timeline({ let anim = gsap.to(...); // or gsap.timeline(...);
x: 100, // any properties (not limited to CSS) delay: 0.5, // most methods can be used as getters or setters
backgroundColor: "red", // camelCase paused: true, // default is false anim.play() // plays forward
duration: 1, // seconds repeat: 2, // number of repeats (-1 for infinite) .pause()
delay: 0.5, repeatDelay: 1, // seconds between repeats .resume() // respects direction
ease: "power2.inOut", repeatRefresh: true, // invalidates on each repeat .reverse()
stagger: 0.1, // stagger start times yoyo: true, // if true > A-B-B-A, if false > A-B-A-B .restart()
paused: true, // default is false defaults: { // children inherit these defaults .timeScale(2) // 2 = double speed, 0.5 = half speed
overwrite: "auto", // default is false duration: 1, .seek(1.5) // jump to a time (in seconds) or label
repeat: 2, // number of repeats (-1 for infinite) ease: "none" .progress(0.5) // jump to halfway
repeatDelay: 1, // seconds between repeats }, .totalProgress(0.8) // includes repeats
repeatRefresh: true, // invalidates on each repeat smoothChildTiming: true, // when used as setter, returns animation (chaining)
yoyo: true, // if true > A-B-B-A, if false > A-B-A-B autoRemoveChildren: true,
yoyoEase: true, // or ease like "power2" onComplete: myFunc, // other useful methods (tween and timeline)
immediateRender: false, // other callbacks: .kill() // immediately destroy
onComplete: myFunc, // onStart, onUpdate, onRepeat, onReverseComplete .isActive() // true if currently animating
// other callbacks: // Each callback has a params property as well .then() // Promise
// onStart, onUpdate, onRepeat, onReverseComplete // i.e. onUpdateParams (Array) .invalidate() // clear recorded start/end values
// Each callback has a params property as well }); .eventCallback() // get/set an event callback
// i.e. onUpdateParams (Array)
}); // timeline-specific methods
// add label, tween, timeline, or callback
// Sequence multiple tweens
.add(thing, position)
tl.to(".selector", {duration: 1, x: 50, y: 0})
// calls function at given point
// "from" tween (animate from provided values) .to("#id", {autoAlpha: 0})
.call(func, params, position)
gsap.from(".selector", {fromVars}); .to(elem, {duration: 1, backgroundColor: "red"})
// get an Array of the timeline's children
.to([elem, elem2], {duration: 3, x: 100});
.getChildren()
// empties the timeline
// "fromTo" tween (define both start and end values) .clear()
gsap.fromTo(".selector", {fromVars}, {toVars}); // position parameter (controls placement) // animate playhead to a position linearly
// special properties (duration, ease, etc.) go in toVars tl.to(target, {toVars}, positionParameter); .tweenTo(timeOrLabel, {vars})
// ^^ with both start and end positions
0.7 // exactly 0.7 seconds into the timeline (absolute) .tweenFromTo(from, to, {vars})
"-=0.7" // overlap with previous by 0.7 sec
// set values immediately (no animation)
"myLabel" // insert at "myLabel" position
gsap.set(".selector", {toVars});
"myLabel+=0.2" // 0.2 seconds after "myLabel"
"<" // align with start of most recently-added child
"<0.2" // 0.2 seconds after ^^
"-=50%" // overlap half of inserting animation's duration
"<25%" // 25% into the previous animation (from its start)

Eases Installation Miscellaneous

// see greensock.com/ease-visualizer // Import and register GSAP (ES Modules) // Get the current value of a property
ease: "none" // no ease (same as "linear") import { gsap } from "gsap"; gsap.getProperty("#id", "x"); // 20
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; gsap.getProperty("#id", "x", "px"); // "20px"
// basic core eases gsap.registerPlugin(DrawSVGPlugin);
"power1", "power2", "power3", "power4",
"circ", "expo", "sine" // Import and register GSAP (UMD/CommonJS)
// Set GSAP's global tween defaults
// each has .in, .out, and .inOut extensions import { gsap } from "gsap/dist/gsap";
gsap.defaults({ease: "power2.in", duration: 1});
// i.e. "power1.inOut" import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin";
gsap.registerPlugin(DrawSVGPlugin);
// expressive core eases
"elastic", "back", "bounce", "steps(n)" // Configure GSAP's non-tween-related settings
gsap.config({
// in EasePack plugin (not core) autoSleep: 60,
"rough", "slow", "expoScale(1, 2)"

// members-only expressive plugins

Utility methods force3D: false,
nullTargetWarn: false,
trialWarn: false,
CustomEase, CustomWiggle, CustomBounce units: {left: "%", top: "%", rotation: "rad"}
// accessible through gsap.utils.foo()
});
checkPrefix() // get relevant browser prefix for property
clamp() // clamp value to range
distribute() // distribute value among and array
getUnit() // get unit of string // Register an effect for reuse
ScrollTrigger interpolate() // interpolate between values
mapRange() // map one range to another
gsap.registerEffect({
name: "fade",
normalize() // map a range to the 0-1 range effect: (targets, config) => {
scrollTrigger: { pipe() // sequence function calls return gsap.to(targets, {
trigger: ".selector", // selector or element random() // generates a random value duration: config.duration,
start: "top center", // [trigger] [scroller] positions selector() // get a scoped selector function opacity: 0
end: "20px 80%", // [trigger] [scroller] positions shuffle() // shuffles an array in-place });
// or relative amount: "+=500" snap() // snap a value to either increment or array },
scrub: true, // or time (in seconds) to catch up splitColor() // splits color into RGB array defaults: {duration: 2},
pin: true, // or selector or element to pin toArray() // convert array-like thing to array extendTimeline: true
markers: true, // only during development! unitize() // adds specified unit to function results });
toggleActions: "play pause resume reset", wrap() // place number in range, wrapping to start
// other actions: complete reverse none wrapYoyo() // place number in range, wrapping in reverse // Now we can use it like this
toggleClass: "active", gsap.effects.fade(".box");
fastScrollEnd: true, // or velocity number // Or directly on timelines
containerAnimation: tween, // linear animation tl.fade(".box", {duration: 3})
id: "my-id",
anticipatePin: 1, // may help avoid jump
snap: {
snapTo: 1 / 10, // progress increment
Nesting Timelines // Add listener
gsap.ticker.add(myFunction);
// or "labels" or function or Array
function scene1() { function myFunction(time, deltaTime, frame) {
duration: 0.5,
let tl = gsap.timeline(); // Executes on every tick after
directional: true,
tl.to(...).to(...); // build scene 1 // the core engine updates
ease: "power3",
return tl; }
onComplete: callback,
} // To remove the listener later...
// other callbacks: onStart, onInterrupt
gsap.ticker.remove(myFunction);
},
function scene2() {
pinReparent: true, // moves to documentElement during pin
let tl = gsap.timeline();
pinSpacing: false,
tl.to(...).to(...); // build scene 2
pinType: "transform" // or "fixed" // faster way to repeatedly set property than .set()
return tl;
pinnedContainer: ".selector", const setX = gsap.quickSetter("#id", "x", "px");
}
preventOverlaps: true, // or arbitrary string document.addEventListener("pointermove", e => setX(e.clientX) );
once: true,
let master = gsap.timeline()
endTrigger: ".selector", // selector or element
.add(scene1())
horizontal: true, // switches mode
.add(scene2(), "-=0.5") // overlap slightly
invalidateOnRefresh: true, // clears start values on refresh
refreshPriority: 1, // influence refresh order
onEnter: callback
// other callbacks:
// onLeave, onEnterBack, onLeaveBack, onUpdate,
// onToggle, onRefresh, onRefreshInit, onScrubComplete
}

Other Plugins
// Register GSAP plugins (once) before using them
gsap.registerPlugin(Draggable, TextPlugin);

// Available plugins
Draggable, DrawSVGPlugin*, EaselPlugin, Flip,
GSDevTools*, InertiaPlugin*, MorphSVGPlugin*,
MotionPathPlugin, MotionPathHelper*, Physics2DPlugin*,
PhysicsPropsPlugin*, PixiPlugin, ScrambleTextPlugin*,
ScrollToPlugin, ScrollTrigger, SplitText*, TextPlugin
// * available to Club GreenSock members. greensock.com/club

For an all access pass to premium content - JOIN CLUB GREENSOCK