GSAP Cheatsheet

Control Methods

Use this GSAP reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

Tween & Timeline Instance Methods

All methods below apply to both Tween and Timeline instances unless noted.

Playback

Method	Description
`.play(from?)`	Play forward from current position (or from `from` seconds/label)
`.pause(atTime?)`	Pause (optionally seek first)
`.resume()`	Resume from paused position
`.reverse(from?)`	Play backward (from `from` or current position)
`.restart(includeDelay?, suppressEvents?)`	Reset to start and play
`.kill()`	Destroy and free memory — cannot be restarted
`.invalidate()`	Flush cached start values; forces re-read on next render

const tween = gsap.to(".box", { x: 200, duration: 1, paused: true });

tween.play();
tween.pause();
tween.resume();
tween.reverse();
tween.restart();

// Play from a specific time
tween.play(0.5);      // from 0.5s
tween.reverse(1);     // reverse from 1s

Seeking

tween.seek(0.5);            // jump to 0.5s (no play-state change)
tween.seek("myLabel");      // timelines: jump to label

tween.time();               // get current time (seconds)
tween.time(0.75);           // set current time

tween.progress();           // get progress 0–1
tween.progress(0.5);        // jump to 50%

tween.totalTime();          // time including repeats
tween.totalProgress();      // 0–1 across all repeats

Duration & Speed

tween.duration();           // get duration (excludes repeats)
tween.duration(2);          // set duration (scales all child timings for timelines)
tween.totalDuration();      // duration × (repeat + 1) + repeatDelay × repeat

tween.timeScale();          // get speed multiplier (1 = normal)
tween.timeScale(2);         // 2× speed
tween.timeScale(0.5);       // half speed
tween.timeScale(0);         // effectively pauses (but keeps the instance alive)

// Chain timeScale to a tween itself (animate the speed change)
gsap.to(tween, { timeScale: 0, duration: 0.5 }); // slow down over 0.5s

State Inspection

tween.isActive();           // true while playing
tween.paused();             // true if paused
tween.paused(true);         // set paused state
tween.reversed();           // true if playing in reverse
tween.reversed(true);       // set reversed state
tween.iteration();          // current repeat iteration (0-based)

Global Control (gsap namespace)

// Pause / resume ALL animations globally
gsap.globalTimeline.pause();
gsap.globalTimeline.resume();

// Time scale everything (slow motion across the app)
gsap.globalTimeline.timeScale(0.2);
gsap.globalTimeline.timeScale(1);   // reset

// Kill ALL animations
gsap.globalTimeline.kill();

Kill Helpers

// Kill all tweens on a target
gsap.killTweensOf(".box");

// Kill only specific properties
gsap.killTweensOf(".box", "x,opacity");

// Kill a named tween
const t = gsap.to(".box", { x: 100, id: "slide" });
gsap.getById("slide").kill();

// Kill all tweens on all targets
gsap.globalTimeline.clear();

Paused Tweens & Playing on Event

// Create paused, play on hover
const hoverTween = gsap.to(".card", {
  y: -10,
  boxShadow: "0 20px 40px rgba(0,0,0,0.2)",
  duration: 0.3,
  paused: true,
  ease: "power2.out",
});

card.addEventListener("mouseenter", () => hoverTween.play());
card.addEventListener("mouseleave", () => hoverTween.reverse());

timeScale — speed ramping

const tl = gsap.timeline();
tl.to(".a", { x: 300 }).to(".b", { y: 100 });

// Slow down the timeline over time
gsap.to(tl, { timeScale: 0.1, duration: 2, ease: "power1.in" });

// Speed burst on click
button.addEventListener("click", () => {
  tl.timeScale(4);
  gsap.delayedCall(1, () => tl.timeScale(1)); // back to normal after 1s
});

Toggling Play / Pause

function togglePlay(tween) {
  tween.paused() ? tween.play() : tween.pause();
}

// Or using the paused setter
button.addEventListener("click", () => {
  tl.paused(!tl.paused());
});

invalidate()

Resets cached starting values so GSAP re-reads the live DOM on next play. Essential after layout shifts.

const tween = gsap.from(".box", { x: -100 });
// Element moved in the DOM...
tween.invalidate().restart(); // re-reads x from new position

Chaining Control with gsap.utils.pipe()

// Not tween chaining — data pipeline utility
const clampAndSnap = gsap.utils.pipe(
  gsap.utils.clamp(0, 100),
  gsap.utils.snap(10),
);
console.log(clampAndSnap(73)); // → 70

clearProps

Removes inline styles GSAP applied — restore to CSS cascade.

// On completion
gsap.to(".box", {
  x: 200,
  duration: 1,
  onComplete: () => gsap.set(".box", { clearProps: "transform" }),
});

// Mid-tween via set
gsap.set(".box", { clearProps: "all" });          // remove everything
gsap.set(".box", { clearProps: "x,y,opacity" });  // selective

gsap.exportRoot() — export the global timeline

Exports the global timeline as a standalone timeline (useful for pausing everything except new tweens).

const exportedRoot = gsap.exportRoot();
exportedRoot.pause(); // freeze all existing tweens

// Any new tweens (e.g., a loading overlay) play normally
gsap.to(".overlay", { opacity: 1 }); // not affected

Controlling Nested Timeline Children

const tl = gsap.timeline();
tl.to(".a", { x: 100 }).to(".b", { y: 50 }).to(".c", { scale: 2 });

// Get all child tweens
const children = tl.getChildren();    // [TweenA, TweenB, TweenC]

// Pause individual child
children[1].timeScale(0.5);

// Kill a child
children[0].kill();

// Seek the parent to rebuild
tl.seek(0);