Sequence / Index / Cover

Tres ajustes, añadidos en la 3.1.1, que eliminan la necesidad de ajustar a mano una ventana de scroll distinta para cada hijo de una lista. Úsalos juntos: Sequence reparte un rango de scroll entre los hijos para que se reproduzcan uno tras otro, Index le da a cada hijo una posición y un conteo para usar en CSS, y Cover mide cuánto está siendo cubierto un elemento sticky por el siguiente — útil para efectos de pila de tarjetas donde nada más le daría a un elemento sticky ningún progreso en absoluto.

Míralo en acción: las plantillas Section reveal y Focus gallery.

Sequence children

Pon esto en el padre. Reemplaza el tener que calcular a mano una ventana de Start/End por cada hijo, y redistribuye el rango automáticamente cada vez que se añade o quita un hijo.

Ajuste	Significado	Vacío significa
Sequence children	Lo activa	Desactivado
Sequence start	Dónde empieza todo el rango (5–95)	0
Sequence end	Dónde termina (5–95)	100
Sequence overlap	Ensancha la ventana de cada hijo hacia sus vecinos en un 10/25/50/100% de su propio ancho	Ninguno

Qué es lo que hace en realidad:

• Solo cuenta los hijos directos del padre que ya tienen al menos una fila de ScrollTrigger (cualquier preset, incluido Custom — Video scrub no cuenta). Los demás hijos se dejan tal cual.
• Divide Start–End en un tramo igual por cada hijo contado, y luego escribe el propio start/end de cada hijo para cada preset que tenga — en línea, automáticamente.
• Un valor de Start o End que hayas fijado a mano en un hijo se respeta: Sequence solo rellena el que dejaste vacío.
• También escribe --fa-i (la posición del hijo entre los hijos animados, desde 0) y --fa-n (su conteo) en cada uno.
• Los hijos se miden contra el padre, no contra sí mismos — así que dentro de un escenario anclado, dale a cada hijo también "Get parent", para que midan la sección anclada en lugar del padre de sequence (congelado).

Overlap es muy adecuado para imágenes en el mismo sitio (se funden entre sí muy bien); evítalo para leyendas que se reemplazan en un mismo sitio — los dos textos superponiéndose a medias se leen como un enredo ilegible.

Index children

Pon esto en un padre para etiquetar a sus hijos para usarlos en CSS personalizado, sin necesidad de ninguna animación de scroll propia.

Variable	Escrita en	Valor
--fa-n	El padre (los hijos lo heredan)	Número de hijos directos
--fa-i	Cada hijo directo, animado o no	Su posición, empezando en 0

Esto reemplaza reglas :nth-child escritas para un conteo específico, y comprobaciones de cantidad con :has() de CSS. Un patrón común de stagger desde una sola línea de tiempo:

.item {
  --v: clamp(0, var(--fa-scroll--custom, 1) * var(--fa-n, 1) - var(--fa-i, 0), 1);
  opacity: var(--v);
  transform: translateY(calc((1 - var(--v)) * 40px));
}

El hijo i va de 0 a 1 mientras el valor propio del padre va de i/n a (i+1)/n — los valores de respaldo (1, 1, 0) hacen que cada hijo se muestre totalmente visible cuando el script de scroll no se ha ejecutado. Otros usos comunes: un desfase por hijo (calc(var(--fa-i, 0) * 24px)), o posiciones alrededor de un círculo (rotate(calc(var(--fa-i, 0) * 360deg / var(--fa-n, 1)))). --fa-i y --fa-n son enteros simples, así que un contador CSS puede imprimir una etiqueta de posición tipo "3 / 7" sin marcado extra, para cualquier conteo — ver Activador de scroll y la receta de galería con foco.

Con Sequence children y Index children en el mismo padre, Index suministra --fa-i/--fa-n (contando cada hijo directo) y Sequence solo escribe las ventanas — ver Sequence arriba.

Covered by next sibling

