Stagger en los hijos

Stagger toma una única animación de entrada definida en un elemento padre y la reproduce en cada hijo directo, uno tras otro, con un pequeño retraso entre ellos — el clásico efecto de "las tarjetas aparecen una tras otra". No animes cada hijo a mano: pon la animación y Stagger en el padre.

Míralo en acción: Stagger en fancyanimations.com.

Qué ocurre

1. Si el propio padre tiene una animación de entrada, esa misma animación (misma duración, punto de disparo, referencia de "totalmente visible", comportamiento de reinicio, elastic easing, ajustes de tablet/móvil y el estado de loop/"solo una vez") se copia en cada hijo directo que todavía no tenga una animación propia. Las clases de retraso no se copian.
2. El propio padre se convierte en un contenedor simple y siempre visible: se le fija opacity: 1 y no se anima.
3. A cada hijo directo con una animación (ya sea copiada o propia) se le asigna un retraso calculado: el retraso base, más su posición en la fila multiplicada por el paso.
4. Cada hijo solo empieza una vez que él mismo, individualmente, alcanza el punto de disparo — el retraso de stagger se añade encima de eso, no en su lugar.
5. Si el padre no tiene una animación propia, los hijos conservan la animación que ya tuvieran, y Stagger solo escalona sus retrasos.

Ajustes (en el padre)

Ajuste	Efecto
Stagger children	Lo activa (obligatorio)
Step	El retraso añadido entre cada hijo consecutivo. Por defecto 0.3s
Start	Un retraso extra antes del primer hijo. Por defecto 0
Reverse	Anima primero al último hijo
Columns — desktop / tablet / small tablet / mobile	Cuántas columnas asumir en cada punto de ruptura, para que la posición del stagger se reinicie al empezar cada fila

Sin un número de columnas definido para el ancho de pantalla actual, cada hijo se trata como parte de una única secuencia larga — adecuado para una lista simple, pero significa que el último elemento de una cuadrícula grande puede tardar mucho en aparecer. Define el número de columnas según tu cuadrícula real, o los retrasos no coincidirán con lo que se ve en pantalla.

Ejemplo — una cuadrícula de tarjetas a 3 columnas:

div.cards   Stagger on · Step 0.3s · Desktop columns 3 · Tablet columns 2 · Mobile columns 1
            + an entrance animation, e.g. "Slide up (soft)"
  ├ div.card
  ├ div.card
  └ div.card …

Bricks

Pestaña Style → Entrance Animations, el mismo panel que una animación de entrada normal: activa "Stagger children" y define Step, Start delay, Reverse y el número de columnas por punto de ruptura, junto con la animación de entrada propia del padre. Para un query loop de WordPress, pon Stagger en el elemento que realmente envuelve los elementos repetidos del bucle.

Stagger vive al final del panel Entrance Animations del padre.

Etch

Añade las clases de stagger al padre desde la sección Stagger Children del panel Fancy → Entrance.

Gutenberg

En el bloque padre, en el panel Fancy Entrance Animations: hace falta activar el propio módulo de entrada aunque solo quieras el comportamiento de stagger; después activa Stagger y define Step, Start, Reverse y el número de columnas.

Problemas comunes

• Un hijo se ve antes de que le llegue el turno, y luego salta de golpe a su estado animado. Ese hijo tiene su propia opacity fijada en algún sitio (su propio CSS, o un control del builder), lo que sobrescribe el estado inicial oculto del que depende Stagger. Mueve esa opacity a un nieto en su lugar.
• No se escalona nada en absoluto. Los hijos no son hijos directos del elemento con Stagger — hay un envoltorio extra entre medio. Pon Stagger en el elemento cuyos hijos inmediatos son los elementos reales.
• El propio padre no se anima. Esto es intencional: un padre con Stagger y una animación solo transmite la animación hacia abajo, no la conserva para sí mismo. Para animar ambos, envuelve el padre en otro elemento y pon la entrada ahí en su lugar.
• Los últimos elementos de una lista larga aparecen varios segundos tarde. Sin columnas definidas, un duodécimo hijo espera (retraso base + 11 × step) después de entrar en el viewport por scroll. Define las clases de columnas para que el retraso se reinicie al empezar cada fila.
• El retraso propio de un hijo parece ignorarse. Stagger escribe su propio retraso calculado directamente en cada hijo animado, lo que sobrescribe cualquier clase de retraso que ese hijo tuviera.
• Fijar Step en "0" sigue dando un hueco de 0.3s. Un step en cero vuelve al valor por defecto en lugar de desactivar el hueco — si no quieres ningún efecto en cascada, no uses Stagger.