gsap × angular
angular-gsap
Escribe GSAP puro. La librería se encarga de la parte de Angular: scoping al host, limpieza, reactividad con signals y SSR.
La idea completa
Un composable. GSAP puro adentro.
GSAP es agnóstico al framework y corre en cualquier app Angular hoy, sin wrapper. Lo que no puede saber es Angular: cuándo se pintó un template, qué posee un componente, cuándo se destruye, si el código corre en un servidor. Esta librería resuelve exactamente esas fricciones y nada más.
injectGsap() ejecuta tu código GSAP en un contexto que pertenece al componente. Apunta a elementos con queries viewChild o selectores limitados al componente, lee signals para hacerlo reactivo, y el contexto revierte todo cuando el componente se destruye. En el servidor nunca se ejecuta.
@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 })
);
}Por qué esta librería
Tus animaciones GSAP, a la manera de Angular
Todo este pegamento lo podrías escribir tú. La mayoría de las apps Angular que animan terminan haciendo justo eso, componente por componente.
Scoped por defecto
Dirigido por signals
Sin limpieza manual
Listo para SSR
Nada nuevo que aprender
Tree-shakeable
Cero costo en change detection