Hack University
← All cheatsheets
GSAP
Stagger

GSAP Cheatsheet

Stagger

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

Basic Stagger

stagger delays the start of each tween when a target resolves to multiple elements.

// Number: delay between each element (seconds)
gsap.from(".card", { opacity: 0, y: 30, stagger: 0.1 });

// Applied to timeline children too
const tl = gsap.timeline();
tl.from(".item", { x: -50, stagger: 0.08, duration: 0.5 });

Stagger Object

Full control via an object — all properties are optional.

gsap.from(".dot", {
  opacity: 0,
  stagger: {
    amount: 1,          // total time to stagger across ALL elements (vs. per-element gap)
    each: 0.1,          // per-element gap (use either amount OR each, not both)
    from: "start",      // where stagger originates (see table below)
    ease: "power2.inOut", // ease the stagger distribution itself
    repeat: 2,          // repeat each individual tween
    yoyo: true,
    grid: "auto",       // for 2D grid layouts (see Grid Stagger)
    axis: "y",          // grid axis (x or y)
  },
  duration: 0.5,
});

Stagger from Values

from valueMeaning
"start" (default)First element first
"end"Last element first
"center"Middle element first, ripples outward
"edges"Outer elements first, ripples inward
"random"Random order each time
0–1Progress value within the array (0 = start, 0.5 = center, 1 = end)
index numberSpecific index is first, ripples out from there
[col, row]For grids: origin cell (e.g., [2, 3])
gsap.from(".dot", { opacity: 0, stagger: { each: 0.1, from: "center" } });
gsap.from(".dot", { opacity: 0, stagger: { each: 0.1, from: "random" } });
gsap.from(".dot", { opacity: 0, stagger: { each: 0.1, from: 0.75 } }); // 75% in

amount vs. each

const elements = document.querySelectorAll(".box"); // say 10 elements

// "each" = gap between consecutive elements
// 10 elements × 0.1s = last element starts at 0.9s
gsap.from(elements, { y: 40, stagger: { each: 0.1 } });

// "amount" = total spread across all elements
// 10 elements, 1s amount → each gap = 0.111s (1/(10-1))
gsap.from(elements, { y: 40, stagger: { amount: 1 } });

Grid Stagger

For elements laid out in a 2D grid (CSS Grid, flex-wrap, etc.).

// "auto" — GSAP measures element positions to determine grid dimensions
gsap.from(".cell", {
  scale: 0,
  opacity: 0,
  stagger: {
    grid: "auto",       // auto-detect rows/cols from DOM positions
    from: "center",
    each: 0.05,
  },
  duration: 0.4,
  ease: "back.out",
});

// Manual grid dimensions [rows, cols]
gsap.from(".cell", {
  opacity: 0,
  stagger: {
    grid: [5, 10],       // 5 rows, 10 columns
    from: "center",
    each: 0.04,
    axis: "y",           // only stagger along rows (ignore column distance)
  },
});

axis: "x" staggers only by column, axis: "y" only by row, omitting axis staggers by 2D distance from origin.

Stagger Ease

The ease property inside the stagger object eases the distribution of start times — it does not affect the individual tween's ease.

gsap.from(".bar", {
  scaleY: 0,
  stagger: {
    each: 0.05,
    ease: "power2.inOut", // start times bunch up at center, spread at edges
  },
  ease: "back.out",       // individual bar ease
  duration: 0.6,
});

Function-Based Stagger (complete control)

Pass a function for stagger — called per element, returns the delay in seconds.

gsap.from(".box", {
  opacity: 0,
  stagger: (index, target, targets) => {
    // return delay in seconds for this element
    return index * 0.1 + Math.random() * 0.05;
  },
});

// Distance-based custom stagger
const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
gsap.from(".dot", {
  opacity: 0,
  stagger: (index, target) => {
    const rect = target.getBoundingClientRect();
    const dx = rect.left - center.x;
    const dy = rect.top  - center.y;
    return Math.sqrt(dx * dx + dy * dy) / 1000; // distance → seconds
  },
});

Stagger inside Timelines

const tl = gsap.timeline();

tl.from(".item", {
  x: -100,
  opacity: 0,
  duration: 0.5,
  stagger: {
    each: 0.1,
    from: "start",
  },
})
.to(".item", {
  x: 200,
  stagger: 0.08,       // shorthand: same as { each: 0.08 }
}, "+=0.2");

Stagger with Repeat & Yoyo

gsap.from(".star", {
  scale: 0,
  rotation: -90,
  stagger: {
    each: 0.1,
    from: "random",
    repeat: -1,   // each individual tween loops
    yoyo: true,
  },
  duration: 0.6,
  ease: "back.out(2)",
});

Common Patterns

Cascade reveal

gsap.from(".section h2, .section p, .section .btn", {
  y: 24,
  opacity: 0,
  stagger: 0.12,
  duration: 0.6,
  ease: "power2.out",
  scrollTrigger: ".section",
});

Wave effect (sine offset)

gsap.to(".wave-bar", {
  scaleY: 2,
  repeat: -1,
  yoyo: true,
  ease: "sine.inOut",
  stagger: {
    each: 0.1,
    from: "start",
  },
  duration: 0.5,
});

Ripple from click point

container.addEventListener("click", (e) => {
  const origin = { x: e.clientX, y: e.clientY };
  gsap.from(".dot", {
    scale: 0,
    opacity: 0,
    stagger: (i, el) => {
      const r = el.getBoundingClientRect();
      const dx = r.left + r.width  / 2 - origin.x;
      const dy = r.top  + r.height / 2 - origin.y;
      return Math.sqrt(dx * dx + dy * dy) / 800;
    },
    duration: 0.4,
    ease: "power2.out",
  });
});