Nelle parole della skill
Skill GSAP ufficiale per le animazioni in React e nei framework basati su React come Next.js. Privilegia l'hook useGSAP() da @gsap/react rispetto a useEffect() o useLayoutEffect(), registrato con gsap.registerPlugin, e richiede uno scope in modo che selettori come .box corrispondano solo agli elementi all'interno del componente.
Copre i ref come target, il secondo argomento opzionale dell'hook (un array di dipendenze o un oggetto di configurazione dependencies/scope/revertOnUpdate), contextSafe per le animazioni create nei pointer handler dopo l'esecuzione dell'hook, e il fallback gsap.context() più ctx.revert() per un semplice useEffect. Indica inoltre la regola SSR: GSAP viene eseguito nel browser, quindi nulla può essere eseguito durante il render lato server.
Che cosa produce
- Un blocco useGSAP le cui animazioni e ScrollTrigger vengono annullati automaticamente allo smontaggio
- Un corpo di useEffect che restituisce una funzione di cleanup che chiama ctx.revert()
- Un handler di click avvolto in contextSafe, con il suo event listener rimosso nel cleanup restituito
- Esecuzione solo lato client, con import dinamico dentro useEffect come opzione per il tree-shaking o le dimensioni del bundle
Come funziona
- 01Installare Gsap e @gsap/react
Nel blocco di installazione sono elencati due package: la libreria GSAP, poi il package GSAP React che fornisce l'hook.
- 02Registrare useGSAP Prima di Qualsiasi Codice GSAP
L'hook viene registrato come plugin, e il file specifica che questa registrazione deve avvenire prima di eseguire useGSAP o qualsiasi altro codice GSAP.
- 03Scrivere l'Animazione Dentro useGSAP con uno Scope
I selettori sono limitati alla radice del componente passando un ref o un elemento come scope.
- 04Avvolgere le Callback Post-render in contextSafe
Le animazioni create successivamente, ad esempio nei pointer event handler, si trovano fuori dal context, quindi vengono avvolte con contextSafe preso dal valore di ritorno dell'hook.
- 05Ricorrere a gsap.context() Più ctx.revert()
Quando useGSAP non è un'opzione, lo stesso pattern viene eseguito dentro useEffect, con un cleanup che chiama sempre ctx.revert().
- 06Mantenere Tutto il Codice GSAP sul Client
useGSAP o useEffect è ciò che tiene l'esecuzione fuori dal render lato server; l'import dinamico dentro useEffect viene proposto come opzione quando le dimensioni del bundle sono rilevanti.