GSAP Cheatsheet

Tweens (to, from, fromTo)

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

gsap.to()

Animates from current state → to the values you specify.

// Signature: gsap.to(target, vars)
gsap.to(".box", {
  x: 200,          // transform: translateX(200px)
  opacity: 0,
  duration: 1,     // seconds (default: 0.5)
  ease: "power2.out",
  delay: 0.2,
});

// Multiple targets at once
gsap.to([".card", ".title"], { y: -20, opacity: 0, duration: 0.4 });

// Returns a Tween instance
const tween = gsap.to(".box", { rotation: 360, duration: 2 });
tween.pause();

gsap.from()

Animates from the values you specify → to current state (reverse of .to()).

// Element slides in from y:60, fading in from opacity 0 to its current opacity
gsap.from(".hero", {
  y: 60,
  opacity: 0,
  duration: 0.8,
  ease: "power3.out",
});

// "from" values are the START, element ends at its CSS/natural state
gsap.from(".nav li", {
  x: -30,
  opacity: 0,
  stagger: 0.08,
  duration: 0.5,
});

Gotcha: .from() sets the property immediately on creation then animates toward the current value. If the current value is also animating, use .fromTo() for deterministic results.

gsap.fromTo()

Explicitly defines both start and end — the safest option when composing complex sequences.

// Signature: gsap.fromTo(target, fromVars, toVars)
gsap.fromTo(
  ".box",
  { x: -100, opacity: 0 },     // FROM
  { x: 0,    opacity: 1, duration: 0.6, ease: "power2.out" } // TO
);

duration, ease, delay, onComplete, etc. always go in toVars (the second object), never in fromVars.

gsap.set()

Sets properties instantly with no animation. A zero-duration tween.

gsap.set(".box", { x: 100, opacity: 0.5, display: "flex" });
gsap.set([".a", ".b"], { clearProps: "all" }); // remove inline styles

Core Tween Properties (vars)

Property	Type	Default	Description
`duration`	number	`0.5`	Seconds for the tween
`delay`	number	`0`	Seconds before the tween starts
`ease`	string / function	`"power1.out"`	Easing function
`repeat`	number	`0`	Extra repeats; `-1` = infinite
`repeatDelay`	number	`0`	Seconds between repeats
`yoyo`	boolean	`false`	Reverse every other repeat
`yoyoEase`	string / boolean	`false`	Different ease on reverse leg
`stagger`	number / object	`0`	Delay between multiple targets
`paused`	boolean	`false`	Don't play on creation
`reversed`	boolean	`false`	Start playing in reverse
`immediateRender`	boolean	varies	Apply `from` values instantly
`overwrite`	string / boolean	`false`	Kill conflicting tweens
`id`	string	—	For `gsap.getById()`
`data`	any	—	Arbitrary metadata; accessible in callbacks
`inherit`	boolean	`true`	Inherit defaults from `gsap.defaults()`

Overwrite Modes

Value	Behavior
`false` (default)	No overwriting — tweens stack
`true` / `"all"`	Kill ALL tweens on the target
`"auto"`	Kill only conflicting properties on the target (smart mode)

gsap.to(".box", { x: 200, overwrite: "auto" });
// only kills other tweens that are also animating "x" on .box

// Set globally to avoid fighting tweens
gsap.defaults({ overwrite: "auto" });

immediateRender

Controls when from / fromTo values are applied.

// Default behavior: from() sets values immediately on creation (before play)
gsap.from(".box", { x: -100 }); // x snaps to -100 right now

// Delay the snap (useful inside timelines)
gsap.from(".box", { x: -100, immediateRender: false });

// to() does NOT immediateRender by default (reads live value at play time)
gsap.to(".box", { x: 200, immediateRender: true }); // snapshot x now

Relative, Percentage, and Unit Values

// Relative (+=, -=, *=)
gsap.to(".box", { x: "+=100" });        // add 100 to current x
gsap.to(".box", { rotation: "-=45" });  // subtract 45deg

// Percentage of element's own dimensions (requires GSAP 3.x)
gsap.to(".box", { x: "50%", y: "25%" }); // % of element width/height

// Explicit units
gsap.to(".box", { width: "50vw", fontSize: "2rem", top: "10%" });

// Random value
gsap.to(".box", { x: "random(-100, 100)" });       // random between -100 and 100
gsap.to(".box", { x: gsap.utils.random(-200, 200) });

Function-Based Values

Pass a function instead of a value — called once per target with (index, target, targets).

gsap.to(".box", {
  x: (i) => (i + 1) * 100,          // box0 → 100, box1 → 200, …
  y: (i, el) => el.dataset.y,       // read from data attribute
  duration: (i) => 0.3 + i * 0.1,  // stagger duration without stagger prop
});

Chaining Shorthand (tween methods)

// Most tween control methods return the tween for chaining
gsap.to(".box", { x: 200 })
    .pause(0)
    .delay(0.5);

// Common tween instance methods
const tween = gsap.to(".box", { y: 100, paused: true });
tween.play();
tween.pause();
tween.reverse();
tween.restart();
tween.seek(0.5);       // jump to 0.5 seconds
tween.progress(0.75);  // jump to 75% of the tween
tween.kill();

gsap.getById() and gsap.getTweensOf()

// Get a specific tween by id
const t = gsap.to(".box", { x: 100, id: "myMove" });
gsap.getById("myMove").pause();

// Get all active tweens targeting an element
const tweens = gsap.getTweensOf(".box");
tweens.forEach(t => t.kill());

// Get all active tweens (all targets)
const all = gsap.globalTimeline.getChildren(true, true, false);

gsap.killTweensOf()

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

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

// Kill after a delay using ticker
gsap.delayedCall(2, () => gsap.killTweensOf(".box"));

gsap.delayedCall()

A timed callback — cleaner than setTimeout because it respects GSAP's timeScale and pause.

const dc = gsap.delayedCall(2, myFunction, ["arg1", "arg2"]);

dc.kill();     // cancel
dc.restart();  // reset and replay
dc.pause();    // freeze the countdown