【GSAP】追従サイドメニューを実装する

はじめに

GSAPのScrollTriggerのピン留めで追従サイドメニューを実装しました。position:stickyでの実装が難しいデザインの場合、GSAPを使用すれば比較的シンプルに実装できると感じました。

実装サンプル

ポイント

◯ 2カラムのうちサイドメニューが追従するエリアを空けておく

予めサイドメニューの通り道を空けておき、position:absolute;で固定しておきます。

◯ 固定したい要素をスクロールトリガーの「pin: true」で固定

// プラグインの登録
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
  pin: true, //トリガー要素を固定する
  trigger: "#js-sidemenu",
  startTrigger:"#sidemenu-sticky-start",
  start:"top-=50px top",
  endTrigger:"#sidemenu-sticky-end",
  end:"bottom-=175px top",
 // サイドメニューの高さ125px+start位置の50px=1７５px
  markers: "true",
});

ポイントは、endTriggerで解除したい要素を指定します。
サンプルでは、コンテンツエリアとサイドメニューの底辺が合う位置でスクロールを解除したかったため、

• endTriggerをコンテンツエリア
• endをサイドメニューの高さ＋スタートをずらした分の値

に指定しました。

  endTrigger:"#sidemenu-sticky-end",
  end:"bottom-=175px top",
 // サイドメニューの高さ125px+start位置の50px=1７５px
});