GSAPタイムラインの基本

主要なメソッドの解説

GSAPタイムラインは、複数のアニメーションを効率的に管理し、洗練されたアニメーションシーケンスを作成するための強力なツールです。まずはGSAPのtimelineで使用する主要なメソッドとその使用例について解説します。

to()メソッド: 最終状態を指定してアニメーションを作成します。例えば、要素を特定の位置まで移動させることができます。

javascript
gsap.to(".box", { x: 100, duration: 1 });

from()メソッド: 開始状態を指定してアニメーションを作成します。このメソッドは、アニメーション開始時に要素を特定の状態に設定します。

javascript
gsap.from(".box", { opacity: 0, duration: 1 });

fromTo()メソッド: 開始と終了の両状態を指定してアニメーションを作成します。例えば、要素の位置と透明度を同時に変更できます。

javascript
gsap.fromTo(".box", { opacity: 0, x: -100 }, { opacity: 1, x: 0, duration: 1 });

set()メソッド: 特定のプロパティを即座に設定します。これはアニメーションとは異なり、即時に値を適用します。

javascript
gsap.set(".box", { x: 100, opacity: 0.5 });

これらのメソッドをタイムライン内で連続的に使用することで、複雑なアニメーションシーケンスを簡単に構築することができます。

タイムラインの時間制御

GSAPのタイムラインを使用することで、アニメーションの精密な時間制御が可能になります。特にrepeat、repeatDelay、yoyoといった設定は、アニメーションの動きをより柔軟にコントロールするのに役立ちます。

  • repeat: タイムラインのアニメーションを指定した回数繰り返します。-1を設定すると無限に繰り返されます。
  • repeatDelay: 各繰り返し間の待ち時間を秒単位で指定します。
  • yoyo: ブーリアン値（trueまたはfalse）を設定し、trueにするとアニメーションが逆再生されます。

以下のサンプルコードでは、これらの設定を使用して、アニメーションの動作をカスタマイズしています。

javascript
const tl = gsap.timeline({ repeat: 2, repeatDelay: 1, yoyo: true });
tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 100, duration: 1 }, "-=0.5")
  .to(".box", { x: 0, y: 0, duration: 1 });

このコードでは、.boxクラスを持つ要素に対して、3つの異なる動きのアニメーションを定義しています。repeatとrepeatDelayにより、アニメーションは合計3回（初回含む）実行され、各繰り返しの間に1秒の待ち時間が設定されています。yoyo: trueの設定により、各繰り返しの終了後、アニメーションは逆再生されます。

こうした設定は、ウェブページにインタラクティブな要素を加える際に特に有効です。アニメーションをリッチにし、ユーザーの関心を引きつけることができます。次のセクションでは、これらの技術を実際のプロジェクトにどのように適用するかについてさらに詳しく解説します。

複雑なアニメーションの実例

GSAPタイムラインを用いて、より複雑で魅力的なアニメーションを実現することが可能です。ここでは、実際のウェブサイトで応用できるような複雑なアニメーションの実例を挙げ、コードについて解説していきます。

具体的なコードサンプル

以下は、複数の要素が連動して動くアニメーションのサンプルです。この例では、異なる要素に対して様々なアニメーション効果を適用し、これらをタイムラインで連携させています。

javascript
const tl = gsap.timeline({ repeat: -1, yoyo: true });

tl.from(".element1", { x: -100, opacity: 0, duration: 1 })
  .from(".element2", { y: 100, opacity: 0, duration: 1 }, "-=0.5")
  .to(".element1", { rotation: 360, duration: 1 })
  .to(".element2", { scale: 1.5, duration: 1 }, "-=0.5");

このコードでは、2つの異なる要素（.element1と.element2）に対して、移動、回転、スケール変更といったアニメーションを適用しています。yoyo: trueにより、アニメーションは逆再生され、繰り返しが無限に行われます。

効果的なアニメーションのレイヤリング

アニメーションのレイヤリングは、ウェブページに深みと動きをもたらす重要な技術です。レイヤリングでは、異なるアニメーションを重ね合わせることで、より複雑で豊かな視覚効果を生み出します。以下のコードは、複数のアニメーションをレイヤリングする方法を示しています。

