以前の記事（GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃3：スクロールで固定表示）でGSAPのScrollTriggerプラグインを使ったスクロール時に固定表示をさせるアニメーションの実装例をいくつか見ていきましたが、今回はその応用ということで、少し変わったバリエーションも作成してみたいと思います。   直近のクライアントワークでもオーダーがあったりと実際に制作の現場で使えるテクニックかと思いますのでよかったら参考にしてみてください。 （過去の参考記事） GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃3：スクロールで固定表示 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編 JavaScriptのアニメーションライブラリ「GSAP」を使ってみる    

1. スクロールで画面外にはみ出したコンテンツを横スクロールで表示

過去記事でも紹介していました縦スクロールから固定表示になりコンテンツが横方向に移動することで横スクロールに変わったように見せる動き（サンプルはこちら）の応用になり、はみ出したコンテンツを横方向へスクロールに連動させるように動かして画面内に表示させていきます。   基本的には同じように実装しますが、スクロールで移動させる量とトリガーとなる範囲を計算する必要があります。具体的には、コンテンツのはみ出した分の長さを、トリガーの対象となる範囲に設定することで実現していきます。まずは必要となる要素を用意します。

// HTML
<div class="js-trigger">
  <div class="container">
    <h2 class="title">タイトル</h2>
    <div class="contents">
      <div class="items js-element">
        <div class="item">
          <img src="./image.jpg" alt="">
        </div>
        <div class="item">
          <img src="./image.jpg" alt="">
        </div>
        <div class="item">
          <img src="./image.jpg" alt="">
        </div>
        .....
      </div>
    </div>
  </div>
</div>

// CSS
.js-trigger {
  height: 100vh;
}
.container {
  display: flex;
  height: 100%;
  align-items: center;
}
.title {
  width: 200px;
}
.contents {
  width: calc(100% - 200px);
  overflow-x: hidden;
}
.items {
  display: inline-flex;
  gap: 24px;
  padding: 0 24px 0 0;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  flex-shrink: 0;
}

  はみ出しているコンテンツでは、各コンテンツ要素を横並びにしてインライン状に並べていきますが、値を固定値で指定して親要素の領域に対応して縮小されないようにすることで、画面外に出るようにしておきます。続いてスクリプト部分をみていきます。ここではGSAPのScrollTriggerプラグインでスクロールに対応した動きを作っていきます。スクローラーの範囲で対象となる要素を右から左方向へスクロール量の分だけ移動するように実装します。

gsap.registerPlugin(ScrollTrigger);
const targetElement = document.querySelector('.js-trigger');
gsap.fromTo('.js-element', 
  { 
    x: 0
  },
  {
    x: `-${targetElement.offsetWidth - targetElement.parentElement.offsetWidth}`,
    scrollTrigger: {
      trigger: '.js-trigger',
      start: 'top 0%',
      end: () => `+=${targetElement.offsetWidth - targetElement.parentElement.offsetWidth}`,
      scrub: true, 
      markers: true,
      pin: true,
      anticipatePin: 1,
      invalidateOnRefresh: true
    }
  }
);

  ポイントになるのは、対象要素のはみ出した部分の幅を、スクローラーの範囲と、対象要素の移動距離にセットすることです。こうすることではみ出した部分の幅をスクロールする間に同じ量だけ対象要素を移動させることができます。はみ出した部分の長さについては、親要素の幅から対象要素の幅を引くことで算出することができますね。実際に作成したサンプルはこちらになります。    

2. スクロールで全画面のコンテンツ内容を表示切り替え

続いては全画面表示のコンテンツをスクロール量に応じて切り替えていくパターンです。scrollTriggerではオプションにonEnterやonLeaveなどのコールバックを設定できるものが用意されており、対象要素がスクローラーの範囲に入った時や出たタイミングで処理を実行できるようになります。その際にclassを付与させたりすると表示自体を別のものに切り替えることができますね。まずはHTMLとCSSを見ていきましょう。

// HTML
<div class="js-trigger">
  <div class="js-element active">
    <div class="contents">
      <div class="background">
        <img src="./images.jpg" alt="">
      </div>
      <div class="foreground">
        <p>コンテンツテキスト</p>
      </div>
    </div>
  </div> 
  <div class="js-element">
    <div class="contents">
      <div class="background">
        <img src="./images.jpg" alt="">
      </div>
      <div class="foreground">
        <p>コンテンツテキスト</p>
      </div>
    </div>
  </div> 
  <div class="js-element">
    <div class="contents">
      <div class="background">
        <img src="./images.jpg" alt="">
      </div>
      <div class="foreground">
        <p>コンテンツテキスト</p>
      </div>
    </div>
  </div> 
  .....
</div>

// CSS
.js-trigger {
  height: 700vh;
  position: relative;
}
.js-element {
  height: 200vh;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 1;
}
.js-element.active {
  z-index: 2;
}
.contents {
  height: 50%; // 100vh
  width: 100%;
  position: sticky;
  top: 0;
}
.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%; // 100vh
}
.foreground {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%; // 100vh
}
.js-element img,
.js-element p {
  opacity: 0;
}
.js-element.active img,
.js-element.active p {
  opacity: 0;
}
.js-element img {
  transition: all 0.2s ease 0.1s;
}
.js-element p {
  transform: translate(0, 30px);
  transition: all 1.4s ease 0.8s;
}
.js-element.active p {
  transform: translate(0, 0);
}

  ここではスクロールでの固定表示にGSAPのPinではなく、CSS側でposition: sticky;を指定することで実現させています。ポイントになるのは親子の入れ子になっている要素で二重にstickyの指定をしていることです。こうすると、まず全体のトリガー要素内で各セクションの要素が固定表示され、さらにその各セクション内に含まれるコンテンツを内包している要素が固定表示と二段階で固定に表示されるようにしています。ここでは各セクションを200vhと画面の2倍の高さにして、実際に表示されるコンテンツは100vh相当になるようにして全画面で表示されるようにしておきます。これである程度のスクロール範囲が確保されてアニメーションを確認することができますね。なお、表示時のアニメーションは適宜要件にあわせて作成しておきます。   そして実際の表示切り替えは、重なり順を変更することで実現されるようにしています。これはclassの切り替えで対応することができます。scrollTriggerのonEnterなどの検知ができるメソッドを活用し、セクションがスクローラーの範囲に入っているものにはclassを付与し、セクション全体が表示されるようにしておきます。

const targetElement = document.querySelectorAll(',js-element');
targetElement.forEach((element, index) => {
  ScrollTrigger.create({
    trigger: element,
    toggleActions: 'play reverse play reverse',
    id: `id_${index}`,
    start: `top 0%`,
    end: `+=200%`,
    markers: true,
    invalidateOnRefresh: true,
    onEnter: () => {
      targetElement.forEach((item) => {
        item.classList.remove('active');
      });
      targetElement[index].classList.add('active');
    },
    onEnterBack: () => {
      targetElement.forEach((item) => {
        item.classList.remove('active');
      });
      targetElement[index].classList.add('active');
    }
  });
});

  onEnterやonEnterBackなどのコールバックを使いclassの切り替えをしています。これで全画面表示のコンテンツがスクロールに合わせて切り替わるようになりました。実際に作成したサンプルはこちらになります。  

---

  今回はGSAPのScrollTriggerプラグインを使ってスクロール固定表示アニメーションの応用例をいくつか見ていきました。最近のトレンドとして、このようなスクロールに対応させた動きは要望としてよく上がってきていますので、ぜひ活用していきたいですね。