Javascript

スクロールアニメーションに便利!GSAP【ScrollTrigger】を利用したCodepenスニペットまとめ

今回はGSAPのプラグイン 【ScrollTrigger】を利用したスニペットをご紹介していきます。

【ScrollTrigger】とは

今までは、スクロール連動のアニメーションを作成するときは【ScrollMagic】とGSAP(TweenMax)を組み合わせる事が多かったですが、GSAPの【ScrollTrigger】プラグインを使うことで、さらにスクロール連動アニメーションが実装しやすくなりました。

GreenSock【ScrollTrigger】
https://greensock.com/scrolltrigger/


ざっくり、以下のようなことができます。

  • スクロールで要素をアニメーションさせれる。
    (DOM、CSS、SVG、WebGL、Canvas等)
  • スクロール連動でアニメーションさせることができる。
    (ScrollMagicのような感じ)
  • 要素を指定の位置にピン留めしておける。
    (ScrollMagicのような感じ)
  • スクラブ数値の調整でアニメーションの余韻を調整できる。
  • コールバックやスクロール方向に合わせたイベントが細かくある。
  • matchMedia()が使えるので、レスポンシブ対応がしやすい。

【ScrollTrigger】プラグインのライセンス

【ScrollTrigger】プラグインのライセンスは、GSAP同様、GreenSockのスタンダードライセンスで使用することができます。(MITライセンスではないので注意!)(2021/8/17現在)

また、Codepenのスニペットには【ScrollTrigger】と組み合わせて、
SVGを操作する時に便利な【DrawSVGPlugin】や【MorphSVGPlugin】など、
ClubGreenSockメンバーでないと使用できないプラグインが多く含まれているので注意が必要です。
(Codepen上では無料で試せます。)

【ScrollTrigger】はIE11でも動くの?

GSAPの【ScrollTrigger】はIE11でも動作します。

ただし、この後ご紹介するCodepenのスニペットは、IE11では動作しないES2015(ES6)構文で書かれているので、【Babel】等でトランスパイルさせる必要があります。
(以下ご紹介する、Codepenサンプルは、IE11で試しに確認しましたが、どれも動作しませんでした。)

GSAPの【ScrollTrigger】を利用したスニペット

ここから、GSAPの【ScrollTrigger】を利用したcodepenのスニペットをご紹介していきます。

ScrollTrigger

See the Pen
ScrollTrigger
by Blake Bowen (@osublake)
on CodePen.0

シンプルなアニメーションですが【ScrollTrigger】の用途が分かりやすいサンプル。
スクロールに合わせて、SVGの円状のマスクが大きくなり、画像がフェードインで出てきます。
【scrub】の値を大きくすると余韻が伸びるので、アニメーションの雰囲気も調整できますね。

Parallax scroll animation

See the Pen
Parallax scroll animation
by isladjan (@isladjan)
on CodePen.0

【ScrollTrigger】を利用して、SVG要素をスクロールに合わせてアニメーションさせています。
スクロール時の余韻が強めに設定されていて、parallax感がいい感じです。

Airplanes.

See the Pen
Airplanes.
by Steve Gardner (@ste-vg)
on CodePen.0

スクロールに合わせて、飛行機がパスに沿って動くサンプル。
【ScrollTrigger】とは別に、DrawSVGPlugin】が使用されています。
DrawSVGPlugin】はClubGreenSockメンバーにならないと使用できないので注意。
(Codepenでは無料で試せます。)

Welcome to the jungle – ScrollTrigger GSAP

See the Pen
Welcome to the jungle – ScrollTrigger GSAP
by Louis Hoebregts (@Mamboleoo)
on CodePen.0

スクロールに連動して、葉っぱと文字がアニメーションするサンプル。
文字のアニメーションには、【SplitText】プラグインが使用されています。
SplitText】はClubGreenSockのShockinglyGreenメンバー以上でないと使用できないので注意。
(Codepenでは無料で試せます。)

DISINTEGRATION | GSAP ScrollTrigger Demo

See the Pen
DISINTEGRATION | GSAP ScrollTrigger Demo
by Sikriti Dakua (@dev_loop)
on CodePen.0

スクロールしていくと、画像が粒子状になって消えていくアニメーションサンプル。
粒子アニメーションは以下のYoutubeで詳細が見れます。
https://www.youtube.com/watch?v=5DGZhWDl6XM

26 Days in Peru (GSAP ScrollTrigger)

See the Pen
26 Days in Peru (GSAP ScrollTrigger)
by Olivia Ng (@oliviale)
on CodePen.0

スクロールに合わせて、地図のマーカーと道筋が表示されていくアニメーション。
こちらもDrawSVGPlugin】が合わせて使用されいます。
【ScrollTrigger】はプログレスバーの実装にも最適なので、要素を止める系のアニメーションにバーがあるとわかりやすいですね。

Scroll Map (Sunday Bike Route)

See the Pen
Scroll Map (Sunday Bike Route)
by Tom Miller (@creativeocean)
on CodePen.0

こちらも、スクロールに合わせて地図の道筋が表示されるサンプル。
アニメーションの余韻もかっこいいですね。
【DrawSVGPlugin】とさらに、【MotionPathPlugin】が使用されています。
MotionPathPlugin】はGreenSockのスタンダードライセンスで使用可能とのこと。(2021/8/17現在)
(【MotionPathHelper】はClubGreenSockのShockinglyGreenメンバー以上限定なので注意。)

Horizontal scroll section with GSAP ScrollTrigger & Locomotive Scroll

See the Pen
Horizontal scroll section with GSAP ScrollTrigger & Locomotive Scroll
by Cameron Knight (@cameronknight)
on CodePen.0

スクロールしていくと、途中から横方向のスクロールコンテンツが出てくるサンプル。
【ScrollTrigger】と合わせてパララックスを実装できる【Locomotive Scroll】が使用されています。
Locomotive Scroll】はMITライセンスで使用できます。

A Pen by Marius

See the Pen
by Marius (@make96)
on CodePen.0

Appleサイトのような、スクロールに合わせて画像が切り替わり、文字が出てくるサンプル。
イヤホンの画像は【Canvas】描写で、スクロールに合わせてフレームが切り替わるようになっているので参考になります。

Morphing letters with GSAP ScrollTrigger and Polymorph.js

See the Pen
Morphing letters with GSAP ScrollTrigger and Polymorph.js
by Mirko Zorić (@fluxus)
on CodePen.0

スクロールしていくと、【A】の文字が、【R】や【T】に変化します。
こちらは、【polymorph.js】が合わせて使われています。
polymorph.js】はMITライセンスで使えるようなので試してみたいですね!

Infinite Cover Flow w/ GSAP 😎

See the Pen
Infinite Cover Flow w/ GSAP 😎
by Jhey (@jh3y)
on CodePen.0

スクロールやドラッグに合わせて画像が選べるサンプル。
ミュージック系のアプリで、CDジャケットを選択するときにありそうなUIで面白いですね!
【ScrollTrigger】プラグインの他に【Draggable】プラグインが使用されています。

最後に

今回は、GSAPの【ScrollTrigger】を利用したスニペットまとめを紹介いたしました。

スクロール連動のアニメーションは、これまで【ScrollMagic】を利用していましたが、
【ScrollTrigger】プラグインを使いこなすことで、さらに実装しやすくなりました。

Codepenのサンプルを見ると、SVGのパスやCanvasと組み合わせたアニメーションも多いので、色々試していきたいと思います。