GSAPでスムーススクロールに独自のイージングを適用させるシンプルな実装例

WEB制作で良く使用する機能の一つで、スムーススクロールがあります。スムーススクロールとはリンクをクリックした際にページ内の目的の要素まで滑らかに移動させるアニメーションのことです。

この機能に独自のイージングやアニメーションの間隔を指定する方法を紹介します。

window.scrollTo では独自のイージングやアニメーションの間隔を指定できない

初めに、スムーススクロールはJavaScriptのwindow.scrollToを使用して実装するのが一般的だと思いますが、window.scrollToはブラウザの持つデフォルトのスムーススクロール機能が使用されるので、独自のイージングやアニメーションの間隔を指定できません。

window.scrollTo({
  top: 1000, // スクロール先の位置
  behavior: 'smooth' // ブラウザのスムーススクロールを利用
});

https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo

より柔軟なスムーススクロールを実装するためには、GSAPなどのアニメーションライブラリを使用する方法があります。

https://gsap.com/

GSAPでスムーススクロールに独自のイージングを適用させる実装例

GSAPにもscrollToメソッドが存在して、こちらを使用すると独自のイージングとアニメーションの間隔をシンプルに指定できます。

gsap.to(window, {
    duration: 1.0,
    ease: "power2.out",
    scrollTo: {
        y: 1000 // スクロール先の位置
    },
});

https://gsap.com/docs/v3/Plugins/ScrollToPlugin/

⚠️ scroll-behavior: smoothが指定されていると競合します。

または、下記のようにonUpdateメソッドを使用する方法でも実装できます。

const targetScroll = { value: window.pageYOffset };

gsap.to(targetScroll, {
    duration: 1.0,
    ease: "power2.out",
    value: 1000, // スクロール先の位置

    onUpdate: () => {
        window.scrollTo({
            top: targetScroll.value,
        });
    },
});

スムーススクロールに独自のイージングを適用させるメリット

スムーススクロールだけでなく、サイト内で共通したイージングを適用させることで、ブランドイメージに一貫性のある、洗練されたユーザー体験を提供できます。

まとめ

個人的にブラウザの持つデフォルトのスムーススクロール機能だと、アニメーションのスピードが速すぎるのと、いつも使用しているイージングをスムーススクールにも適用したくなったので、今回調べてみました。

GSAPを使用して柔軟なスムーススクロールを実装してみてください！