サイドバーのアニメーション

以下の動画では、Gsapのmarkersを使用しています。これにより、サイドバーのアニメーションの挙動がわかりやすく表示されています。

function setScrollTrigger(trigger, target) {
  gsap.timeline({
    scrollTrigger: {
　　// スクロールを開始するクラスを指定。ここではtriggerという引数を記述
      trigger,
      start: "top 50%",
      end: "bottom 50%",
      markers: true,
　　　　　　　　　　　　// toggleClassの記述
      toggleClass: {
　　　　　　　　　　　　　　　　// 付与したいクラスを指定
        targets: target,
　　　　　　　　　　　　　　　　// 付与したいクラス名を指定
        className: "is-active",
      },
    },
  });
}

setScrollTrigger(".js-1", ".target-1");

以下の関数は、引数を設定して再利用できるように設定されています。これはscrollTriggerの中で使用することができます。付与したいクラスとクラス名を指定することができます。実際にスクロールして挙動をデベロッパーツールで確認してみましょう。

デベロッパーツールで挙動を確認

CSS

.target-1.is-active {
  background-color: #cce4ff;
}

上記を記述することで、.is-acrive(名前は任意)が付与した際にアニメーションが開始され終了と共にbackground-colorが外れることになります。