Javascript

【ScrollMagic】を使ったスクロール連動アニメーションスニペットまとめ

今回は【ScrollMagic】を使ったスクロール連動アニメーションのスニペットをまとめてみました。

スクロールで要素がフェードインするようなアニメーションは前回、ご紹介した【Intersection Observer API 】を使ってスクロールアニメーションを実装してみた も是非ご覧ください。

【ScrollMagic】ってなに?

【ScrollMagic】はスクロールに合わせて要素を操作できるJavaScriptのライブラリです。

【ScrollMagic】単体で使うより、アニメーション系の【TweenMax】などと組み合わせて使用することが多いと思います。

スクロールイベントで画面内に入ったらフェードインなどの基本的なアニメーションから、スクロールに合わせたアニメーションの指定まですることができます。

今回は、【ScrollMagic】を使用したスクロールに合わせたアニメーションを中心にスニペットをご紹介していきます。


ScrollMagicのダウンロードはこちら (MITライセンス)

Horizontal Scroll with GSAP and ScrollMagic

スクロールに合わせて横方向にスライドするレイアウトを実装しています。
【ScrollMagic】らしく、スライドまで行くと横スクロールになるのが良いですね。こういうレイアウトが組めると幅が広がります。

【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
IE11でも動きます。

See the Pen Horizontal Scroll with GSAP and ScrollMagic by Alexandre Buffet 😎 (@alexandrebuffet) on CodePen.light

SVG Video Mask Animation – ScrollMagic & Greensock

シンプルですが、スクロールに合わせて装飾が拡大して、アニメーションが終わると次のセクションに移動します。

スクロールに合わせてアニメーションさせたり、レイアウト固定したりと【ScrollMagic】ならではのアニメーションが参考になります。

【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
IE11でも動きます。(安定しません。)

See the Pen SVG Video Mask Animation – ScrollMagic & Greensock by Susan Lee (@susan8098) on CodePen.light

WWF: Header Transition (Dribbble by: Nathan Riley)

コンテンツの位置に合わせてライオンの背景がアニメーションで切り替わります。

【ScrollMagic】の他【TweenMax】や【jquery.fullpage】が使われています。
IE11でも動きます。

See the Pen WWF: Header Transition (Dribbble by: Nathan Riley) by Derek Palladino (@derekjp) on CodePen.light

Scroll apple watch

スクロールに合わせてapple watchが回転するシンプルな【ScrollMagic】アニメーションです。

【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
IE11でも動きます。

See the Pen Scroll apple watch by GA-MO (@GA-MO) on CodePen.light

Sprite Motion w/ScrollMagic

スクロールに合わせて飲み物を飲むお兄さんがアニメーションします。
右側に【ScrollMagic】のhelperを残してくれているので、「trigger」と「start」のアニメーション発火が分かりやすいですね。

スクロールに合わせてgifアニメのようなアニメーションは使いたい部分も多いと思うので参考になりますね。

IE11でも動きます。

See the Pen Sprite Motion w/ScrollMagic by DroidPinkman (@dennisgaebel) on CodePen.light

GSAP ANIMATION PIZZA LANDING PAGE

スクロールに合わせてピザが出来上がる面白いアニメーションです。
要素の重ね合わせアニメーションやコンテンツ固定が実装されています。

IE11未対応。

See the Pen GSAP ANIMATION PIZZA LANDING PAGE by Sandip Dust (@SandipDust) on CodePen.light

ScrollMagic horizontal scroll

水平方向のスクロールアニメーションです。

【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。

IE11ではfilter系のエフェクトが適用されません。

See the Pen ScrollMagic horizontal scroll by Noah Delagardelle (@NoahDelagardelle) on CodePen.light

Scroll-animation

スクロールに合わせてスマホ(?)がゆらりゆらりと動くアニメーション。
一つの要素がコンテンツを跨いでアニメーションするのが面白いですね!

【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
IE11でも動きます。

See the Pen Scroll-animation by Salman Mohamed (@salman15) on CodePen.light

Scrolling SVG Clock – NetMag Tutorial

スクロールに合わせて時計の針が動くアニメーション。アイデアも面白いですね!テキストも時間帯によって変更されます。

【ScrollMagic】の他【TweenMax】や【jQuery】が使われています。
IE11未対応。

See the Pen Scrolling SVG Clock – NetMag Tutorial by Paul Thomas (@motionimaging) on CodePen.light

scroll through image sequence

スクロールに合わせて真ん中の数字と背景が変化します。

IE11でも動きます。

See the Pen scroll through image sequence by m (@mkswiss) on CodePen.light

Apple iPhone SE Color Transition Remake (ScrollMagic & TimelineMax)

スクロールに合わせて画像や文字の色が変化していきます。Appleのサイトでもありそうでな演出ですね!

【ScrollMagic】の他【GSAP】のライブラリが使われています。
IE11未対応。

See the Pen Apple iPhone SE Color Transition Remake (ScrollMagic & TimelineMax) by Mathias Picker (@MathiasWP) on CodePen.light

Element follow path – car on the road

スクロールに合わせて赤丸がパス沿って動きます。
パスとの組み合わせは参考になりますね!

【ScrollMagic】の他【TweenMax】やSVG系のプラグインが使用されています。
IE11未対応。

See the Pen Element follow path – car on the road by Matteo (@PegasusDev) on CodePen.light

最後に

今回は【ScrollMagic】を使ったスクロール連動アニメーションのスニペットをまとめてみました。

スクロール連動型のアニメーションが実装できる点が面白いですね。
さらにSVGと組み合わせるといろいろなアニメーションが実装できそうです。