【React】React + GSAP（ScrollTrigger）でスクロールアニメーションを実装する（Next.js）

スクロールアニメーションを実装するにあたり、GSAP の ScrollTrigger を使うことで簡単に実装できたので、今回はその実装方法を紹介する。

GSAP とは
ScrollTrigger の特徴
React での実装例
まとめ

GSAP とは

GSAP（GreenSock Animation Platform）は、高速・軽量のHTML5 アニメーションライブラリである。主なモジュールとして、アニメーションを実装する TweenMax とそのアニメーションのタイムラインを制御する TimelineMax がある。そして、2020年5月、スクロールアニメーションのためのプラグインライブラリ「ScrollTrigger」がリリースされた。

greensock.com

ScrollTrigger の特徴

様々な機能が盛り沢山であるが、簡単に便利だと思った機能を紹介する。

特定の要素に、それぞれ個別にアニメーションを設定できる
トリガー位置を柔軟に設定できる
特定のスクロール位置で要素を固定する、ピン留めも設定可能
onEnter, onLeaveなどのcallbackが設定できる
トリガー位置のマーカー表示が簡単にできる
パフォーマンス最適化

詳細は、公式ドキュメントを参照して欲しい。

React での実装例

インストール

GSAPのモジュールをインストールする。（詳細は、Docs 参照。）

$ yarn add gsap

使い方

gsap.registerPlugin() メソッドで、ScrollTrigger を登録する。(実装では、Next.js を使用したため、client側でのみ実行したいため、process.browser が true の場合のみ登録している。)

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

useEffect(() => {
  if (process.browser) {
    gsap.registerPlugin(ScrollTrigger)
    setAnimation()
  }
}, [])

const setAnimation = () => {
  gsap.to('#アニメーションさせたい要素', {
    // アニメーション内容
    scrollTrigger: {
      trigger: '#トリガー要素',
      start: 'top 40%',  //開始時のトリガー条件
      end: 'bottom 40%',  //終了時のトリガー条件
      onEnter: () => {}, //スクロールイン時
      onEnterBack: () => {}, //スクロールバック時
      markers: true // マーカー表示
    }
  })
}

gsapのメソッドはたくさんあるので、ここでは主に使うものだけを紹介する。

gsap.to()：(現在の状態) → Bになる状態を設定する
gsap.from()：A → (現在の状態)になる状態を設定する
gsap.fromTo()：A → Bになる状態を設定する
gsap.timeline()：タイムライン制御をする際に用いる

const tl = gsap.timeline({repeat: 2, repeatDelay: 1})
tl.to("#id", {x: 100, duration: 1})
tl.to("#id", {y: 50, duration: 1})
tl.to("#id", {opacity: 0, duration: 1})

そして、gsapのメソッドの引数である、第二要素の「アニメーション内容」の部分に、scrollTrigger を定義する。

ちょっとわかりにくい、アニメーションの開始時/終了時のトリガー条件は、以下の通りである。

start: "${#トリガー要素の基準点} ${#ブラウザの画面の位置}"

start: 'top 40%'の場合、「トリガー要素のトップが、ブラウザのトップから40%のところにきたら、アニメーション開始」となる。

参考例

以下のコードは、スクロールに応じて、文字が下から上にフワッと浮き上がってくるようなアニメーションである。

import { ReactElement, useEffect } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

const Component = (): ReactElement => {
  useEffect(() => {
    if (process.browser) {
      gsap.registerPlugin(ScrollTrigger)
      setAnimation()
    }
  }, [])

  const setAnimation = () => {
    gsap.fromTo(
      '#wrapper-a p',
      { opacity: 0, y: 10 }, //fromの設定
      {  //toの設定
        opacity: 1,
        y: 0,
        duration: 2,
        scrollTrigger: {
          trigger: '#wrapper-a',
          start: 'top center', //要素のトップが、画面の中央まできたら開始
          end: 'bottom center', //要素のボトムが、画面の中央まできたら終了
          onEnter: () => {
            console.log('scroll In')
          },
          onEnterBack: () => {
            console.log('scroll Back')
          },
        },
      }
    )
  }
  return (
    <div className="wrapper" id="wrapper-a">
      <p>TEST ANIMATION</p>
    </div>
  )
}

export default Component