Una tarjeta anclada en la parte superior de su propia pila no cambia de posición, así que medirla contra sí misma nunca produce ningún progreso en absoluto. "Covered by next sibling" le da en su lugar un progreso distinto y útil: la fracción de sí misma que su siguiente hermano está cubriendo.

p = (card.top + card.offsetHeight − nextSibling.top) / card.offsetHeight     (acotado a 0–1)

• El "siguiente hermano" es el siguiente elemento hermano en el DOM (etiquetas como <script>/<style> se omiten).
• La última tarjeta de una pila no tiene ningún hermano siguiente que la cubra, así que su progreso simplemente se queda en 0.
• Usa offsetHeight, así que reducir la escala de la tarjeta no cambia la altura usada para el cálculo.
• La ventana propia de la fila sigue aplicándose encima — con Start/End vacíos, la salida del preset equivale a la fracción cubierta cruda.

Estructura típica para una pila de tarjetas sticky:

section          (no necesita ningún ajuste de Fancy, solo el reseteo de overflow-x)
└─ stack
   ├─ card       position: sticky · top: X · "Covered by next sibling" + una fila Custom
   │  └─ inner   efectos (escala, brillo) leídos de --fa-scroll--custom
   ├─ card       …igual, top distinto
   └─ card       última tarjeta: nunca cubierta, se queda a tamaño completo

Las tarjetas deben ser hermanas dentro del mismo padre. Dale a cada una un valor de top creciente si las tarjetas anteriores deben seguir parcialmente visibles debajo de la que está encima de ellas. Pon el efecto visual real en un contenedor interior, no en la propia tarjeta — el plugin mide la propia caja de la tarjeta, y un transform en el elemento medido cambia su propia medición.

Bricks

Los tres viven en la pestaña Style → panel ScrollTrigger Animations:

Sequence children y Covered by next sibling, en el mismo panel de Bricks.

• Sequence children, con selectores "Sequence start" / "Sequence end" / "Sequence overlap" que aparecen una vez marcado. No se necesita ninguna fila de animación en el propio padre.
• Index children — una simple casilla, sin campos extra.
• Covered by next sibling — una casilla; dale a la tarjeta una fila de animación Custom, y no le añadas "Get parent" (mide contra su propia caja y su hermano, no contra un ancestro).

Etch

Panel Fancy → ScrollTrigger Animations → Settings: Sequence children (con sus campos de Start/End/Overlap), Index children, y Covered by next sibling, cada uno un interruptor que añade su clase (fa--seq, fa--index, fa--ref-cover) más las clases de ventana extra que fijes. Desactivar Sequence en el panel también elimina sus clases de start/end/overlap.

Problemas comunes

• Los hijos no cambian en absoluto mientras el escenario está anclado. No tienen "Get parent" y están midiendo directamente al padre de sequence, el cual — dentro de un escenario anclado — nunca se mueve. Añade "Get parent" a cada hijo (con "I am parent" en la sección exterior).
• Dos leyendas se superponen en el editor, o sin JavaScript. Algún cambio de layout dependiente del índice se activó por algo distinto de la propia animación. Condiciona el layout de celda compartida a la propia variable de la animación (p. ej. --fa-scroll--custom), nunca a una clase del body — --fa-i y --fa-n solo existen una vez que JavaScript se ha ejecutado de verdad.
• Añadir o quitar un elemento rompe el timing. Lo más probable es que estés viendo ventanas ajustadas a mano de antes de la 3.1.1 (ver receta de ventanas manuales) — cambia a Sequence children, que recalcula automáticamente.
• El progreso de una tarjeta de sequence se desvía mientras cubre a su hermana. Se dejó "Get parent" en una tarjeta que usa "Covered by next sibling" — quítalo; cover mide la tarjeta contra su propia caja y su hermana, no contra un ancestro.
• El valor de covered se ve "desfasado un compás" en las pruebas. El suavizado del scroll (ver Activador de scroll) hace que el valor se ponga al día en aproximadamente cinco veces su tiempo de suavizado — mide con fa--smooth-off en el elemento en su lugar.