Frontend & UI
GSAP Skills
Conjunto oficial de animação GSAP, dos tweens do core ao ScrollTrigger e React.
O que é
O conjunto oficial de skills da GreenSock para construir animação web com GSAP. Oito módulos cobrem a API do core, timelines, ScrollTrigger, plugins, React, outros frameworks, performance e utilitários.
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.
Por que isso importa para design
- O movimento segue a API real do GSAP em vez de o agente adivinhar a sintaxe.
- O ScrollTrigger e as timelines são sequenciados como deve ser, não empilhados de qualquer jeito.
- As regras de performance mantêm a animação suave em vez de travada no scroll.
O que cobre
- Core API
- Timelines
- ScrollTrigger
- Plugins
- React and frameworks
- Performance and utils
Como instalar
GSAP Skills
-
Clone o repositório.
git clone https://github.com/greensock/gsap-skills -
Aponte o Codex para o arquivo da skill.
skills/gsap-core/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Instale o conjunto de skills GSAP para o Codex conseguir carregar o módulo certo.
-
Peça o movimento que você quer; o módulo certo cuida da API.
-
Recorra ao módulo de React ou de frameworks dentro de uma árvore de componentes.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.