gsap-timeline

gsap-timeline スキルの概要

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

gsap-timeline スキルは、gsap.timeline() のシーケンスを組み立て、整理して考えるためのスキルです。順番に実行されるアニメーション、重なり、ラベル、ネストされた再生を扱えます。単発の tween ではなく、複数の要素をどう連携させるかが本質の課題なら、gsap-timeline スキルを使ってください。たとえば、入場時の状態を演出する、複数の UI 要素を同期させる、モーションデザインを繰り返し使えるシーケンスに落とし込む、といったケースです。

最適な利用ケース

この gsap-timeline スキルは、UI モーション、プロダクトのマイクロインタラクション、ランディングページの表示演出、オンボーディングフロー、あるいは予測可能なタイミングが必要なあらゆるアニメーションに向いています。特に gsap-timeline for UI Design として、視覚的なストーリーを具体的なタイムライン構造に変換したいときに役立ちます。

このスキルがほかと違う理由

価値の中心は「どうアニメーションさせるか」ではなく、「アニメーションの各ステップをどこに置くか」です。gsap-timeline のガイドは、デフォルトの順次追加、position パラメータ、再生時の挙動に重点を置いており、壊れやすいタイミング前提を避けられます。スクロール制御、単一プロパティの easing、React 固有の接続が必要なら、別の GSAP スキルを起点にしたほうが適しています。

gsap-timeline スキルの使い方

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

gsap-timeline のインストール手順では、まずディレクトリの install フローを使い、その後でコードやプロンプトを書き始める前にスキルをタスクへ紐づけます。代表的なインストールコマンドは次のとおりです。
npx skills add greensock/gsap-skills --skill gsap-timeline
その後は、アニメーションコードを下書きする前にスキル内容を先に読んで、モデルに正しいシーケンス規則を渡してください。

まず正しいソースを読む

skills/gsap-timeline の SKILL.md から始めてください。このリポジトリではこれが唯一のソースファイルなので、存在しない補助フォルダを探すより、全文を読むのが最短です。特に次の点を確認してください。

• このスキルを使うべき場面
• timeline 作成時のデフォルト動作
• position パラメータの書き方
• timeline の再生とネストに関する注意

大ざっぱな依頼を使えるプロンプトにする

この gsap-timeline スキルは、アニメーションの目的、対象要素、望ましい順序、重なりのルールが入ったプロンプトで最もよく機能します。次の2つを比べてみてください。

• 弱い例: “Make this animate nicely with GSAP.”
• 強い例: “Use gsap-timeline to reveal the hero heading, then stagger the cards, then fade the CTA in 0.2s before the cards finish. Keep the sequence readable and label the main beats.”

gsap-timeline の使用では、「overlap」「after」「at the same time」や、名前付きラベルのようなタイミング意図を含めてください。そうすると、モデルが推測ではなく、適切な position 構文を選べます。

よくないタイムラインを避けるワークフロー

まずモーションをビート単位で下書きし、それぞれのビートをタイムラインの1ステップに対応させてください。アニメーションに分岐、繰り返し区間、再利用可能な intro/outro 状態があるなら、ラベルや nested timeline を早い段階で指定するのが有効です。UI モーションを作る場合は、アニメーションが逆再生可能か、中断可能か、コンポーネントのライフサイクルに結びついているかも明記してください。そこによって、タイムラインの構造はかなり変わります。

gsap-timeline スキル FAQ

gsap-timeline は上級 GSAP ユーザー専用ですか？

いいえ。シーケンスを明確に説明できるなら、初心者にも扱いやすいスキルです。主な学習ポイントは、timeline はデフォルトで末尾に追加されることと、position パラメータが配置を制御することの理解です。UI の変化順を説明できるなら、このスキルだけで十分に実用的な初稿を出せることが多いです。

使わないほうがよいのはどんなときですか？

単一の tween、基本的な easing、または scroll-triggered なオーケストレーションだけが必要なら、gsap-timeline は使わないでください。その場合は gsap-core、gsap-scrolltrigger、または gsap-react のほうが適しています。gsap-timeline スキルが最も強いのは、タイミングの関係性そのものが難しいときです。

一般的なプロンプトより何が優れていますか？

一般的なプロンプトでは、順番は合っていても配置ロジックが弱いタイムラインになりがちです。gsap-timeline のガイドは、デフォルトの append 動作、相対オフセット、ラベル、開始・終了のアンカーといった、モデルに必要な語彙を与えます。その結果、出力が予測しやすく、保守もしやすくなります。

UI デザインのワークフローにも役立ちますか？

はい。特にデザインの受け渡しで、コードではなく文章でモーションが説明されている場合に効果的です。gsap-timeline for UI Design では、「見出しが出る、カードが連続して現れる、最後にボタンが落ち着く」といった指示を、曖昧な順番ではなく明示的なタイミングを持つ構造化されたアニメーション計画に変えられます。

gsap-timeline スキルを改善する方法

結果だけでなく、タイミングの意図を伝える

品質が最も大きく上がるのは、どこで重なりを許すかを明示したときです。たとえば「subtitle は heading の開始から 0.15s 後に始める」のように言ってください。「自然に見せたい」だけでは不十分です。シーケンスにラベルが必要なら、それもプロンプトに入れて、後続のステップが一貫してアンカーできるようにします。

構造を変えるモーション文脈を渡す

このタイムラインが page load、hover interaction、modal の open/close、onboarding、あるいは繰り返しループのどれなのかを伝えてください。1回だけの入場演出ならシンプルで済みますが、逆方向に戻せるインタラクションでは、状態管理をより明確にし、暗黙の前提を減らす必要があります。gsap-timeline スキルが特に活きるのはここで、意図をそのまま安定したシーケンスに変換できます。単なるアニメーションコードではありません。

よくある失敗パターンに注意する

ありがちなミスは、絶対時間を使いすぎること、tween はデフォルトで末尾に追加されることを忘れること、無関係なアニメーション要件を1つのタイムラインに混ぜ込むことです。最初の出力がしっくりこない場合は、同じシーケンスをラベル付きで書き直す、ハードコードした秒数を減らす、明示的な重なりポイントを入れるよう依頼してください。多くの場合、「もっと良いアニメーションにして」と頼むより、そのほうがずっと明確になります。

具体的な修正で反復する

初稿の後は、要素名を追加し、好みのリズムを示し、reduced motion、レスポンシブ対応、再利用性などの制約を明記してプロンプトを磨いてください。次のようなフォローアップが有効です。

• “Keep the same gsap-timeline structure, but make the middle section overlap by 0.25s.”
• “Rewrite this with labels so I can maintain it later.”
• “Adapt this for a reusable component and keep the timeline easy to reverse.”