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 solo composable. Adentro escribes GSAP puro.
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.
Acotado a tu componente
Dirigido por signals
Sin limpieza manual
Listo para SSR
Nada nuevo que aprender
Tree-shakeable
Cero costo en change detection