【GSAP】慣性スクロールの実装　デモあり【簡単10分コピペOK！】

今回はJavaScriptのアニメーションライブラリ、『GSAP』を用いてスムーズスクロールを実装してみました。

実務で使うというよりかはScrollTriggerやcssの理解を深めるに役立つ内容となっています。

コピペしてすぐに実装できるようにCodePenによるデモを用意しています。ぜひ最後までご覧いただけると嬉しいです。

目次非表示

1.慣性スクロールについて
2.実装イメージ
3.HTML
4.CSS
5.JavaScript
6.GSAP有料プラグイン

1.慣性スクロールについて

今回解説するのはマウスホイールを使用した際のスムーズスクロールとなります。ページの先頭にスムーズスクロールやページ内スムーズスクロールとは異なるものとなります。

近いものとしては、Locomotive ScrollやLuxy.jsです。

マウスホイールを転がした際の挙動をGSAPのScrollTriggerを使用して実現してみました。パララックスは含みません。

2.実装イメージ

実装イメージは以下の通りです。

See the Pen GSAP-ScrollTrigger SmoothScroll by りょーすけ (@s_ryosuke_1242) on CodePen.

マウスホイールでスクロールした際に余韻が残っていますね。

実装前の注意点としては予め、CDNでプラグインをダウンロードしておきましょう。
CDNはコチラ
必要なファイルは『gsap.min.js』『ScrollTrigger.min.js』です。

GSAPの導入方法は以下の記事からご覧ください

2022年5月22日【高機能】アニメーションライブラリ GSAPの使い方 – おすすめ導入方法はCDN

3.HTML

HTMLはコチラの通りになっています。比較的シンプルですね

重要な点としては、コンテンツをdivタグ2つで囲っているところです。

<div id="viewport">
  <div id="scroll-container">
    <section class="crimson"></section>
    <section class="skyblue"></section>
    <section class="mediumseagreen"></section>
  </div>
</div>

4.CSS

次にCSSです。

注目するべきところは#viewportと#scroll-container。それぞれpositionとoverflowを使用しているのが肝です。

なぜoverflow:hidden;が必要かというのはこのあとのJavaScriptの内容を見ると理解が深まるかもしれません。

containerを縦に動かしていることで慣性スクロールを再現しているのですがcontainer縦に動かしていることによって発生した余剰分のエリアを隠しているというイメージです。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    width: 100%;
}
body{
    width: 100%;
}
main{
    width: 100%;
}
h1 {
    font-size: 10vw;
}
section{
    width: 100%;
    height: 100vh;
}
#viewport {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#scroll-container {
    position: absolute;
    width: 100%;
}
.crimson{
    background-color: crimson;
}
.skyblue{
    background-color: skyblue;
}
.mediumseagreen{
    background-color: mediumseagreen;
}

5.JavaScript

次にJavaScriptです

6行目の記述が理解する鍵となります。GSAPにおけるプロパティ「y」とはcssに置き換えるとtransformプロパティのtranslateと同義です。

もう一つ重要な箇所がscrub。これを設定することでスクロールと同期してアニメーションが進行されます。逆再生も可能。

つまりスクロールに応じてid属性scroll-containerを付与されたdivタグが縦方向に移動していることによって慣性がついたように見えているわけですね!!

const container = document.querySelector('#scroll-container');
const height = container.clientHeight;//コンテンツの高さを取得
document.body.style.height = `${height}px`;//bodyタグにスタイル付与

gsap.to(container, {
  y: -(height - document.documentElement.clientHeight),//ページ内要素の高さ - ウインドウの高さ
  ease: 'none',
  scrollTrigger: {
    trigger: document.body,
    start: 'top top',
    end: 'bottom bottom',
    scrub: 1,
  },
});

//何が起きてるかわからない場合は以下のものを実行すると仕組みがわかるかも！？
// gsap.to(container, {
//     y: -(height - document.documentElement.clientHeight),
//     ease: 'none',
//     duration:5,
// });