Фронтенд и UI
GSAP Skills
Официальный набор анимаций GSAP, от базовых твинов до ScrollTrigger и React.
Что это
Официальный набор скиллов GreenSock для веб-анимации на GSAP. Восемь модулей покрывают базовый API, таймлайны, ScrollTrigger, плагины, React, другие фреймворки, производительность и утилиты.
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.
Почему это важно для дизайна
- Движение следует настоящему API GSAP, а не догадкам агента о синтаксисе.
- ScrollTrigger и таймлайны выстраиваются в правильную последовательность, а не складываются как попало.
- Правила производительности держат анимацию плавной, а не дёрганой при скролле.
Что внутри
- Core API
- Timelines
- ScrollTrigger
- Plugins
- React and frameworks
- Performance and utils
Как установить
GSAP Skills
-
Клонируйте репозиторий.
git clone https://github.com/greensock/gsap-skills -
Укажите Codex на файл скилла.
skills/gsap-core/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Установите набор скиллов GSAP, чтобы Codex мог загрузить нужный модуль.
-
Запросите нужное движение: подходящий модуль берёт на себя API.
-
Обращайтесь к модулю React или фреймворков внутри дерева компонентов.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Другие дизайн-плагины для Codex
Фронтенд и UI Что он делает gpt-taste Собирает премиальные лендинги в духе award-сайтов: GSAP-анимация скролла и плотные бенто-сетки без пустот. 
Дизайн-системы Что он делает Stitch Design Taste Пишет DESIGN.md, который уводит Google Stitch от шаблонных экранов. 
Фронтенд и UI Что он делает image-to-code Сначала генерирует изображения дизайна, разбирает их, а затем собирает соответствующий фронтенд-код. 
Фронтенд и UI Что он делает imagegen-frontend-mobile Генерирует премиальные флоу экранов мобильного приложения как изображения, а не код. Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.