フロントエンド & UI
GSAP Skills
コアのトゥイーンから ScrollTrigger、React まで揃う、公式の GSAP アニメーションセット。
概要
GSAP で Web アニメーションを組むための、GreenSock 公式のスキルセット。8 つのモジュールが、コア 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.
デザインにとっての意味
- モーションは、エージェントが構文を推測するのではなく GSAP の実際の API に従う。
- 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 -
あとは作りたい UI を説明するだけ。Codex がスキルに従う。
Codex での使い方
-
GSAP のスキルセットをインストールし、Codex が該当モジュールを読み込めるようにする。
-
欲しいモーションを頼めば、適切なモジュールが API を扱う。
-
コンポーネントツリーの中では、React またはフレームワークのモジュールを使う。
ここに並ぶプラグインはすべて無料・オープンソースで、実際の配布元にリンクしています。
codex-design リストをもっと見る ↗ほかの Codex デザインプラグイン
フロントエンド & UI できること gpt-taste GSAP のスクロールモーションと隙間のないベントーグリッドで、受賞作級のランディングページを作る。 
デザインシステム できること Stitch Design Taste DESIGN.md を書いて、Google Stitch を没個性な画面から遠ざける。 
フロントエンド & UI できること image-to-code まずデザイン画像を生成して分析し、それに一致するフロントエンドコードを組み立てる。 
フロントエンド & UI できること imagegen-frontend-mobile 上質なモバイルアプリの画面フローを、コードではなく画像として生成する。 次のステップ
セットアップなしで、Open Design とデザインする
このプラグインを自分で入れてもいいし、Open Design でキュレーション済みのデザインレイヤーごと Codex の周りで動かしてもいい。自分の API キーを使い、成果物も自分のものに。