In den eigenen Worten des Skills
Offizieller GSAP-Skill für Animationen in React und React-basierten Frameworks wie Next.js. Er setzt den useGSAP()-Hook aus @gsap/react gegenüber useEffect() oder useLayoutEffect() durch, registriert mit gsap.registerPlugin, und erfordert einen Scope, damit Selektoren wie .box nur Elemente innerhalb der Komponente treffen.
Er behandelt Refs als Targets, das optionale zweite Argument des Hooks (ein Dependency-Array oder ein Konfigurationsobjekt mit dependencies/scope/revertOnUpdate), contextSafe für Animationen, die in Pointer-Handlern nach Ausführung des Hooks erstellt werden, sowie den Fallback über gsap.context() plus ctx.revert() für ein einfaches useEffect. Zudem nennt er die SSR-Regel: GSAP läuft im Browser, daher darf während des Server-Renders nichts ausgeführt werden.
Was er erzeugt
- Ein useGSAP-Block, dessen Animationen und ScrollTriggers beim Unmount automatisch zurückgesetzt werden
- Ein useEffect-Body, der ein Cleanup zurückgibt, das ctx.revert() aufruft
- Ein mit contextSafe umschlossener Click-Handler, dessen Event-Listener im zurückgegebenen Cleanup entfernt wird
- Ausführung ausschließlich clientseitig, mit dynamischem Import innerhalb von useEffect als Option für Tree-Shaking oder Bundle-Größe
So funktioniert es
- 01Gsap und @gsap/react installieren
Im Installationsblock werden zwei Pakete aufgeführt: die GSAP-Bibliothek, dann das GSAP-React-Paket, das den Hook bereitstellt.
- 02useGSAP registrieren, bevor jeglicher GSAP-Code läuft
Der Hook wird als Plugin registriert, und die Datei besagt, dass diese Registrierung erfolgen muss, bevor useGSAP oder anderer GSAP-Code ausgeführt wird.
- 03Die Animation innerhalb von useGSAP mit einem Scope schreiben
Selektoren werden auf die Komponentenwurzel beschränkt, indem ein Ref oder Element als Scope übergeben wird.
- 04Callbacks nach dem Rendern mit contextSafe umschließen
Animationen, die später erstellt werden, zum Beispiel in Pointer-Event-Handlern, liegen außerhalb des Contexts und werden daher mit contextSafe aus dem Rückgabewert des Hooks umschlossen.
- 05Auf gsap.context() plus ctx.revert() zurückgreifen
Wenn useGSAP keine Option ist, läuft dasselbe Muster innerhalb von useEffect, mit einem Cleanup, das immer ctx.revert() aufruft.
- 06Sämtlichen GSAP-Code auf dem Client halten
useGSAP oder useEffect sorgt dafür, dass die Ausführung nicht beim Server-Rendering erfolgt; dynamischer Import innerhalb von useEffect wird als Option angeboten, wenn die Bundle-Größe eine Rolle spielt.