Frontend e UI
GSAP Skills
Set ufficiale di animazione GSAP, dai tween di base a ScrollTrigger e React.
Che cos’è
Il set di skill ufficiale di GreenSock per costruire animazione web con GSAP. Otto moduli coprono l’API di base, le timeline, ScrollTrigger, i plugin, React, altri framework, performance e utility.
Bundles 8 modules: core / timeline / scrolltrigger / plugins / react / frameworks / performance / utils
Official GSAP animation skill set: core API, timelines, ScrollTrigger, plugins, React, other frameworks, performance and utils.
Perché conta per il design
- Il movimento segue la vera API di GSAP invece di far indovinare la sintassi all’agente.
- ScrollTrigger e timeline vengono sequenziati come si deve, non impilati alla buona.
- Le regole di performance tengono l’animazione fluida invece che a scatti durante lo scroll.
Cosa copre
- Core API
- Timelines
- ScrollTrigger
- Plugins
- React and frameworks
- Performance and utils
Come installarlo
GSAP Skills
-
Clona il repository.
git clone https://github.com/greensock/gsap-skills -
Punta Codex sul file della skill.
skills/gsap-core/SKILL.md -
Poi descrivi la UI che vuoi. Codex segue la skill.
Come usarlo con Codex
-
Installa il set di skill GSAP così Codex può caricare il modulo giusto.
-
Chiedi il movimento che vuoi: il modulo giusto gestisce l’API.
-
Usa il modulo React o quello dei framework dentro un albero di componenti.
Ogni plugin qui è gratuito, open source e rimanda alla sua vera fonte upstream.
Altro sulla lista codex-design ↗Altri plugin di design per Codex
Frontend e UI Cosa fa gpt-taste Costruisce landing page da premio con motion GSAP legato allo scroll e griglie bento senza vuoti. 
Design system Cosa fa Stitch Design Taste Scrive un DESIGN.md che guida Google Stitch verso schermate non generiche. 
Frontend e UI Cosa fa image-to-code Genera prima immagini di design, le analizza, poi costruisce il codice frontend corrispondente. 
Frontend e UI Cosa fa imagegen-frontend-mobile Genera flussi di schermate per app mobile di livello premium come immagini, non come codice. Prossimo passo
Progetta con Open Design, senza il setup
Installa questo plugin da solo, oppure porta attorno a Codex un intero strato di design curato con Open Design. Usa la tua chiave, resta padrone dell’output.