The whole API

injectGsap(callback?, options?)

Runs the callback's GSAP code in a gsap.context() tied to the component. It runs after the first render, re-runs when signals read inside it change (reverting the previous cycle first), reverts everything on destroy, and never runs on the server.

const ref = injectGsap(({ gsap, context }) => {
  // vanilla GSAP here
}, {
  scope: hostElement,  // optional
  reactive: true,      // optional
  injector: injector,  // optional
});

Options

Returns GsapRef

provideGsap(options?)

One-time global setup, usually in app.config.ts. All of it is optional, and none of it runs on the server.

provideGsap({
  plugins: [ScrollTrigger, SplitText, Flip],
  config: { nullTargetWarn: false },
  defaults: { ease: 'power3.out' },
});

target(source) / targets(source)

Unwrap viewChild / viewChildren queries (or plain ElementRefs and elements) into the DOM nodes GSAP expects. Pass the query signal itself: read inside a callback it stays tracked, so new elements re-run the animation.

box = viewChild.required<ElementRef>('box');
dots = viewChildren<ElementRef>('dot');

ref = injectGsap(({ gsap }) => {
  gsap.to(target(this.box), { x: 100 });
  gsap.from(targets(this.dots), { scale: 0 });
});

Directives

Preset directives, all built on the injectGsap engine: reveal, stagger, splitReveal, scrambleText, drawSvg, counter, parallax, drag, scrollTo, observe, hover, and sequence, which composes child entrances into one timeline ([at] accepts GSAP position syntax). Import the classes you use or GSAP_DIRECTIVES for all of them. Every input is a signal: change one and the animation replays. Under reduced motion they don't animate (counter shows the final value).

<h1 reveal>Fades up</h1>
<ul stagger="0.08" preset="scale-in"><li>…</li></ul>
<p splitReveal="chars" on="scroll">…</p>
<span [counter]="12500" [decimals]="0"></span>
<img parallax="0.3" src="…" />

The entrance directives and counter emit a completed output when they finish.

Plugin coverage

The whole GSAP catalog works here, because nothing is wrapped. Where this table says "vars" or "callback", use the plugin inside injectGsap exactly as the GSAP docs show.

Anything GSAP doesn't track (a gsap.ticker loop, an event listener): return a cleanup function from the callback and it runs on destroy.

Tree-shaking plugins

The library imports no GSAP plugin, ever, so your bundle contains exactly the plugins your app imports and nothing else. Register only what a given scope uses; provideGsap also works in lazy route providers, which puts a plugin's code in that route's chunk instead of the main bundle:

// main bundle: no plugins at all
{
  path: 'gallery',
  loadComponent: () => import('./gallery'),
  // Flip ships in the gallery chunk only
  providers: [provideGsap({ plugins: [Flip] })],
},

Types

Re-exports so you rarely import from gsap directly: Gsap, GsapTween, GsapTimeline, GsapContext, GsapTweenVars, GsapTimelineVars, GsapConfig. Plus the library's own: GsapRef, GsapCallback, InjectGsapOptions, GsapOptions, RevealPreset, ElementLike, and a prefersReducedMotion() helper.