GSAP Stagger Effects | Web Animations

1. Basic Stagger

Simple stagger with fixed delay between each element

gsap.to('.item', {
  scale: 1,
  opacity: 1,
  duration: 0.6,
  stagger: 0.1  // 0.1s delay between each item
});

2. Advanced Stagger Options

Control stagger direction, distribution, and timing

Card 1

Stagger from center with custom timing

Card 2

Distributed evenly across total duration

Card 3

Grid-based staggering for layouts

Card 4

Custom easing per element

Card 5

Function-based control

Card 6

Random stagger timing

gsap.to('.card', {
  y: 0,
  opacity: 1,
  duration: 0.6,
  stagger: {
    amount: 1.5,        // Total stagger time
    from: 'center',    // 'start', 'center', 'end', 'edges', 'random'
    grid: [3, 2],      // For grid layouts [rows, cols]
    ease: 'power2.out'
  }
});

Parallax Background

Scroll to see the background move and change color!

The texture pattern helps visualize the parallax effect

3. Grid-Based Stagger

Perfect for card grids and layouts

1

Top Left

2

Top Center

3

Top Right

4

Middle Left

5

Middle Center

6

Middle Right

gsap.to('.card', {
  scale: 1,
  opacity: 1,
  duration: 0.5,
  stagger: {
    grid: [2, 3],  // 2 rows, 3 columns
    from: 'center',
    amount: 1
  }
});

💡 Key Concepts:

Basic stagger: Fixed delay between elements (e.g., 0.1s)
Amount: Total time to distribute across all elements
From: Direction of stagger ('start', 'center', 'end', 'edges', 'random')
Grid: Stagger based on grid position [rows, cols]
Function-based: Custom logic for each element's delay
Parallax: Background moves slower than scroll, creating depth

✨ GSAP Stagger Effects

Stagger Animations