GSAP 3 Cheat Sheet
@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
::selection {
background-color: #88ce04;
color: white;
}
body {
background: #111;
color: white;
font-family: "Signika Negative", sans-serif;
font-size: 19px;
line-height: 1.4;
font-weight: 300;
margin: 0;
text-align: center;
}
body > * {
text-align: left;
}
a {
font-weight: 400;
color: #88ce02;
text-decoration: none;
}
a:hover,
a:hover .ipsPager_type {
color: #a7ff00;
text-decoration: underline;
}
.pdf-icon {
width: 32px;
vertical-align: bottom;
display: inline-block;
margin-bottom: 12px;
}
.ipsCode {
background: #fafafa;
padding: 15px !important;
border: 0 !important;
border-left: 4px solid #5e9815 !important;
clear: both;
direction: ltr;
word-wrap: normal;
}
.prettyprint {
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
font-size: 15px;
font-weight: normal;
border: none;
line-height: 18px;
margin: 0 0 15px;
background: #262626;
border-radius: 6px;
color: #ccc;
padding: 12px 18px;
}
.prettyprint .str {
color: #EC7600
}
.prettyprint .kwd {
color: #93C763
}
.prettyprint .com {
color: #999999
}
.prettyprint .typ {
color: #72a5d8
}
.prettyprint .lit {
color: #FACD22
}
.prettyprint .pun {
color: #F1F2F3
}
.prettyprint .pln {
color: #F1F2F3
}
.prettyprint .tag {
color: #8AC763
}
.prettyprint .atn {
color: #E0E2E4
}
.prettyprint .atv {
color: #EC7600
}
.prettyprint .dec {
color: purple
}
.prettyprint ol,
.prettyprint ul {
margin: 0px;
padding: 0px;
margin-left: 40px
}
.prettyprint ol li,
.prettyprint ul li {
margin: 0px;
padding: 0px
}
.prettyprint ol.linenums {
margin-top: 0;
margin-bottom: 0
}
.prettyprint li.L0,
.prettyprint li.L1,
.prettyprint li.L2,
.prettyprint li.L3,
.prettyprint li.L4,
.prettyprint li.L5,
.prettyprint li.L6,
.prettyprint li.L7,
.prettyprint li.L8,
.prettyprint li.L9 {
color: #777;
list-style-type: decimal;
padding-left: 20px;
padding-right: 20px;
margin-left: -40px
}
.prettyprint li.L1,
.prettyprint li.L3,
.prettyprint li.L5,
.prettyprint li.L7,
.prettyprint li.L9 {
background: #2a2a2a
}
.prettyprint.wrap {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word
}
.prettyprint.linenums {
padding: 12px 0px;
margin: 0 0 0 25px
}
.post_wrap .prettyprint {
margin: 10px 0;
}
.prettyprint .pln {
font-size: 15px;
}
.flexRow {
display: flex;
}
.flexRow > * {
flex-grow: 1;
}
.flexRow > *:not(:last-child) {
margin-right: 15px;
}
.cheat-header.cDarkContent {
display: inline-block;
padding-left: 144px;
min-height: 146px;
position: relative;
}
.cheat-header h1 {
font-size: 3rem;
margin: 0;
font-weight: 400;
}
.cheat-header .logo {
position: absolute;
top: 10px;
left: 20px;
width: 112px;
}
.cheat-header ul {
margin: 0;
display: inline-block;
vertical-align: top;
padding-left: 0;
margin-right: 20px;
}
.cheat-header li {
list-style: none;
}
.cheat-header ul:first-child {
padding-left: 0;
}
.cheat-header .pipe {
color: #777;
}
.cheat-header .cheat-container {
display: block;
}
pre.prettyprint {
margin-bottom: 10px;
}
.cheat-container {
padding: 10px;
display: flex;
}
.cheat-container > * {
flex-grow: 1;
}
.cheat-container > *:not(:last-child) {
margin-right: 10px;
}
.cheat-container h2 {
text-align: left;
color: white;
font-weight: 300;
font-size: 2em;
margin-top: 0;
margin-bottom: 4px;
}
.cheat-content a:hover {
color: white;
}
.cheat-content .ipsCode a:hover {
color: #88ce02;
}
footer p {
margin: 0 auto 2em;
text-align: center;
}
footer img {
vertical-align: middle;
width: 100px;
margin-left: 15px;
}
@media (max-width: 1659px), print {
.cheat-content {
display: flex;
max-width: 100vw;
flex-wrap: wrap;
}
.cheat-content > * {
flex-grow: 1;
}
.cheat-container {
display: contents;
}
.cheat-container:not(:first-child) h2 {
margin-top: 3rem;
}
.cheat-container > * {
padding: 10px;
}
.cheat-header > .cheat-container > * {
padding: 0;
}
.cheat-container > *:not(:last-child) {
margin-right: 0;
}
}
@media (max-width: 648px) {
.cheat-header .logo {
position: static;
display: block;
margin: 0 auto;
}
.cheat-header.cDarkContent {
padding-left: 10px;
}
.column {
max-width: calc(100% - 20px);
}
.cheat-container pre {
overflow: auto;
}
}
GSAP 3 Cheat Sheet .cls-1,.cls-3{fill:#111;}.cls-1{stroke:#999;stroke-linecap:round;stroke-linejoin:round;stroke-width:6px;}.cls-2{fill:#88ce02;}
Most code is linked to the appropriate page in the Docs
Links: Get started | Install | Forums | Tips | Learning | CodePen | Club
Basics
// "to" tween (animate to provided values) gsap.to(".selector", { // selector text, Array, or object x: 100, // any properties (not limited to CSS) backgroundColor: "red", // camelCase duration: 1, // seconds delay: 0.5, ease: "power2.inOut", stagger: 0.1, // stagger start times paused: true, // default is false overwrite: "auto", // default is false repeat: 2, // number of repeats (-1 for infinite) repeatDelay: 1, // seconds between repeats repeatRefresh: true, // invalidates on each repeat yoyo: true, // if true > A-B-B-A, if false > A-B-A-B yoyoEase: true, // or ease like "power2" immediateRender: false, onComplete: myFunc, // other callbacks: // onStart, onUpdate, onRepeat, onReverseComplete // Each callback has a params property as well // i.e. onUpdateParams (Array) });
// "from" tween (animate from provided values) gsap.from(".selector", {fromVars});
// "fromTo" tween (define both start and end values) gsap.fromTo(".selector", {fromVars}, {toVars}); // special properties (duration, ease, etc.) go in toVars
// set values immediately (no animation) gsap.set(".selector", {toVars});
Timelines
// Create a timeline let tl = gsap.timeline({ delay: 0.5, paused: true, // default is false repeat: 2, // number of repeats (-1 for infinite) repeatDelay: 1, // seconds between repeats repeatRefresh: true, // invalidates on each repeat yoyo: true, // if true > A-B-B-A, if false > A-B-A-B defaults: { // children inherit these defaults duration: 1, ease: "none" }, smoothChildTiming: true, autoRemoveChildren: true, onComplete: myFunc, // other callbacks: // onStart, onUpdate, onRepeat, onReverseComplete // Each callback has a params property as well // i.e. onUpdateParams (Array) });
// Sequence multiple tweens tl.to(".selector", {duration: 1, x: 50, y: 0}) .to("#id", {autoAlpha: 0}) .to(elem, {duration: 1, backgroundColor: "red"}) .to([elem, elem2], {duration: 3, x: 100});
// position parameter (controls placement) tl.to(target, {toVars}, positionParameter); 0.7 // exactly 0.7 seconds into the timeline (absolute) "-=0.7" // overlap with previous by 0.7 sec "myLabel" // insert at "myLabel" position "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)
Control methods
// retain animation reference to control later let anim = gsap.to(...); // or gsap.timeline(...); // most methods can be used as getters or setters anim.play() // plays forward .pause() .resume() // respects direction .reverse() .restart() .timeScale(2) // 2 = double speed, 0.5 = half speed .seek(1.5) // jump to a time (in seconds) or label .progress(0.5) // jump to halfway .totalProgress(0.8) // includes repeats // when used as setter, returns animation (chaining) // other useful methods (tween and timeline) .kill() // immediately destroy .isActive() // true if currently animating .then() // Promise .invalidate() // clear recorded start/end values .eventCallback() // get/set an event callback // timeline-specific methods // add label, tween, timeline, or callback .add(thing, position) // calls function at given point .call(func, params, position) // get an Array of the timeline's children .getChildren() // empties the timeline .clear() // animate playhead to a position linearly .tweenTo(timeOrLabel, {vars}) // ^^ with both start and end positions .tweenFromTo(from, to, {vars})
Eases
// see greensock.com/ease-visualizer ease: "none" // no ease (same as "linear") // basic core eases "power1", "power2", "power3", "power4", "circ", "expo", "sine" // each has .in, .out, and .inOut extensions // i.e. "power1.inOut" // expressive core eases "elastic", "back", "bounce", "steps(n)" // in EasePack plugin (not core) "rough", "slow", "expoScale(1, 2)" // members-only expressive plugins CustomEase, CustomWiggle, CustomBounce
ScrollTrigger
scrollTrigger: { trigger: ".selector", // selector or element start: "top center", // [trigger] [scroller] positions end: "20px 80%", // [trigger] [scroller] positions // or relative amount: "+=500" scrub: true, // or time (in seconds) to catch up pin: true, // or selector or element to pin markers: true, // only during development! toggleActions: "play pause resume reset", // other actions: complete reverse none toggleClass: "active", fastScrollEnd: true, // or velocity number containerAnimation: tween, // linear animation id: "my-id", anticipatePin: 1, // may help avoid jump snap: { snapTo: 1 / 10, // progress increment // or "labels" or function or Array duration: 0.5, directional: true, ease: "power3", onComplete: callback, // other callbacks: onStart, onInterrupt }, pinReparent: true, // moves to documentElement during pin pinSpacing: false, pinType: "transform" // or "fixed" pinnedContainer: ".selector", preventOverlaps: true, // or arbitrary string once: true, endTrigger: ".selector", // selector or element horizontal: true, // switches mode 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 GSAP members. greensock.com/club
Installation
// Import and register GSAP (ES Modules) import { gsap } from "gsap"; import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; gsap.registerPlugin(DrawSVGPlugin); // Import and register GSAP (UMD/CommonJS) import { gsap } from "gsap/dist/gsap"; import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin"; gsap.registerPlugin(DrawSVGPlugin);
Utility methods
// 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 interpolate() // interpolate between values mapRange() // map one range to another normalize() // map a range to the 0-1 range pipe() // sequence function calls random() // generates a random value selector() // get a scoped selector function shuffle() // shuffles an array in-place snap() // snap a value to either increment or array splitColor() // splits color into RGB array toArray() // convert array-like thing to array unitize() // adds specified unit to function results wrap() // place number in range, wrapping to start wrapYoyo() // place number in range, wrapping in reverse
Nesting Timelines
function scene1() { let tl = gsap.timeline(); tl.to(...).to(...); // build scene 1 return tl; } function scene2() { let tl = gsap.timeline(); tl.to(...).to(...); // build scene 2 return tl; } let master = gsap.timeline() .add(scene1()) .add(scene2(), "-=0.5") // overlap slightly
Miscellaneous
// Get the current value of a property gsap.getProperty("#id", "x"); // 20 gsap.getProperty("#id", "x", "px"); // "20px"
// Set GSAP's global tween defaults gsap.defaults({ease: "power2.in", duration: 1});
// Configure GSAP's non-tween-related settings gsap.config({ autoSleep: 60, force3D: false, nullTargetWarn: false, trialWarn: false, units: {left: "%", top: "%", rotation: "rad"} });
// Register an effect for reuse gsap.registerEffect({ name: "fade", effect: (targets, config) => { return gsap.to(targets, { duration: config.duration, opacity: 0 }); }, defaults: {duration: 2}, extendTimeline: true }); // Now we can use it like this gsap.effects.fade(".box"); // Or directly on timelines tl.fade(".box", {duration: 3})
// Add listener gsap.ticker.add(myFunction); function myFunction(time, deltaTime, frame) { // Executes on every tick after // the core engine updates } // To remove the listener later... gsap.ticker.remove(myFunction);
// faster way to repeatedly set property than .set() const setX = gsap.quickSetter("#id", "x", "px"); document.addEventListener("pointermove", e => setX(e.clientX) );
For an all access pass to premium content - JOIN CLUB GSAP
