Las directivas preset cubren los casos comunes a nivel de template: reveal, stagger y splitReveal para entradas, drawSvg para trazos, counter para números, parallax para deriva ligada al scroll, y sequence para componerlas. Todo corre sobre el motor de injectGsap: scoping, limpieza y reduced motion vienen gratis.
sequencerevealstaggersplitRevealcounterparallax
Un componente autocontenido por directiva: elige una para verla funcionando junto al TypeScript y el template tal como irían en tu proyecto, más una hoja de estilos cuando el ejemplo la necesita. Copia el par y funciona.
reveal
Entradas para un solo elemento, al pintar o con scroll. Presets: fade, fade-up/down/left/right, scale-in. El demo hace scroll dentro de su propio marco vía [scroller].
Fades up when the page renders
from the left
scroll inside ↓
and this one waits for the frame scroll
<div class="frame" #frame> <h1 reveal>Fades up when the page renders</h1> <section reveal="fade-right" [delay]="0.2" [distance]="40"> A little later, from the left. </section> <!-- [scroller] is optional: drop it and the page scroll drives it --> <p reveal="fade-up" on="scroll" [scroller]="frame"> And this one waits until you scroll the frame. </p></div>
Cómo funciona
Cada directiva aquí es un preset sobre injectGsap: mismo scoping, misma limpieza, mismos inputs de signal. Cubren los casos comunes; para cualquier cosa más rica, usa el composable.
El ejemplo de sequence envuelve a sus hijos en sequence="0.1": el título, las etiquetas y la línea partida entran una tras otra sin contabilidad de [delay]. Anidar en el template es la coreografía; [at] acepta cualquier parámetro de posición de GSAP.
Los inputs son signals: cambia cualquiera y la entrada se repite. El botón Repetir solo recrea el subárbol.
Los demos de reveal y parallax hacen scroll dentro de su propio marco en lugar de la página: [scroller] apunta ScrollTrigger a cualquier contenedor con scroll.
Con Reducir Movimiento activado en el sistema, estas directivas no animan y el contenido simplemente aparece. Si esta página se ve estática, revisa ese ajuste.
