gsap × angular
angular-gsap
Write vanilla GSAP. The library handles the Angular part: host scoping, cleanup, signal reactivity, and SSR.
The whole idea
One composable. Vanilla GSAP inside.
GSAP itself is framework-agnostic and runs in any Angular app today, no wrapper required. What it can't know is Angular: when a template has rendered, what a component owns, when it's destroyed, whether the code is on a server. This library handles exactly those friction points and nothing else.
injectGsap() runs your GSAP code in a context that belongs to the component. Target elements with viewChild queries or component-scoped selectors, read signals to make it reactive, and the context reverts everything when the component is destroyed. On the server it never runs.
@Component({
template: '<div #box class="box"></div>',
})
export class Hero {
box = viewChild.required<ElementRef>('box');
x = signal(0);
ctx = injectGsap(({ gsap }) => {
// vanilla GSAP; box and x() are tracked
gsap.to(target(this.box), { x: this.x() });
});
spin = this.ctx.contextSafe(() =>
gsap.to(target(this.box), { rotation: 360 })
);
}Why this library
Your GSAP animations, the Angular way
You could write all of this glue yourself. Most Angular apps that animate end up doing exactly that, one component at a time.
Scoped by default
Signal-driven
No cleanup needed
SSR ready
Nothing new to learn
Tree-shakeable
Zero change detection cost