<main style="padding:200vh 0;">
  <div class="area-fixed">
    <div class="item-fixed">固定</div>
  </div>
</main>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
.area-fixed {
  height: 100vh;
  background-color: green;
  .item-fixed {
    color: #fff;
    font-size: 6rem;
  }
}
View Compiled
gsap.to(".item-fixed", {
  x: 100, //x軸を100px移動
  scrollTrigger: {
    trigger: ".area-fixed",
    //この要素が画面に入ったらgsap.toで記述した要素がアニメーションを開始する(トリガー設定)
    //pin:true,の場合はこの要素がendの数値スクロール分固定される
    start: "top top",
    //トリガー要素のどの部分が画面に入ったらアニメーションを発火するか設定
    //top top の場合はトリガー要素が画面に入ったら
    //top center の場合はトリガー要素が画面の中心に入ったら発火
    end: "+=900",
    //アニメーション終了位置を設定。この数値のスクロール量でアニメーションが 0% -> 100% に到達
    pin: true,
    //トリガー要素を固定する場合はtrue
    scrub: true,
    //スクロールとアニメーションを連動させる場合はtrue。数字をセットすることで◯秒遅れでスクロールと連動させる
    markers: true,
    //デバッグ用マーカーを表示する場合はtrue(triggerの位置、アニメーション開始・終了位置を表示可能)
  },
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.