GreenSock公式GSAPスキルテスト - AIを活用してプロレベルのフロントエンドアニメーションを生成する
今日は、フロントエンドアニメーションに適したいくつかのアイデアを紹介します。普段、AIにフロントエンドアニメーションを依頼すると、私の指示を全く理解してくれなかったり、結果がめちゃくちゃになったりすることが多いんです。
今日は、フロントエンドアニメーションに適したものをいくつかご紹介します。
通常、 AI フロントエンドのアニメーションを作成しようとすると、アニメーションが指示を理解しないか、結果が完全にめちゃくちゃになってしまうかのどちらかです。
Gsap-skillsというGitHubプロジェクトはこの問題を解決し、以下のことを可能にします。 AI ページアニメーションを正しく生成する方法を理解してください。
Gsap-skills これは、Codex を対象として GreenSock が公式に維持している GSAP コーディング スキル セットです。Claude コードなど AI Agentインストール後、Agent アニメーションコードを作成する際に、GreenSockが提供するルール、例、および一般的なエラーの説明を読み取ります。
プロジェクトのアドレス：https://github.com/greensock/gsap-skills
AI モデル開発者は通常、GSAPの基本的な構文を理解していますが、複雑なアニメーションを扱う際には、いくつかの種類の問題に直面する可能性があります。
- これは、古いClub GSAP、プライベートnpmリポジトリ、認証トークンなど、時代遅れのインストール方法を使用しています。
- このアニメーションは、タイムラインを使用せずに、複数の遅延を繋ぎ合わせて作成されました。
- top、left、widthなどのプロパティを使用して移動アニメーションを作成すると、頻繁にレイアウト計算が実行されます。
- ReactやVueなどのコンポーネントをアンインストールした後も、TweenやScrollTriggerは残しておいてください。
- タイムライン内の子トゥイーンにScrollTriggerをアタッチします。
- プラグインが登録されていませんでした。開発環境では正常に動作していましたが、本番ビルド後のツリーシェイキングによって削除されました。
- prefers-reduced-motionを無視すると、乗り物酔いしやすいユーザーに対してアニメーションの削減は適用されません。
Gsap-skillsはアニメーション機能を8つの要素に分類しています。
1. gsap-core: 基本的なアニメーションを処理します
2. gsap-timeline: アニメーションの順序を調整します
3. gsap-scrolltrigger: アニメーションをスクロールさせます。
4. gsap-plugins: 高度なプラグインを呼び出す
5. gsap-utils: アニメーション値を処理します
6. gsap-react: Reactの統合問題を解決します
7. gsap-performance: アニメーションのカクつきを軽減
8. gsap-frameworks: Vue、Nuxt、Svelteに対応
Gsap-skills これらのルールをプロキシコンテキストに書き込むことで、モデルがコード生成時に公式ルールを積極的に採用するようになります。推薦する文体。
Gsap-skills この種のコードの記述に適しています。
- React、Vue、またはNuxtを使用したページアニメーション
- ScrollTrigger：スクロールする物語と固定された章
- SVGパス、MorphSVG、DrawSVGアニメーション
- レイアウトの反転切り替えとドラッグ操作
- SplitTextとScrambleTextのテキストアニメーション
- 一時停止、逆再生、ジャンプ、および動的な制御を必要とする複雑なタイムライン
ケース1：gsap-core：軌道発射台
プロンプトワード：
`gsap-core`スキルを呼び出して、現在のワークスペースに`gsap-core-launchpad`という名前の完全なフロントエンドプロジェクトを作成します。
技術スタックはVite、ネイティブHTML、CSS、JavaScriptを使用しています。gsapはCDNを使用せず、npm経由でインストールされます。
ブラウザ上で直接効果を表示できる「軌道発射台」のアニメーションページを作成します。使用する関数は、gsap.to()、gsap.from()、gsap.fromTo()、stagger、transform、autoAlpha、ease、およびgsap.matchMedia()です。
ページには以下を含める必要があります。
1. 暗黒宇宙管制コンソールのインターフェースは、中央に探査機、円軌道、および12個の軌道スケールが配置されている。
2. ページが開くと、タイトル、ステータスデータ、操作ボタンが下から順に表示されます。
3. 12個のトラック目盛りは、段階的に点灯します。
4. 「検出器を開始」をクリックすると、検出器は加速して水平方向に飛び出し、拡大縮小、回転、フェードアウトします。
5. 「リセット」をクリックすると初期状態に戻り、繰り返し再生できます。
6. 「スムーズ」、「標準」、「高速」の3つの速度ボタンを備えています。
7. デスクトップとモバイルデバイスは、gsap.matchMedia() を介して異なる変位距離を使用します。
8. システムが低モーションを優先する場合、大規模な動きはキャンセルされ、短いフェードインのみが残ります。
9. 移動アニメーションには、x、y、スケール、回転を使用しますが、top、left、width、heightは使用しません。
10. フェードアウトには autoAlpha を使用して、透明な要素がクリックをブロックし続けるのを防ぎます。
完全なナビゲーション、ページタイトル、アニメーションステージ、操作エリア、および機能説明エリアが必要です。ページはレスポンシブデザインで、モバイルデバイスにも対応している必要があります。
package.json、index.html、src/main.js、src/style.css、およびREADME.mdを直接作成してください。コードスニペットを返すだけではいけません。
完了後に実行してください：
npm install
npm run build
ビルドが成功したら、開発サーバーを起動し、ブラウザで開くことができるローカルアドレスを返し、起動コマンドを説明します。
ケーススタディの内容は、開くだけで簡単に理解でき、クリックすることでGSAPの効果を確認できます。
全体として、このケースは付属のデモンストレーションでそのまま使用できる状態です。視覚的な完成度、GSAP構文、およびインタラクションループはすべて良好で、使用を妨げる問題は見つかりませんでした。
ケース2：gsap-timeline：オープニングシーケンス
プロンプトワード：
`gsap-timeline`スキルを呼び出して、現在のワークスペースに`gsap-timeline-show`という名前の完全なフロントエンドプロジェクトを作成します。
使用されている技術スタックは、Vite、ネイティブHTML、CSS、JavaScriptであり、gsapはnpm経由でインストールされます。
GSAPタイムライン、位置パラメータ、タグ、ネストされたタイムライン、再生コントロールを視覚的にデモンストレーションする完全なアニメーションを使用した「電子音楽パフォーマンスのオープニング」ページを作成してください。
アニメーション制作プロセスには以下が含まれます。
1. 左右の2つのスクリーンは左右に開きます。
2. ステージグリッドとレコードターンテーブルが現れる。
3. 8つの音量バーが順番に表示された。
4. パフォーマンスタイトルは2行で表示されます。下から入力してください。
5. 次に、日付、場所、および副題が表示されます。
6. ターンテーブルが回転し始め、ボリュームバーが跳ね上がり続けます。
7．最後に、画面には公演ポスター全体が表示されます。
実装要件：
1. gsap.timeline({ defaults: … }) を使用して、期間とイーズを統一的に設定します。
2. "<", "">", "+=0.2"などの位置パラメータを使用して、並列およびインターリーブの関係を制御します。
3. 開く、脈拍、タイトル、ホールドなどのタグを追加します。
4. 複数の遅延を使用してアニメーションをつなぎ合わせることはできません。
5. 「再生」、「一時停止」、「逆再生」、「リプレイ」、「タイトルへジャンプ」ボタンを追加します。
6. タイムラインの進行状況を手動で制御できるように、ドラッグ可能なプログレスバーを追加します。
7. このページには、現在の再生時間と合計再生時間が表示されます。
8. ネストされたタイムラインは、タイトルアニメーションやボリュームバーアニメーションの管理に使用できます。
9. システムで「動作低減」が有効になっている場合、最終ステータスが直接表示されます。
10. アニメーションには、transform、opacity、autoAlphaのみを使用してください。
プロジェクトファイル全体を直接作成してください。ページには明確なステージ効果が必要で、コードやパラメータパネルだけを表示するだけではいけません。
完了後、`npm install`と`npm run build`を実行してください。ビルドが成功したら、開発サーバーを起動し、ブラウザのアドレスを返します。
これにより、4つのアニメーション段階を視覚的に確認し、再生、一時停止、逆再生、ジャンプ、ドラッグといった操作で進行状況を追跡できます。
視覚的に高い認識性を備えたステージ、レコードプレーヤー、ボリュームコラム、そして蛍光色は、統一感のあるエレクトロニック・パフォーマンス・スタイルを生み出している。
ケース3：gsap-scrolltrigger：深海探査ローリング
プロンプトワード：
`gsap-scrolltrigger`スキルを呼び出して、現在のワークスペースに`gsap-scrolltrigger-ocean`という名前の完全なフロントエンドプロジェクトを作成します。
この技術スタックは、Vite、ネイティブHTML、CSS、およびJavaScriptを使用しています。npm経由でgsapをインストールし、gsap/ScrollTriggerからScrollTriggerをインポートして、gsap.registerPlugin(ScrollTrigger)を明示的に呼び出します。
「深海探査ミッション」に関するスクロール式の物語ページを作成してください。ページには少なくとも4つの章を含める必要があります。
1. 潜水艦が海を離れる。
2. 光球へ降下する。
3．深海生物の発見。
4. 海底熱水噴出孔に到着する。
スクロール効果は以下の要件を満たす必要があります。
1. ページのスクロール距離は十分です。
2. ストーリーエリアに入ると、メイン画面が固定されます。
3. スクロールすると、潜水艦、深度表示、吹き出し、背景レイヤー、章のテキストが変化します。
4. 水深は0メートルから6000メートルまで徐々に増加する。
5. 章を切り替えるときは、autoAlpha、scale、y を使用してください。
6. スクロールの進行状況と現在の章は右側に表示されます。
7. スクラブ: 1 を使用して、アニメーションの進行をスクロールに追従させます。
8. pin: true と start: "top top" を使用します。
9. スクロールが停止した後、スナップ機能を使用してスクロール位置をチャプターの位置に近づけることができます。
10. ScrollTrigger は最上位の Timeline にのみアタッチし、内部の子 Tween にはアタッチしないでください。
11. scrubを使用するのと同時にtoggleActionsを設定しないでください。
12. window.scroll をリッスンしない。
13. システムで「prefers-reduced-motion」が有効になっている場合は、固定リンクとスクロールリンクを無効にし、4つのチャプターを通常の縦方向コンテンツに変更します。
ページ上の深海環境は、CSSグラフィック、泡、光線、レイヤー化された背景などを使用して作成できます。単にテキストが上下に動くだけでは実現できません。
完全なプロジェクトファイルを作成し、`npm install`と`npm run build`を実行します。ビルドが正常に完了したら、開発サーバーを起動し、ローカルアクセスアドレスに戻ります。
デスクトップ版では、完全なスクロール式の物語が展開され、水深6000メートル、章のテキスト、潜水艦、海の背景、右側の進行状況が同期して変化するため、スクロールの関係性が明確になります。
物語は、不必要な特殊効果を一切用いず、深度、潜水艦の比率、海水中の光と影の相互作用、そして海底地形を通して展開される。
ケース4 gsap-plugins: ディスクライブラリのレイアウトのバリエーション
プロンプトワード：
`gsap-plugins`スキルを呼び出して、現在のワークスペースに`gsap-flip-records`という名前の完全なフロントエンドプロジェクトを作成します。
技術スタックには、Vite、ネイティブHTML、CSS、JavaScriptが使用されています。GSAPは公開npmパッケージ経由でインストールされ、プライベートnpmリポジトリ、Club GSAP、認証トークンは使用されません。
Flipプラグインを使用して「レコードコレクションライブラリ」ページを作成します。
このページには、異なるビジュアルスタイルのアルバムカードが8枚含まれています。各カードには、カバー、アルバム名、アーティスト名、再生時間が記載されています。カバーは完全な画像である必要があり、空白のプレースホルダーは使用できません。
3つの操作が提供されます。
1. 3列のグリッドに変更する。
2. シングルカラムのプレイリストに切り替えます。
3. レコードの順序をランダムに調整する。
実装要件：
1. gsap/Flip から Flip をインポートします。
2. gsap.registerPlugin(Flip) を呼び出します。
3. 各切り替えの前に、Flip.getState() を使用してカードの状態を保存します。
4. コンテナのレイアウトまたはDOMの順序を変更します。
5. Flip.from() を使用して、位置とサイズの遷移を完了します。
6. カードの移動中、テキストと表紙の連続性を維持する。
7. 現在のレイアウトにあるボタンは、明確な選択状態を持つ必要があります。
8. モバイルグリッド自動単列または二列に変更してください。
9. システムが「動作低減を優先」を有効にすると、レイアウト切り替えは即座に完了します。
10. 各カードの左、上、または幅のアニメーションを手動で計算しないでください。
そのページは、Flip APIの基本的なテストページではなく、実際に使用されている音楽製品のように見える必要があります。
プロジェクトファイルを直接作成し、`npm install`と`npm run build`を実行します。ビルドが成功したら、開発サーバーを起動し、アクセスアドレスを返します。
グリッド表示の切り替えリスト、ランダムソート、アルバム選択といった機能は、FLIPの目的を視覚的に明確に示しており、全体的なビジュアル品質は非常に高い。
ケース5：gsap-utils：信号ミキシングコンソール
プロンプトワード：
`gsap-utils`スキルを呼び出して、現在のワークスペースに`gsap-utils-tuner`という名前の完全なフロントエンドプロジェクトを作成します。
使用されている技術スタックは、Vite、ネイティブHTML、CSS、JavaScriptであり、gsapはnpm経由でインストールされます。
gsap.utilsの数値処理機能を視覚的に実証するための、インタラクティブな「信号混合コンソール」ページを作成してください。
ページの中央には、9つの目盛りが付いた水平方向の信号トラックがあります。ユーザーはスライダーをドラッグしたり、トラックをクリックしたり、「ランダム信号」をクリックしたりできます。
相互作用プロセスには、以下のものの使用が必要です。
1. gsap.utils.clamp() は、入力範囲を 0 ～ 1000 に制限します。
2. `gsap.utils.snap()` は数値を 125 の倍数にスナップします。
3. gsap.utils.normalize() は結果を 0 から 1 に変換します。
4. gsap.utils.mapRange() は、進行状況をマーカーの水平位置と回転角度にマッピングします。
5. gsap.utils.interpolate() は、進行状況に応じてマーカーの色と背景色を変更します。
6. gsap.utils.wrap() は、「前のチャネル」と「次のチャネル」を境界でループさせます。
7. gsap.utils.random() は、既にスナップされたランダムなチャネル値を生成します。
8. `gsap.utils.toArray()` はすべてのトラックティックを取得します。
このページはリアルタイムで表示される必要があります。
– 元の入力値
– クランプ後の値
– スナップ後の価値
– 結果を正規化する
– mapRangeによって取得されたピクセル位置
– 現在のチャンネル名
数値が変化すると、トラックマーカーはスムーズに移動し、スケールも同期して点灯する必要があります。ウィンドウサイズが変更された後は、トラック範囲を再計算する必要があります。
システムで「動きの軽減」が有効になっている場合、動きを緩和することなく、位置を直接更新します。
完全なプロジェクトを作成し、`npm install`と`npm run build`を実行します。ビルドが成功したら、開発サーバーを起動し、ブラウザのアドレスを返します。
直接開くことができ、インタラクティブな機能を備え、対応する数値変化とアニメーションによるフィードバックを提供します。
ドラッグ操作、トラックのクリック、ランダム信号、チャンネル切り替えなど、あらゆる操作がアニメーションを正しく駆動します。視覚的な方向性は非常に一貫しており、ミキシングコンソールのメタファーと数値処理のテーマがうまく融合し、よくあるテンプレートのようなカード感を回避しています。
ケース6 gsap-react: 通知センターをアンインストールできます。
プロンプトワード：
`gsap-react`スキルを呼び出して、現在のワークスペースに`gsap-react-notifications`という名前の完全なReactフロントエンドプロジェクトを作成します。
使用されている技術スタックは、Vite、React、CSS、gsap、および@gsap/reactです。依存関係はCDNを使用せず、npm経由でインストールされます。
「リアルタイム通知センター」ページを作成します。このページには、アニメーションの範囲とアンインストール後のクリーンアップを直感的に確認できるように、2つのNotificationPanelコンポーネントを同時に表示する必要があります。
各コンポーネントには以下が含まれます。
1. 状態表示ランプ。
2. 通知カード3枚。
3. 「新着メッセージを受信する」ボタン。
4. 「メッセージを消去」ボタン。
5. 部品の現在の取り付け状態。
親コンポーネントは以下の操作を提供します。
1. 左側のコンポーネントを個別にアンインストールしてください。
2. 右側のコンポーネントをそれぞれ個別にアンインストールしてください。
3. 部品を再度取り付けます。
4. 両方のコンポーネントの登場アニメーションを同時に再生します。
GSAPの実装要件：
1. @gsap/react から useGSAP をインポートします。
2. コンポーネントの外で gsap.registerPlugin(useGSAP) を呼び出します。
3. 各 NotificationPanel は個別のルート ref を使用します。
4. スコープは useGSAP 用に構成されている必要があり、コンポーネント内のセレクタは現在のコンポーネントのみにアクセスできます。
5. 通知カードは、段階的にアクセスされます。
6. ステータス表示灯は、スケールと自動アルファアニメーションを使用します。
7. クリック後に作成されるアニメーションコールバックは、contextSafeを使用する必要があります。
8. コンポーネント内の要素を操作するために document.querySelector() を使用することはできません。
9. コンポーネントがアンインストールされた後、useGSAP が残りの処理を行います。 自動 アニメーションを元に戻す。
10. 簡単なマウントとクリーンアップのログがページ上に表示され、アンインストール結果がすぐに確認できます。
11. システムで「prefers-reduced-motion」が有効になっている場合、ステータスのみを更新し、大きなアニメーションは再生しません。
このページには、完全な製品インターフェースとレスポンシブレイアウトが必要です。2つのコンポーネントのアニメーションは互いに影響を与えてはいけません。
必要なファイルをプロジェクトファイルに直接書き込み、`npm install`と`npm run build`を実行します。ビルドが正常に完了したら、開発サーバーを起動し、ローカルマシンに戻ります。
スコープの分離、イベントのアニメーション、コンポーネントのアンインストールとクリーンアップなど、主要な機能はすべて実証されており、実用的なフロントエンドからのフィードバックが得られます。
ケース7：GSAPA性能：高周波制御面
プロンプトワード：
`gsap-performance`スキルを呼び出して、現在のワークスペースに`gsap-performance-field`という名前の完全なフロントエンドプロジェクトを作成します。
使用されている技術スタックは、Vite、ネイティブHTML、CSS、JavaScriptであり、gsapはnpm経由でインストールされます。
「高周波信号制御プレーン」ページを作成します。メインエリアは64個の信号ノードを含むグリッドで、中央に円形のスキャンモジュールが配置されます。
インタラクティブな効果：
1. スキャンモジュールは、制御平面内でポインターが移動するのをスムーズに追従します。
2. スキャンモジュールは、横方向の位置に応じてわずかに回転します。
3. このページには、x座標、y座標、および回転角度がリアルタイムで表示されます。
4. 「バッチパルス」をクリックすると、64個のノードが中央から外側に向かって順番に点灯します。
5. 「中央に戻る」をクリックすると、スキャンモジュールはスムーズに中央に戻ります。
性能要件:
1. gsap.quickTo() を使用して、x、y、および回転それぞれについて再利用可能な Tween を作成します。
2. pointermove では、quickTo によって返された関数のみを呼び出し、gsap.to() を継続的に作成しないでください。
3. オブジェクトを移動するには、x、y、および回転を使用します。上方向または左方向は使用しないでください。
4. ノードパルスはTweenを使用し、各ノードに個別に遅延を設定せずに一度だけずらします。
5. 連続的に移動するスキャンモジュールに対してのみ、will-changeを設定します。
6. ポインタ境界情報は、フレームごとにレイアウトを繰り返し読み込むことを避けるために、pointerenter または ResizeObserver で読み取られます。
7. 同じループ内で、読み方のレイアウトと書き方のスタイルを交互に使用しないでください。
8. ページが非表示になったとき、またはユーザーがページを離れたときに、不要なアニメーションを一時停止する。
9. システムがprefers-reduced-motionを有効にすると、ポインターの追従が無効になり、静的状態のみが保持されます。
10. モバイルアプリはタッチクリックに対応しており、操作可能な中央ボタンを備えています。
このページでは、quickToとバッチスタッガーのスムーズな動作を視覚的に示すとともに、簡潔な動作説明欄を設ける必要があります。
`npm install`と`npm run build`を実行して、完全なプロジェクトを作成します。ビルドが成功したら、開発サーバーを起動し、アクセスアドレスを返します。
実装はしっかりしており、見た目も素晴らしい。マウスカーソルがコントロールパネル上を移動すると、スキャンモジュールはスムーズかつリアルタイムで追従する。
ケース8 gsap-frameworks: Vueの動的ポスターウォール
プロンプトワード：
`gsap-frameworks` スキルを呼び出して、現在のワークスペースに `gsap-vue-gallery` という名前の完全な Vue 3 フロントエンドプロジェクトを作成します。
使用されている技術スタックは、Vite、Vue 3 Composition API、CSS、およびgsapです。gsapはCDNを使用せず、npm経由でインストールされます。
「ダイナミックポスターウォール」ページを作成します。親コンポーネントは、2つのMotionGallery子コンポーネントを同時にレンダリングし、Vueのライフサイクル、アニメーションスコープ、およびアンインストール後のクリーンアップを表示します。
各モーションギャラリーには以下が含まれます。
1. ポスターカード4枚。
2. 現在再生中であることを示すステータスインジケーター。
3. 「並べ替え」ボタン。
4. 「再生」ボタン。
5. 現在のマウント状態。
親コンポーネントは以下を提供します。
1. 左側のポスターウォールを取り外してください。
2. 右側のポスターウォールを取り外します。
3. 該当する部品を再度取り付けます。
4. コンポーネントの取り付け履歴とクリーンアップ履歴は、ページ下部に表示されます。
実装要件：
1. onMounted() 内で GSAP アニメーションを作成します。
2. 各コンポーネントは個別のルート参照を使用します。
3. gsap.context() を使用し、ルート参照をセレクタースコープにします。
4. ポスターカードは、順番に、かつ段階的にアクセスされます。
5. ポスターをクリックすると、現在選択されているカードが拡大表示され、他のカードの自動拡大率は縮小されます。
6. イベントがトリガーされた後に作成されたトゥイーンは、コンテキストに追加するか、アンインストール時に個別に終了させる必要があります。
7. onUnmounted() 内で ctx.revert() を呼び出します。
8. グローバルセレクタは、同じコンポーネント内の別のコンポーネントを操作するために使用することはできません。
9. 繰り返しアンインストールと再マウントを行った後、アニメーションがオーバーレイされず、コンソールに削除されたノードへのアクセスに関するエラーメッセージが表示されないようにする必要があります。
10. システムで「prefers-reduced-motion」が有効になっている場合、最終的なレイアウトが直接表示されます。
11. コンポーネントをアンインストールした後、ページは完全に空の状態である必要があり、空白や破損した領域が残ってはなりません。
App.vue、MotionGallery.vue、main.js、スタイルファイル、package.json、およびREADME.mdを作成します。
完了後、`npm install`と`npm run build`を実行してください。ビルドが成功したら、開発サーバーを起動し、ローカルからアクセス可能なアドレスを返します。
Vueのライフサイクル、GSAPのスコープ、アンインストール後のクリーンアップは、インタラクティブなフロントエンドデモとして提示され、高い完成度を示しています。視覚的な表現も非常に優れています。2組のポスターは、暖色系と寒色系のトーンが明確にコントラストを成しています。
AI プログラミングは、数行のコードを追加する段階から、動作するページを直接提供する段階へと移行しつつある。
Anthropicは、プログラミング関連のインタラクション50万件を分析した。Claude Codeの対話の79%は AI 直接タスク実行モード。JavaScriptとHTMLが最も一般的な言語であり、UI/UXコンポーネント開発も主要な用途の一つです。
Gsap-skills GreenSockのエンジニアリング経験を整理して Agent ルールは直接読むことができます。違いは8つのテストケースですでに明らかになっています。タイムラインは一連の遅延に依存しなくなり、スクロールアニメーションはScrollTriggerを配置する場所を認識し、ReactおよびVueコンポーネントはアンロード時にTweenを積極的にクリーンアップします。
Gsap-skills 製品デモ、リリースページ、ポートフォリオの作成に適しており、アニメーションスタイルを統一し、ページ間の品質のばらつきを軽減できます。
AI ページ生成が高速化するにつれて、生成されたコードを実際のプロジェクトにうまく統合できるようなエンジニアリングルールはますます重要になってくるでしょう。GSAP Skillsは、アニメーションによってこのギャップを埋めます。