gsap

gsap skill の概要

gsap skill でできること

gsap skill は、HyperFrames の構成向けに実践的に使える GSAP アニメーション参照です。どの tween タイプを選ぶべきか、プロパティをどう正しく設定するか、そして本番環境で予測どおりに動く timeline をどう組むかを判断する助けになります。理論より実装を重視した gsap ガイドがほしいなら、この skill は試行錯誤を減らしながらアニメーションを形にすることを目的としています。

この skill が向いているケース

gsap skill は、入場アニメーション、モーション遷移、stagger を使った連続シーケンス、timeline で制御するシーン、再利用可能なアニメーション効果を作るときに向いています。特に Design Implementation の作業で、すでにビジュアル仕様があり、それを gsap.to(), from(), fromTo(), gsap.timeline() に落とし込みつつ、タイミングやプロパティの上書きを崩したくない場合に有効です。

インストールする価値がある理由

主な価値は、どの GSAP API を使うべきか、どの vars が重要か、どのデフォルト設定がバグの原因になりうるかを判断できる点にあります。さらに、camelCase のプロパティ名、immediateRender、transform エイリアス、will-change や quickTo のようなパフォーマンスを意識したパターンといった実務上の制約も拾えます。そのため、gsap skill は、ただ動くだけでなく実際に出荷できる出力が必要なときに、一般的なプロンプトよりずっと役立ちます。

gsap skill の使い方

インストールして、まず読むべきファイルを確認する

以下でインストールします。

npx skills add heygen-com/hyperframes --skill gsap

まず skills/gsap/SKILL.md を確認し、すぐ使えるパターンは references/effects.md を読みます。アニメーションが音声データに依存するなら scripts/extract-audio-data.py も見てください。この repo は小さいので、これらのファイルだけで実運用に必要な文脈の大半をすばやく把握できます。

具体的なアニメーション要件を渡す

gsap skill は、要素、モーションの目的、タイミング、制約がプロンプトに入っていると最もよく機能します。「このカードをアニメーションして」ではなく、たとえば「商品カードの gsap 入場アニメーションを作成してください。24px 下からフェードイン、duration 0.6s、power3.out、3枚を 0.12s ずつ stagger、レイアウトシフトなし、hover の transform を上書きしないこと」といった形にします。こうした入力があると、skill は適切な gsap の使い方を選びやすくなり、曖昧なデフォルト設定を避けられます。

出力品質に影響するコードパスを読む

実装作業では、core tween methods、common vars、transform/CSS のマッピング、function-based values、timelines に関する節を優先してください。ここは実際の出力品質を左右する部分です。再利用可能なモーションパターンが必要なら、まず references/effects.md を確認してください。どのように effect を構成する想定なのか、どこで plugin 要件が効いてくるのかが分かります。

破綻しやすいアニメーションを防ぐワークフローを使う

raw な transform 文字列より、GSAP の transform エイリアスを使うのが基本です。時間付きのモーションを始める前に gsap.set() で初期状態を作っておくと安定します。timeline をつなぐときは、すべてを同じ時刻に積むのではなく、label と position parameter を意図的に使ってください。同じ要素やプロパティに複数回 tween を当てるなら、immediateRender と overwrite に注意しないと、gsap skill が目に見えるジャンプを生むことがあります。

gsap skill の FAQ

この gsap skill は HyperFrames 専用ですか？

HyperFrames の構成向けに書かれていますが、gsap の使い方そのものは広く応用できます。HyperFrames 以外で使う場合でも API の考え方は参考になりますが、ファイル構成やライフサイクル管理は自分で調整する必要があります。

事前に GSAP の経験が必要ですか？

いいえ。gsap skill は、実現したいアニメーションは分かっているものの、どの API を使うべきか迷っている初心者にも向いています。ただし、要素の状態、タイミング、シーケンスを具体的に説明できるほど価値は高まります。そうした詳細が、単なる「なめらかにして」よりも良い出力につながります。

どんな場合は使わないほうがいいですか？

1 回限りの CSS transition だけで足りる場合や、スタイルシートだけで直接定義できる程度に単純なモーションなら、この skill は不要です。また、GSAP の timeline と関係ない独自のランタイムアーキテクチャが必要な場合や、対象要素や目標のモーション状態が要件に含まれていない場合も、相性はよくありません。

一般的なプロンプトと何が違いますか？

一般的なプロンプトは、もっともらしいアニメーション案を返すことが多いです。一方、gsap skill は、正しい GSAP 構文、安全寄りのデフォルト設定、実装現実に合う timeline の動きを求めるときに強みがあります。gsap install 風の導入、tween の選択、プロパティ名、パフォーマンスを左右する判断の迷いを減らせます。

gsap skill の改善方法

目的だけでなく、ビジュアル仕様を渡す

gsap の出力を最も早く改善する方法は、開始状態、終了状態、シーケンス、制約を具体化することです。たとえば「テキストは 20px 上がって 0.5s でフェードインし、その後ボタンは back.out(1.7) で 0.96 から 1 に scale し、どちらも reduced motion に配慮する」といった指示です。これだけで、skill はより良い gsap 運用プランを組み立てやすくなります。

要素名と競合リスクを明示する

セレクタ、要素数、ページ上ですでに動いているモーションがあれば、それも伝えてください。あるプロパティが別の場所ですでにアニメーションされている可能性が分かるなら、その点も書きます。最もよくある失敗は tween そのものより、overwrite の競合や transform の衝突です。ここを先に共有すると、結果がすぐ改善します。

実装直結の出力を求める

Design Implementation の成果がほしいなら、最初の返答で timeline の順序、正確な vars、plugin 要件まで求めてください。相性のよい追加指示は「これを再利用可能な timeline に変換して」「raw transform を GSAP のエイリアスに置き換えて」「パフォーマンスを最適化し、layout thrash を避けて」です。こうした指示は、gsap skill をデモ用のモーションではなく、本番向けコードへ寄せていきます。

1 回に 1 点ずつ変えて反復する

最初の結果が出たら、次は timing、easing、stagger、structure のうち 1 つだけを調整してください。動きが急すぎるなら ease を弱める、遅すぎるなら duration を短くする、要素同士が競合するなら overwrite: "auto" や分かりやすい timeline label を指定する、という進め方です。そうすると gsap skill の焦点がぶれず、次の版を判断しやすくなります。