En los propios términos del Skill
ScrollTrigger es el plugin de GSAP para animación vinculada al scroll: dispara tweens y timelines en posiciones de scroll, fija secciones, sincroniza el progreso con el scroll y controla una timeline a lo largo de un rango de inicio/fin.
Expone el vocabulario de configuración completo — trigger, start/end incluyendo clamp() y valores relativos, endTrigger, scrub, toggleActions, pin y pinSpacing, snap, scroller, id, refreshPriority — y añade ScrollTrigger.batch() para revelados escalonados que llegan juntos, scrollerProxy() para scrollers suaves de terceros, y containerAnimation para scroll horizontal simulado. Los valores por defecto se indican por opción, junto con una lista de buenas prácticas y una lista explícita de prohibiciones que cubre la limpieza en React, el orden de refresh, ease y marcadores residuales.
Qué produce
- Un tween o timeline cuyo progreso está vinculado a la posición de scroll a lo largo del rango start-to-end del trigger.
- Un ScrollTrigger independiente creado sin un tween vinculado, utilizado con callbacks para comportamientos personalizados, como actualizar la UI a partir de self.progress.
- Un array de instancias de ScrollTrigger, una por cada objetivo del batch, devuelto por ScrollTrigger.batch().
- Tweens anidados que se activan según el movimiento horizontal producido por un tween de containerAnimation.
Cómo funciona
- 01Registrar el plugin una vez
ScrollTrigger se distribuye como un plugin en lugar de formar parte de la API de animación principal, por lo que se registra una única vez después de que se cargue el script, antes de que se ejecute cualquier configuración de scrollTrigger.
- 02Adjuntar una configuración de scrollTrigger
Un tween o timeline recibe un objeto scrollTrigger que nombra el elemento trigger, además de un start y un end que describen la posición del trigger respecto a la posición del viewport.
- 03Elige cómo el scroll controla el playhead
Los enlaces scrub avanzan de forma continua según la posición de scroll, opcionalmente con un retraso numérico de recuperación, mientras que toggleActions dispara acciones discretas de play/reverse en los cuatro cruces.
- 04Fijar una sección y desplazarse por una línea de tiempo
El pinning mantiene fijo el elemento activador mientras el rango está activo, y una timeline asociada a ese ScrollTrigger avanza a sus hijos a lo largo del mismo tramo de inicio a fin.
- 05Agrupar Elementos Que Llegan Juntos
ScrollTrigger.batch() crea un ScrollTrigger por cada elemento objetivo y agrupa sus callbacks durante un breve intervalo, de modo que los elementos que entran casi simultáneamente puedan animarse con un stagger en una sola llamada.
- 06Eliminar instancias cuando el contenido desaparece
Eliminar elementos animados o cambiar de página, como en una aplicación de una sola página, requiere finalizar las instancias asociadas para que no sigan ejecutándose contra elementos obsoletos.