アニメーションの実装には必ずと言っていいほど使っているGSAPですが、過去記事「GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動」ではスクロール量に連動してアニメーションさせる方法についてまとめていましたが、今回はさらにそこから応用でスクロール時に要素を固定表示させる方法について見ていきます。   これだけですと、CSSのposition: sticky;（参考記事「CSSのposition: sticky;でスクロール時にレイアウトを固定できるスティッキー要素を作成する」）を指定するだけで実現できますが、さらにそこから固定表示に合わせて処理を連動させていくとなるビューポートに対しての検知が必要になったりと（参考記事「CSSでposition: sticky;を指定した要素の状態をJavaScriptのIntersection Observer APIで検知する」）とても複雑になってしまいます。そんな場合に、GSAPのScrollTriggerにある「pin」というオプションを使うことで簡単に実装できてしまいます。本当に便利ですよね。   （こちらの記事もどうぞ） GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃2：スクロール量に連動 GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる＃1：基本編 JavaScriptのアニメーションライブラリ「GSAP」を使ってみる   今回はサンプルとして、下記のようにトリガーとなるラッパー要素と、固定表示の対象となる要素を用意します。CSSでは固定表示になる要素を画面いっぱいに広がるようなサイズを指定し、トリガー要素スクロール中に固定表示にされるので、対象要素より大きめの高さになるようにしておきます。

<div class="wrapper js-scroll-animation-trigger">
  <div class="inner js-scroll-animation-target">スクロールで固定表示</div>
</div>

.wrapper {
  width: 100%;
  height: 300vh;
}
.inner {
  width: 100%;
  height: 100vh;
}

   

スクロールで固定表示

それでは早速ベーシックなスクロールに合わせてスティッキー要素のように固定させる方法から見ていきます。大まかには前回記事で紹介しているスクロール量に合わせたアニメーションとなるので、ScrollTriggerを使う指定方法になりますが、オプションに「pin」を追加する必要があります。pinのオプションの値にはトリガー対象となる要素のセレクタを入れておくことで、このトリガーにスクローラーが交差することで対象要素を固定表示にさせることができます。

gsap.registerPlugin(ScrollTrigger);
gsap.fromTo('.js-scroll-animation-target',
  {},
  {
    scrollTrigger: {
      trigger: '.js-scroll-animation-trigger',
      start: 'top top',
      end: '50% top',
      scrub: true,
      markers: true,
      pin: true,
      anticipatePin: 1,
      invalidateOnRefresh: true
    }
  }
);

  また、pinのオプションの他にも「anticipatePin」と「invalidateOnRefresh」というオプションがあることにも注目します。これらはpinのオプションを指定した時にセットで覚えておくと良い指定になります。  

scrollTrigger.pin	スクロール中に要素を固定表示させるかどうかを設定するオプションで、trueにすることでスクロール時に要素の固定表示ができるようになります。
scrollTrigger.anticipatePin	素早いスクロール時に固定表示が遅延するのを防ぐために調整するオプションです。基本的には1の値を入れておくことで対応します。
scrollTrigger.invalidateOnRefresh	リサイズイベントなどでスクロール値が再計算される時に、内部で記録されている値をリセットさせることで正しくアニメーションが実行されるようにします。

  これだけでスクロールに対応した要素の固定表示ができるようになりました。上記のコードで作成したサンプルはこちらに用意しています。    

スクロールで固定表示にしてから異なる方向へのスクロールアニメーションで動かす

続いて固定表示にさせたところからの応用パターンも見ていきます。固定表示にした後にその中のエリアにある要素を横方向に移動させることで、縦スクロールから横スクロールに変換するような動きを表現できます。HTMLでは下記のようにトリガー要素とアニメーション要素の間にコンテナ要素を追加し、CSSでコンテナ要素からアニメーション要素はみ出さないように、コンテナ要素に対して上下中央左端に揃えて配置しています。

<div class="wrapper js-scroll-animation-trigger">
  <div class="conatiner">
    スクロールで固定表示
    <div class="inner js-scroll-animation-target">
      固定表示後に横方向にスクロールさせる要素
    </div>
  </div>
</div>

.wrapper {
  width: 100%;
  height: 300vh;
}
.conatiner {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.inner {
  position: absolute;
  left: 0;
  top: calc(50% - 25vh)
  width: 100vh;
  height: 50vh;
}

  スクリプトの方は下記のように変更を加えます。今回はアニメーションの対象要素を左方向へ動かすので、fromTo()メソッドで「x」のオプションをマイナス方向に変化させます。どれくらい変化させるかを指定しますが、今回はアニメーション要素の幅と等しい距離を水平方向左側に移動させる前提になっています。合わせて「end」オプションで、アニメーション要素の幅を指定することで、トリガー要素がスクローラーからアニメーション要素の幅分スクロールさせるところでアニメーションが終了するようになります。「+=」の後に数値をつけた文字列で指定することで、トリガーの開始位置から数値分スクロールが進んだ部分を終了点とすることができます。応用としては、「+=100%」とすると、スクローラー分の高さとすることができます。つまり固定表示の間のみ横スクロールのアニメーションが実現できます。

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

  スクロールをすると固定表示になり、そのタイミングでアニメーション要素が横方向にスクロールするように移動するため、縦スクロールから横スクロールに切り替わったように見せることができます。応用やアイデア次第でいろんなデザインや見せ方ができますね。上記のコードで作成したサンプルはこちらに用意しています。    

スクロールで固定表示にしてから要素をトリミングしながら表示

もう1つ、スクロールでの固定表示を活かしたアイデアを見ていきます。先ほどは固定表示の間、要素を横スクロールのアニメーションで移動させていましたが、今回は固定表示の間に、スクロール量に合わせたトリミングをアニメーションにして表示させるという内容です。要素のトリミングには、CSSプロパティの「clip-path」を使います。このclip-pathの値を徐々に変化させることでトリミングのアニメーションを実現します。   先ほどと同じような感じですが、今回はfromTo()メソッドでclip-pathの値を変化させていきます。このときに注意したい点が2つあり、まずはプロパティ名がハイフン区切りとなっているので、クオーテーションマークで囲んで文字列として指定するか、「clipPath」のようにキャメルケースで指定する必要があります。もう1つは変化させる値について、通常であれば、0の値は単位なしでも設定できますが、今回のように値を変化させる場合には同じ単位に揃えてあげないと上手く動作しないようです、なので、0の値でも%をつけておきます。

gsap.registerPlugin(ScrollTrigger);
gsap.fromTo('.js-scroll-animation-target',
  { 'clip-path': 'inset(0% 100% 0% 0%)' },
  {
    'clip-path': 'inset(0% 0% 0% 0%)',
    scrollTrigger: {
      trigger: '.js-scroll-animation-trigger', 
      start: 'top top', 
      end: () => `+=${document.querySelector('.js-scroll-animation-target').offsetWidth}`,
      scrub: true, 
      markers: true,
      pin: true, 
      anticipatePin: 1,
      invalidateOnRefresh: true
    }
  }
);

  こちらも固定表示と合わせた動きにすることで、より複雑なアニメーションで見せることができます。セクション内のコンテンツを表示させるときに使ってみたいアイデアですね。上記のコードで作成したサンプルはこちらに用意しています。  

---

  今回もGSAPのScrollTriggerプラグインを使ったスクロールに対応するアニメーションについていくつかサンプルをまとめてみました。自前で実装するとなるとかなり大変ですが、直感的にオプションを指定しながら複雑なアニメーションを実装できるのはとても便利ですね。   （参考にさせて頂いたサイト） GreenSock ScrollTrigger