ウィルスタイル株式会社 / Will Style Inc.

ScrollTriggerとは

ScrollTriggerとは文字通りスクロールに応じてイベントをトリガーしてくれるライブラリです。
それと同時に[.visible][.invisible]classを付与してくれるのでCSSで簡単にアニメーションさせることが出来ます。
同じような挙動であれば Intersection Observer APIを使えば実装できそうですがScriptを書くのが苦手な人にはとても重宝するのではないでしょうか。

インストール

まずはインストール方法です。
npmでインストールしimportするか、CDNでscriptを読み込んでください。

npm install @terwanerik/scrolltrigger --save

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.3/ScrollTrigger.min.js"><script>

使い方

使い方は以下です。ES6方式のimportを使用した場合とscriptを読み込んだ場合とで少し記法が違うので注意してください。

import ScrollTrigger from '@terwanerik/scrolltrigger'
const trigger = new ScrollTrigger()
trigger.add('[data-trigger]')

scriptを読み込んだ場合は.default()が必要です。

<script src="/path/to/ScrollTrigger.min.js"><script>
<script>
    const trigger = new ScrollTrigger.default()
    trigger.add('[data-trigger]')
<script>

これだけでdata-trigger属性を付与した要素にscrollに応じて[.visible][.invisible]が付与されます。
トランジションを効かせてあげることでアニメーションしながら表示できます。

.visible, .invisible {
    opacity: 0.0;
    transition: opacity 0.5s ease;
}
.visible {
    opacity: 1.0;
}

マルチクラスを付与するか内包した要素にスタイルを当てることで様々なアニメーションが実装出来ます。

.visible.translateY,.invisible.translateY {
    transform: translateY(100px);
    transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateY {
    transform: translateY(0);
}

オプション

.add()の第二引数で一度だけトリガーさせる（once）設定や、トリガーさせる位置（offset）や、付与するclassの設定が可能です。

trigger.add('[data-trigger]', {
    once: true,
    offset: {
        element: {
            x: 0,
            y: (trigger, rect, direction) => {
                return 0.2
            }
        },
        viewport: {
            x: 0,
            y: (trigger, frame, direction) => {
                return trigger.visible ? 0 : 0.2
            }
        }
    },
    toggle: {
        class: {
            in: 'visible',
            out: ['invisible', 'extraClassToToggleWhenHidden']
        },
        callback: {
            in: null,
            visible: null,
            out: (trigger) => {
                return new Promise((resolve, reject) => {
                    setTimeout(resolve, 10)
                })
            }
        }
    },
})

offsetは少し複雑なので簡単にご説明させていただきます。
offsetは[viewport]と[element]の2つの基準を指定します。
100%を1として算出し、viewportのyが0.2であればwindowの高さの上下から20%の位置にelementが来たときにトリガーされます。
elementはviewportの基準に重なる位置を指しています。
elementのyが0.2であり、viewportのyが0.2の場合、windowの高さの上下から20%の位置にelementの上下20%の位置が来たときにトリガーされます。
また、引数のtriggerのvisibleがfalseの時のみにすることで非表示時のアニメーションを見せないようにすることが出来ます。
詳しくは下記DEMOをご確認ください。

カスタマイズ

toggleのcallbackオプションでCSSだけでなくJavaScriptで独自のアニメーションを実装することも可能です。

toggle: {
    callback: {
        in: (trigger) => {
            // trigger.elementに現在のtriggerされた要素が入ります。
        }
    }
}

これを利用してanime.jsを活用して文字を１文字ずつアニメーションさせたDEMOが以下です。

さいごに

今回はスクロールに応じてイベントをトリガーしてくれるライブラリ「ScrollTrigger」をご紹介させていただきました。
スクロールでのアニメーションはやりすぎるとうるさく感じられることもあるとは思いますが、うまく使えば重要なコンテンツにユーザーの目を引くことが出来ます。
比較的簡単に実装できますのでぜひ使ってみてください。
少しでも皆様の参考になれば幸いです。