GSAP Stagger — Sequencing Animations Across Elements
In this tutorial, you will learn about GSAP Stagger. We cover key concepts, practical examples, and best practices to help you master this topic.
GSAP stagger animates groups of elements with configurable delay between each, enabling sequential, wave, and grid-based animation patterns.
What You'll Learn
By the end of this guide, you will use basic stagger with start offset, create grid stagger for 2D layouts, use stagger.from for directional sequencing, build ripple effects, and combine stagger with timelines.
Basic Stagger
gsap.to('.box', {
y: 100,
duration: 0.5,
stagger: 0.1
});
Grid Stagger
gsap.to('.box', {
scale: 0.5,
duration: 0.4,
stagger: {
grid: [5, 5],
from: 'center',
amount: 1.5
}
});
Directional Stagger
gsap.from('.box', {
y: 100,
opacity: 0,
duration: 0.6,
stagger: {
each: 0.08,
from: 'start'
}
});
Ripple Effect
gsap.to('.ripple', {
scale: 2,
opacity: 0,
duration: 0.8,
stagger: {
each: 0.05,
from: 'center',
ease: 'power2.out'
}
});
Common Mistakes
1. Not Accounting for Stagger in Total Duration
Total duration = duration + (n-1) * staggerDelay. Plan timeline positions accordingly.
2. Using Stagger on Single Element
Stagger has no effect on single-element selections. It only works with multiple targets.
3. Grid Stagger Without grid Parameter
Use stagger.grid: [cols, rows] to enable grid-based sequencing. Without it, elements stagger in DOM order.
4. Negative Stagger Causing Overlap
Negative stagger values make animations overlap. Only use negative if you want concurrent starts.
5. Stagger.from Not Working as Expected
from: 'edges' starts from both edges inward. from: 'end' starts from the last element.
Practice Questions
Q1: What is the difference between stagger and delay? A: delay applies to the whole tween. stagger offsets each target individually.
Q2: How do you create a wave effect? A: Use grid stagger with from: 'center' or from: 'edges'.
Q3: What does stagger.amount do? A: It sets the total stagger time across all elements, dividing it equally.
Q4: How do you stagger in reverse order? A: Use from: 'end' to start from the last element.
Q5: Can you stagger timeline children? A: Yes. timeline.to('.box', { ... }, 0) with stagger in the vars.
Challenge: Create a 5x5 grid of boxes that animate in a ripple from the center when clicked. Add a reset button.
FAQ
Try It Yourself
Create a staggered grid animation.
<!DOCTYPE html>
<html>
<head>
<title>GSAP Stagger Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12/gsap.min.js"></script>
<style>
.grid { display: grid; grid-template-columns: repeat(5, 60px); gap: 8px; }
.cell { width: 60px; height: 60px; background: #4ecdc4; border-radius: 6px; }
</style>
</head>
<body style="font-family:sans-serif;padding:20px;">
<h2>Grid Stagger</h2>
<button onclick="animateGrid()">Animate</button>
<button onclick="resetGrid()">Reset</button>
<div class="grid" id="grid">
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
<div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div><div class="cell"></div>
</div>
<script>
function animateGrid() {
gsap.to('.cell', {
scale: 0.3,
rotation: 360,
borderRadius: '50%',
duration: 0.6,
stagger: {
grid: [5, 5],
from: 'center',
amount: 1.2
},
ease: 'power2.inOut'
});
}
function resetGrid() {
gsap.set('.cell', {
scale: 1,
rotation: 0,
borderRadius: '6px',
clearProps: 'backgroundColor'
});
}
</script>
</body>
</html>
What's Next
Use keyframes for complex sequences.
Keyframes — Keyframe animations. Callbacks — Animation callbacks.
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro