目次
はじめに
こんにちは、クロです！
前回ご紹介したGSAPにて、アニメーション実装の検証を行いました。
今回はその掘り下げの一つとして、GSAPを使った複数画像の変化についての検証をしてみたいと思います。
その方法として、今回はGSAPのプラグインを使った演出をご紹介していきたいと思います！
GSAPのプラグインとは？
簡潔に説明すると、GSAPには豊富なプラグインが存在し、より表現の幅を広げる際には欠かせないツールと言え、以下ホバー時の挙動のように動きをつける際に利用されます。
以下のPenの「Front」にマウスを合わせると隠れていた「Back」のブロックが回転して表示されます。
See the Pen flip by りょーすけ (@s_ryosuke_1242) on CodePen.
プラグインを追加する
では早速、プラグインを追加してみましょう！
前回同様こちらのページにて、CDNのコードをコピーし、body要素の閉じタグの前にペーストします。
今回はそれに加えて、ScrollTriggerというプラグインを追加したコードを使用します。
コードを設定する
続いてコードを設定していきたいと思います。
今回は以下のようなレイアウトで設定してあります。(詳細は後述のPenでご覧ください)
上記のコードで要となるのは、主に以下のGSAP設定になります。
・zIndex：CSSのひとつ、「z-index」の設定をGSAP側で変更できる。
→この設定で、画像と背景画像の遷移をコントロールしています。
・autoalpha：cssの設定である「opacity」と「visibility」を組み合わせたようなアニメーション設定で、1の場合は表示、0の場合は非表示となる。
・ポジションパラメーター：gsap.toメソッド内に設定されている引数("-=.2"など)。
一つ前の要素が動作完了する前に発火するという設定(上記なら0.2秒前)を付与する。
その他「>」は前の動作完了後、「<」は直前の要素と同時発火を意味する。
実装結果
上記までの情報を元に、以下のような挙動を実装してみました。
ページがロードされると、設定した画像が次々とスクロールする形で表示されます。
上記のCode Penの通りプラグインのコードを加えることで、「ロード時に3つの画像が次々とスクロールして表示される」というアニメーションによるレイアウトを実装できます。
ScrollTriggerの他にも多くのプラグインが存在し、それらを組み合わせることでより複雑なアニメーションを実装することも可能です。
おわりに
以上のように、GSAPのプラグインによる実装は多種多様であり、今回ご紹介したScrollTriggerについても、上記で紹介した以外にも多くのアニメーションが存在します。
次回以降は、ScrollTriggerや他のプラグインをさらに掘り下げた実装についても検証していきたいと思います。
それではまた次回！
参考サイト
・GreenSock公式サイト
・りょーすけブログ
・フリップ演出を実装 CSSのみでも再現できるけども…
・お手軽にフリップ演出を作成する方法
