Example · directives

Template directives

Preset directives cover the common template-level cases: reveal, stagger, and splitReveal for entrances, drawSvg for strokes, counter for numbers, parallax for scroll-linked drift, and sequence to compose them. Everything runs on the injectGsap engine, so scoping, cleanup, and reduced motion come along for free.

sequencerevealstaggersplitRevealcounterparallax

One self-contained component per directive: pick one to see it running next to the TypeScript and the template exactly as they would sit in your project, plus a stylesheet when the example needs one. Copy the pair and it runs.

`reveal`

Entrances for a single element, on render or on scroll. Presets: fade, fade-up/down/left/right, scale-in. The demo scrolls inside its own frame via [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>

How this works

Every directive here is a preset on top of injectGsap: same scoping, same cleanup, same signal inputs. They cover the common cases; for anything richer, drop to the composable.
The sequence example wraps its children in sequence="0.1": the title, the tags, and the split line play one after another with no [delay] bookkeeping. Template nesting is the choreography; [at] takes any GSAP position parameter for overlaps.
Inputs are signals: change any of them and the entrance replays. The Replay button just recreates the subtree.
The reveal and parallax demos scroll inside their own frame instead of the page: [scroller] points ScrollTrigger at any scrollable container.
With Reduce Motion turned on in the OS, these directives don't animate and the content simply shows. If this page looks static, check that setting.