javascript
const tl = gsap.timeline();

tl.from(".background", { opacity: 0, duration: 2 })
  .from(".title", { y: -50, opacity: 0, duration: 1 }, "-=1")
  .from(".description", { y: 50, opacity: 0, duration: 1 }, "-=1");

このサンプルでは、背景、タイトル、説明文といった複数の要素に対してアニメーションを適用しています。これらのアニメーションが重なることで、ページのロード時に流れるようなアニメーションが実現されます。

このようにGSAPタイムラインを利用することで、複数の要素に対して均一でないアニメーションを効果的に実装し、よりダイナミックなウェブ体験を提供することができます。

タイムラインの応用

GSAPのタイムラインは、基本的なアニメーション機能を超えて、さまざまな応用が可能です。ここでは、コールバックとラベルを活用し、タイムラインをより効率的に管理する方法について探ります。

コールバックとラベルの活用

コールバック関数を使用することで、タイムライン内の特定の時点で任意のJavaScript関数を実行できます。これにより、アニメーションに対して動的なインタラクションや進行状況に応じた変更を加えることが可能です。

javascript
const tl = gsap.timeline();

tl.to(".element", { x: 100, duration: 1 })
  .add(() => console.log("アニメーション完了"))
  .to(".element", { y: 100, duration: 1 });

このコードでは、最初のアニメーションが完了した時点でコンソールにメッセージが表示されます。これを利用して、アニメーションの途中で特定の操作を行うことができます。

ラベルは、タイムライン内の特定のポイントに名前を付けることで、後からそのポイントを参照しやすくする機能です。ラベルを使用することで、タイムライン内の複数のアニメーションを簡単に同期させることができます。

javascript
const tl = gsap.timeline();
tl.addLabel("start")
  .to(".element1", { x: 100, duration: 1 }, "start")
  .to(".element2", { y: 100, duration: 1 }, "start");

この例では、addLabel("start")を用いてラベル「start」を設定しています。その後、.element1と.element2に対するアニメーションは、この「start」というラベルのタイミングで同時に開始されます。これにより、異なるアニメーションが特定のポイントで一斉に開始するように同期されます。

ラベルを使用することで、タイムライン内の複数のアニメーションを容易に調整し、効果的に同期させることができます。これは、複雑なアニメーションシーケンスを構築する際に非常に役立ちます。

効率的なタイムライン管理

大規模なウェブプロジェクトにおいて、タイムラインを効率的に管理することは重要です。GSAPタイムラインのネスト機能を活用することで、コードを整理し、読みやすく保つことができます。

javascript
const childTl = gsap.timeline();
childTl.to(".element", { x: 50, duration: 1 });

const parentTl = gsap.timeline();
parentTl.add(childTl)
  .to(".container", { opacity: 1, duration: 1 });

このコードでは、子タイムライン（childTl）を親タイムライン（parentTl）に追加しています。このようにタイムラインを分割することで、各セクションのアニメーションを個別に管理し、大規模なアニメーションシーケンスをより簡単に構築することができます。

GSAPタイムラインの基本から応用的な使用方法までを幅広く解説しました。初歩的なアニメーションの実装から、複雑なアニメーションシーケンスの管理、さらにはコールバックとラベルを利用した高度なテクニックまで、GSAPのtimelineは多彩な機能を持っています。ウェブ上でのストーリーテリングやユーザー体験を一層豊かにするためにGSAPのtimelineを是非活用してみてください。

その他のGSAPの解説記事はこちら。

関連の記事
GSAP ScrollTrigger＆Next.js(React)でスクロール量に応じたアニメーションの実装方法
フロントエンド
関連の記事
パララックスの基本と実装方法まとめ！初心者向けに分かりやすく解説
フロントエンド

鵜川 佑稀

エンジニア。一橋大学商学部商学科卒。2022年にブロックチェーン・Web3の業界に入り、ドバイに移住してDeFiのスマートコントラクトやL1チェーンの開発に従事。現在は福岡在住。