gsap-core

gsap-core skill の概要

gsap-core は何のためのスキルか

gsap-core skill は、GSAP のコアアニメーション API を扱うための公式ガイドです。対象は gsap.to()、from、fromTo、easing、duration、stagger、defaults、gsap.matchMedia() などです。JavaScript で実用的なアニメーションを作りたいとき、特に DOM や SVG の動きを vanilla JS、React、Vue、Svelte、あるいはフレームワーク非依存のプロジェクトで扱う場合に最適です。

誰が使うべきか

gsap-core skill は、GSAP が本当に適したツールかを判断したいときや、構文を推測せずに動く GSAP アニメーションコードを書きたいときに使います。UI の動き、プロダクトアニメーション、レスポンシブ挙動、prefers-reduced-motion 対応を扱う開発者に特に向いています。

何がいちばん重要か

ユーザーが気にするのは、たいてい次の 3 点です。自分のスタックに GSAP が合うか、アニメーションをどうすっきり表現するか、壊れやすいモーションコードをどう避けるかです。この skill は、フル機能のプラグインや timeline ワークフローではなく、よくある tween パターンに絞った簡潔で信頼できる gsap-core guide が必要な場面で強みを発揮します。

どんなときに最適か

基本的なアニメーションのプリミティブ、1 要素または複数ターゲットへの tween、予測しやすい制御で UI 状態をアニメーションさせるといった依頼なら gsap-core を選びます。シーケンス、スクロール連動の動き、フレームワーク固有の統合が本題なら、core skill は出発点にはなっても、それだけで完結しません。

gsap-core skill の使い方

インストールして有効化する

ディレクトリの skill システムにある gsap-core install の流れを使い、アニメーション案を作る前にこの skill を読み込みます。上流リポジトリは意図的に 1 ファイル中心で構成されているため、主な依存先は補助アセットを探し回ることではなく、skill のガイダンスそのものを読むことです。

まず読むべきファイル

最初に SKILL.md を開きます。そこには、GSAP を勧めるべきかどうか、勧めないべきか、そして core API を実案件でどう位置づけるかの判断基準がまとまっています。この repo には rules/、resources/、ヘルパースクリプトがないため、隠れたセットアップ層を確認する必要はありません。

曖昧な依頼を使えるプロンプトに変える

強い gsap-core usage プロンプトには、要素の種類、アニメーション前後の状態、トリガー、そして prefers-reduced-motion やフレームワーク文脈のような制約を含めます。良い例: 「ページ読み込み時に、hero 見出しを 20px 下・0 opacity から定位置まで、0.6s の ease-out でアニメーションし、モバイルでもレスポンシブに保ってください。」弱い例: 「いい感じにアニメーションしてください。」

実務での進め方

この skill を使ってまず GSAP が適切かを判断し、そのうえでアニメーションを小さな要素に分けて書きます。対象、プロパティ変更、タイミング、easing、レスポンシブ挙動の順で整理するとよいです。依頼に Webflow、React、アクセシビリティ制約が含まれるなら、最初に明示してください。そうすることで、生成される解決策が汎用 tween ではなく、適切な GSAP パターンを使えるようになります。

gsap-core skill の FAQ

gsap-core は基本的な tween 専用ですか？

はい、主にそうです。gsap-core skill がカバーするのは、基礎となる to、from、fromTo、eases、stagger、defaults、レスポンシブロジックです。timeline、スクロールアニメーション、プラグイン、補助ユーティリティが必要なら、別の GSAP skill のほうが適しています。

この skill を使う前に GSAP を知っている必要がありますか？

いいえ。要素、動きのゴール、実行環境を説明できるなら、動く出発点を求める初心者にも向いています。この skill が最も役立つのは、概念説明だけではなく、実際に使える gsap-core guide が必要なときです。

どんなときに gsap-core を使わないべきですか？

問題の本質が CSS だけで済む動き、アニメーションではない UI の不具合、複数シーンのシーケンス設計であるなら使わないでください。また、timeline の合成、スクロール挙動、Flip や Draggable のようなプラグインを明示的に必要とする場合にも最適ではありません。

通常のプロンプトと何が違いますか？

通常のプロンプトだと、一般的なアニメーションの助言が返ってくることがあります。gsap-core skill はより判断重視です。適切な場面で GSAP を勧め、噛み合わないパターンを避け、GSAP の実際の使い方を反映したコードを出すことに役立ちます。単にそれっぽいアニメーション擬似コードに寄せるのではありません。

gsap-core skill を改善するには

ゴールだけでなく、アニメーションの契約条件を書く

強い入力には、要素、開始状態、終了状態、タイミング、制約が入っています。たとえば「ページ読み込み時に、カード一覧を y: 24 と autoAlpha: 0 から y: 0 と表示状態へ、0.5s で power2.out を使ってフェードインし、prefers-reduced-motion を尊重する」といった形です。これは「カードをアニメーションして」より、はるかに実行可能です。

早い段階で実行環境を指定する

gsap-core skill の出力品質は、対象が vanilla JS か、React、Vue、Svelte、Webflow かで大きく変わります。フレームワーク、レンダリングモデル、要素がロード時点で存在するかどうかを明記してください。これらの違いで、アニメーションの組み方も失敗しやすい点も変わります。

ありがちな失敗パターンに注意する

最も多い見落としは、本当は timeline や scroll interaction が必要なのに、コアアニメーションとして依頼してしまうことです。もう 1 つは、レスポンシブ要件やアクセシビリティ要件を省くことです。その結果、デスクトップでは問題なく見えても、小さい画面や reduced-motion ユーザーでは崩れることがあります。

測定しやすい改善を重ねる

最初の結果を見たあと、1 回に 1 つずつ制約を足してプロンプトを改善します。たとえば、duration を短くする、easing を変える、stagger の順序を変える、モバイル挙動を追加する、reduced-motion の代替を入れる、などです。こうすると、一度に全面改修を求めるよりも gsap-core usage が実用的になり、結果の比較もしやすくなります。