本記事ではGSAPを使って複数の要素を連動させるアニメーションについて解説します。GSAPで複数の要素を連動さるアニメーションにはTimelineというメソッドを使います。GreenSock」をもとに執筆しています。▼2時間30分の講座でGSAPの基本から応用までカバーされており、1日でアニメーションが自由に作れるようになります。▼SALE!詳細はこちらこの記事では上記の教材なしでもアニメーションの実装はできますが、Udemyをメインで使い、サポート教材としてこのブログを使うことをお勧めします。本記事を理解することで下記のようなアニメーションを実装することができます。(※Udemy講座の内容になります)前回の記事でGSAPの基本であるTweenについて解説しました。続きを見る💡プロフィール💡Yamatoと言います。7年ほどフロントエンドをやっています。HTML/CSSはもちろんJS・Vue・WordPress構築・Shopifyの実装をしています。2022年8月から独立しフリーランスで活動しています。前職の上場企業でのマネージャー経験もあり未経験メンバー育成もしていました。実装を開始する前にHTML、CSS、JavaScriptをそれぞれ準備しましょう。ファイル構成は全ファイルが下記のように同一の階層になるようにします。HTMLとCSSそれぞれ下記のコードをコピペしてください。</body></html>17行目にGSAPをCDNで読み込んでいいます。green;}下図のような表示になると思います。これで準備が整いました。Timelineとは?GSAPで使うTimelineは複数の要素やアニメーションのタイミングをコントロールするためのツールです。Timelineを使わずに連続したアニメーションをdurationとdelayを使って作成することもできるのですが、かなり手間でメンテナンス性も低くなります。下記のようにすれば連続した動きを実装できます。});これは1秒ごとに一番左の四角が移動し、最終的に元の位置に戻るというアニメーションです。デモページで確認しかし、この連続したアニメーションはduration(アニメーション時間)が1秒だから成立します。ここで2行目のdurationの値を2に変更すると以降のdelayの値も変更しなければなりません。これがメンテナンス性が低いということです。一方でTimelineは1つのアニメーションが完了したら、自動的に次のアニメーションに移るという仕組みです。したがって、前後のduration(アニメーション時間)やそれに伴ってのdelay(アニメーション発動遅延)を気にする必要がありません。実際にはこのように書きます。});上から順番にアニメーションの移動が行われるので、delayの記述が不要になりました。durationの値を変えても、途切れることなく連続した動きになるので、いろんな値を入れてみてください。これがTimelineの概要となります。これからさらに詳しくみていきたいと思います。Timelineの基本的な使い方Timelineは基本的にまず変数を宣言します。gsap.timeline();その後は、動かしたい順に上から並べていきます。});GSAPの慣習的に上から順番に並べているように記述していますが、元はそれぞれ繋がっているだけです。元々は下記のようなコードです。});この例では「.to」しか使っていませんが、もちろん「.from」も使用可能です。Timelineの基本的な使い方はこれだけです!各アニメーション発動タイミングは調整できるTimelineは複数の要素が連続するアニメーションをコントロールするのにとても役立ちます。ここからはTImelineでのアニメーション発動タイミングを調整する方法を解説します。1つ前のアニメーションを基準にタイミングを調整する今までお見せしたものは一つのアニメーションが終わったら次のアニメーションに移るという内容でしたが、次のアニメーションを一つ前のアニメーションが終わる0.5秒前に発動させることも可能です。'-=0.5');このようにアニメーション内容の後に、「’-=0.5’」を付けることで各アニメーションの一つ前のアニメーションが終わる0.5秒前に発動するようになります。「'+=0.5'」と書けば一つ前のアニメーションが終わってから0.5秒後に発動ということになります。前のアニメーションでタイミングを調整する別の方法として不等号(「<」や「>」)も使用できます。});このように記述すると「2つ目の四角がスタートした時に発動する」=「2つ目と同時に動く」ということになります。上記の例の「<」を「>」に変えると2つ目の四角のアニメーションが終わった時に3つ目の四角が動き出すという意味なので記述があってもなくても同じになります。この不等号には「>-=0.5」とも書けますが、これは「-=0.5」と同じに意味になります。アニメーション開始時を基準にタイミングを調整するここではTimelineの発動時を基準としてある要素のアニメーションの発動タイミングを調整する方法をお教えします。数字を入力するこのように記述をすることで、全体のアニメーションが開始して3秒たった後に一番最後の四角が動きます。上記の実装だと、一つ前の4つ目の四角と同時に動きます。各アニメーションに名前をつけるTImelineの中の各アニメーションには「ラベル」をつけることができます。'test');このように記述することで3つ目と5つ目の四角が同時に動き出します。'test-=0.5');このように記述することで3つ目が動き出す0.5秒前に5つ目が動き出させることができます。「ラベル」を設定することで、設定された要素が軸となり発動のタイミングを調整できるようになります。今回の場合、10行目の「test」が基準となり12行目のアニメーションのタイミングを調整しています。コールバックが使えるadd()Timeline内ではコールバックを使用することができます。これにより、「.to」や「.from」は移動やフェードイン・フェードアウトなどのアニメーションだけでなく、クラスを付与したり、スタイルを直接設定できるようになります。その時に必要となるのがadd()です。実際にソースを見てみましょう。});このように記述することで2つ目の四角のアニメーションが完了後に3つ目の四角にクラス名「test」が付与されます。アニメーション以外で特別な実装をしたい時はadd()を使いましょう。addLabel()少し前にアニメーションにラベルを設定できると解説しました。TimelineにはaddLabel()があり、アニメーションにラベルをつけるのではなく任意の場所にラベルを設定することができます。'testLabel+=0.5');このようにTImelineの途中にラベルを設定することができます。この実装では、3つ目の四角の移動が完了してから0.5秒後に5つ目の四角が動き出すという記述になっています。デモページで確認まとめ本記事では連続するアニメーションや、複数の要素が連動するアニメーションをコントロールする方法を解説しました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。スキルアップ【2023ベストセラー】UdemyおすすめJavaScript講座を徹底解説UdemyのJavaScript学習におすすめのコースを紹介します。それぞれ説明【配列実践スキル】こんにちは。今回はJavaScript(以下JS)の基本である配列について書きたいと思います。配列の中でも特に下記にフォーカスを当てていきます。第3弾は繰り返し計算や指定要素だけ抽出する時に便利なmapメソッドです。4/4】ScrollTriggerでスクロールと連動したアニメーションの実装フロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。