本記事ではGSAPを使ってスクロールに連動したアニメーションの作成を解説します。画面内でスクロールしてページ内のあるブロックに来たらアニメーションが発動したり、スクロールに応じて文字大きくなったり小さくなったりするようなアニメーションを指します。GreenSock」をもとに執筆しています。▼2時間30分の講座でGSAPの基本から応用までカバーされており、1日でアニメーションが自由に作れるようになります。▼SALE!詳細はこちらこの記事では上記の教材なしでもアニメーションの実装はできますが、Udemyをメインで使い、サポート教材としてこのブログを使うことをお勧めします。本記事を理解することで下記のようなアニメーションを実装することができます。(※Udemy講座の内容になります)前回の記事でGSAPの基本であるTimelineについて解説しました。3/4】Timelineを使って複数の要素を連動させるアニメーション続きを見る💡プロフィール💡Yamatoと言います。7年ほどフロントエンドをやっています。HTML/CSSはもちろんJS・Vue・WordPress構築・Shopifyの実装をしています。2022年8月から独立しフリーランスで活動しています。前職の上場企業でのマネージャー経験もあり未経験メンバー育成もしていました。目次ScrollTriggerとは?まずは準備ScrollTriggerの基本的な使い方markersの線の見方アニメーション発動タイミングを調整するscrub:スクロール中はアニメーションし続けるpin:スクロールしてもある要素を止めておくことができるまとめでは解説していきます!ScrollTriggerとは?ScrollTriggerはGSAPのプラグインの一つです。このプラグインを使うことで、スクロールに応じたアニメーションを実装することができます。実際に見た方がわかりやすいと思いますので、下記の2つの画像をクリックしてそれぞれのサンプルページを見てみましょう。クリックできますScrollTriggerをマスターすればこのようなアニメーションの実装が可能になります。実装を開始する前にHTML、CSS、JavaScriptをそれぞれ準備しましょう。ファイル構成は全ファイルが下記のように同一の階層になるようにします。HTMLとCSSそれぞれ下記のコードをコピペしてください。(JavaScriptはファイルだけ作っておいてください)Timelineとは違いScrollTriggerはプラグインなので、読み込みが必要です。こちらのページにアクセスしてページ下部にリンクを取得するところがあるので下図を参考にしてリンクを取得してください。下記のHTMLの下部にコピペする(次のHTMLにはすでにリンクを貼り付けています。</body></html>20,21行目にGSAP本体とScrollTriggerをCDNで読み込んでいます。black;}下図のような表示になると思います。これで準備は完了です!ScrollTriggerの基本的な使い方では早速ScrollTriggerを使っていきましょう。今回は画面をスクロールしていると一定のところでターゲット要素が下から上にフェードインをしてくるという実装をします。Tweenの中にscrollTreiggerプロパティを記述し、ターゲットとなる要素を指定します。今回は緑色ブロックのテスト2という文字を指定しています。},});スクロールすると「テスト2」の文字がフェードインしてきます。デモページで確認してみましょう。true」にしておきましょう。制作が終わればmarkersは消しておきましょう。初見ではmarkersの線の見方が謎なのでここで詳しく解説します。true;」にすると、画面右端に線が4つ現れます。・start・end・scroller-start・scroller-end理解しやすくするために「startとend」と「scroller-startとscroller-end」の2つに分けて説明します。startとendはターゲット要素の上下に出現startとendのラインはデフォルトでターゲット要素のtopの位置とbottomの位置にそれぞれ出てきます。start-end間の距離=ターゲット要素の高さになります。start-endに関して3つの注意点があります。padding-topとpadding-bottomの領域も含まれるgsap.fromでscale設定をしているとscaleされた状態でstart-endの位置が設定されるgsap.fromでyを設定をしているとstart-end位置にも適用されるそれぞれ解説します。padding-topとpadding-bottomの領域も含まれるターゲット要素の上下にpaddingが設定されていると要素のtopとbottomにそれぞれpaddingで設定されている領域も追加されるということです。下の図を見てみましょう。padding-bottomをいれることでstartとend間の距離が広がっています。(今回の実装ではpadding-bottomの設定をしています)paddingなしpaddingありgsap.fromでscale設定をしているとscaleされた状態でstart-endが設定される今回の実装のようにgsap.fromでscaleを使っていると、実際の要素の高さよりも低く=start-end間が短くなってしまいます。これはscaleを設定することでページ読み込み時にターゲット要素がscaleされた状態の高さでstartとendが位置付けられてしまうからです。},});今回は「scale:0.5」で設定していたのでstart-end間はターゲットの半分ほどになっています。100」を設定しているとstart-endの線もそれぞれ下に100pxの位置に設定されます。},});以上がstart-endの解説と注意点です。scroller-startとscroller-endは画面の上下に出現scroller-startとscroller-endはデフォルトで表示画面の一番上と一番下に出てきます。scroller-startーscroller-end間=画面の高さになります。(下図参照)scroller-startとscroller-endに関してはとりあえずこれだけ知っておけば大丈夫です。これら4つの線はアニメーションの発火や終了のタイミングと深く関わっているのでこれから深く解説していきます。アニメーション発動タイミングを調整するアニメーションの発動のタイミングはscroller-startの線がstartの線を超えた時です。scroller-startが画面の最下部に位置しているので少し見にくいかもしれませんが、デモページで確認しましょう。デモページで確認これが基本です。次は、ある要素によってはアニメーションを早く発動させたい時もあるといます。アニメーションの発動のタイミングを調整するにはscroller-startかstartのどちらか、もしくは両方の位置を変更します。これら2つの線の位置を調整するにはscrollTriggerの中にstartプロパティを設定します。},});startプロパティは2つの値を持ちます。bottom'」です。ここで下記のように書き換えるとscroller-startの位置が画面の半分の位置にきてアニメーション発動のタイミングが遅くなります。},});デモページで確認end線とscroller-end線の位置を変更するにはendプロパティを設定します。入る値や考え方はstartプロパティと同様です。scrub:スクロール中はアニメーションし続ける今まではある発動タイミングを越えるとアニメーションが始まって勝手に終了する実装をしていましたが、今回はスクロール中ずっとアニメーションをし続ける実装をしていきましょう。デモを確認してください。「テスト2」の文字がスクロールに応じて徐々に見えてくるようになりました。この実装では「scrub」の設定が必要です。},});「scrub:true」をと設定するだけで、スクロールと連動してアニメーションするようになります。このアニメーションはscroller-startがstartを過ぎた時に始まり、scroller-endがendを過ぎた時に完了します。現状ではアニメーションが長すぎるので、綺麗にアニメーションが見えません。下記のようにコードを修正しましょう。},});end線とscroller-end線の位置を調整しました。デモページで確認またscrubにはtrueだけではなく数値も入れることができます。詳細の説明は省きますが、スクロール中のアニメーションに余韻をもたすことができるので適当に数値を入れてみてください。1です)pin:スクロールしてもある要素を止めておくことができるまずはデモページを見てくださいデモページで確認このように2つ目のブロックを一定の期間中スクロールしてもその場に留める(position:fixedされているような)実装をしています。それを可能にしているのが「pinプロパティ」です。今回の実装はテキストではなく、ブロック全体を固定させておきたいので、新たにスクロールトリガーを作る必要があります。新たにスクロールトリガーを作るにはScrollTriggerのcreate()メソッドを使います。true});これでテキストのフェードインアニメーションとpinで留めておく実装を分けることができました。新しいスクロールトリガーにはトリガーのターゲットを2つ目のブロック全体である「.b2」を指定。markersはテキストのフェードインアニメーションから取り除き、新しいスクロールトリガーに設定しましょう。true」を設定するとデフォルトではscroller-startとscroller-endは画面の一番上に出てきます。pinの状態が続くのは、scroller-start線がstart線を超えてからscroller-end線がend線を越えるまでの間です。最後の調整としてscroller-endの位置を調整し、止まっている時間を調整しました。50%',});デモページで確認(完成ページ)まとめ今回は4つの記事でGSAPの使い方の基本的なところを解説しました。GSAPは奥が深くCanvasやWebGLにも対応しています。今回の記事で興味を持った方は是非より深いところを勉強してもらえたと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。完全初心者からWebチーム内で戦えるようになった方法について書きます。それぞれ説明【配列実践スキル】こんにちは。今回はJavaScript(以下JS)の基本である配列について書きたいと思います。配列の中でも特に下記にフォーカスを当てていきます。独学ノウハウ【2023最新】Web制作フロントエンドおすすめ本9選!基礎から応用まで学ぶフロントエンドのスキルの底上げに役立つ本を紹介します。スキルアップ【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)CSS小技集。勉強しててイイなと思ったテクを共有します。けフロントエンドエンジニアYamato(やまと)7年目のフロントエンドです。サンフランシスコ留学の際にITの素晴らしさに触れエンジニアになると決心。独学で未経験からアルバイトで採用され入社。経験し2022年8月に独立しました。HTML/CSS・JS・WordPress・Shopifyを触っています。YAMATOdevlog。