← Volver a la Lección

✨ Efectos Stagger de GSAP

Animaciones Stagger

Anima múltiples elementos con timing perfecto

1. Stagger Básico

Stagger simple con retraso fijo entre cada elemento

1
2
3
4
5
6
7
8
gsap.to('.item', {
  scale: 1,
  opacity: 1,
  duration: 0.6,
  stagger: 0.1  // 0.1s delay between each item
});

2. Opciones Avanzadas de Stagger

Controla la dirección, distribución y timing del stagger

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'
  }
});

Fondo Parallax

¡Desplázate para ver el fondo moverse y cambiar de color!

El patrón de textura ayuda a visualizar el efecto parallax

3. Stagger Basado en Grid

Perfecto para grids de tarjetas y 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
  }
});
💡 Conceptos Clave:
  • Stagger básico: Retraso fijo entre elementos (ej., 0.1s)
  • Amount: Tiempo total a distribuir entre todos los elementos
  • From: Dirección del stagger ('start', 'center', 'end', 'edges', 'random')
  • Grid: Stagger basado en posición de grid [filas, columnas]
  • Basado en función: Lógica personalizada para el retraso de cada elemento
  • Parallax: El fondo se mueve más lento que el scroll, creando profundidad