GSAP ScrollTrigger.jsを使ってみる

参考記事

・【2021年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する
・ScrillTrigger.jsの実装例 | Green Sock公式
・指定できるCSS | Green Sock公式

やりたいこと

トリガー(.js-trigger)の要素が指定の位置に来たら、その親要素(.js-main)の背景色と文字色を変化させ、.js-triggerを過ぎたら元に戻したい

index.html

<main class="js-main"><!--アニメーションする要素-->
  <div class="js-trigger"><!--トリガーの要素-->
  </div>
</main>

こんな感じ

実装方法

今回はクラスの付け外しで実装します。

また別の方法として、GSAPを使ってJSのみでアニメーションを指定することもできます。（CSSファイルに記述しなくてもJSのみでアニメーションを指定できてしまう）

【参考記事】
・指定できるCSS | Green Sock公式

指定できるアニメーション一部抜粋↓

main.js

gsap.to('.js-demo-section', { 
  autoAlpha: 1, //opacity: 1;とvisibility：visible;がつく
  x: 100, //右に100px移動。-100で左に100px移動。
  y: 200, //下に200px以上。-200で上に200px移動。
  scale:2, //２倍にする。scaleXとscaleYも指摘できる
  rotation: -30, //回転。rotationXとrotationYも指定できる
  skewX: "30deg", //変形 skewYも使える。skewは使えない。 
  delay: 2, //２秒後にアニメーションさせる
  duration: 5, //５秒後かけてアニメーションさせる
  backgroundColor: "red", //背景色を赤にする
  …
});

また、イージング系の指定が豊富に用意されていて、
以下のページで好きなスピードでシュミレーションできます。

イージングシュミレーション　| Green Sock公式

GSAP本体とScrollTrigger.jsを読み込む

今回はcdnで読み込みました

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

実装してみる

CSS

親要素(.js-main)のデフォルトのスタイルとis-bgWhiteが付与された場合のスタイルを指定

※レイアウトに関する記述は省略します

scss;style.scss

.js-main {
  background-color: #000;
  color: #fff;
  transition: background 0.6s ease-in-out;
}
.js-main {
  &.is-bgWhite {
    background-color: #fff;
    color: #000;
  }
}

JavaScript

triggerに指定された要素が、startの位置にきたときに、targetsで指定した要素に、is-bgWhiteのクラス名を追加して、endの位置が過ぎるとis-bgWhiteのクラス名を削除します。

main.js

ScrollTrigger.create({
  trigger: '.js-trigger', //トリガーとなる要素
  start: 'top center',
  end: '75% top',
  toggleClass: { 
　　　　  targets: ".js-main",//ターゲットの要素
    className: "is-bgWhite" //付け外しするクラス
  },
});

クラスを追加した後削除したくない場合はonce: trueを追加するだけです。

main.js

ScrollTrigger.create({
  trigger: '.js-trigger', //トリガーとなる要素
  start: 'top center',
  end: '75% top',
  toggleClass: { 
　　　　  targets: ".js-main",//ターゲットの要素
    className: "is-bgWhite" //付け外しするクラス
  },
  once: true,//一度のみアニメーション
});