【ScrollTrigger】スクロールするとふわっと浮き出るスクロールアニメーション

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.1/ScrollTrigger.min.js"></script>

<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>

body {
  background-color: black;
  min-height: 100vh;
}
 
.top {
  width: 50%;
  height: 250px;
  background-color: red;
  margin: 500px auto 500px;
}
 
.middle {
  width: 50%;
  height: 250px;
  background-color: blue;
  margin: 500px auto 500px;
}
 
.bottom {
  width: 50%;
  height: 250px;
  background-color: green;
  margin: 500px auto 500px;
}

gsap.fromTo(
  ".middle", //アニメーションしたい要素
  {
    //アニメーション前の記入
    y: 20, //アニメーション開始前の位置
    autoAlpha: 0, //アニメーション開始前の状態
  },
  {
    //アニメーション後の記入
    y: 0, //アニメーション後の位置
    autoAlpha: 1, //アニメーション後の状態
    scrollTrigger: {
      trigger: ".top", //アニメーションが始まるトリガーとなる要素
      start: "bottom top", //アニメーションが始まる位置を指定
    },
  },
)
 
gsap.fromTo(
  ".bottom", //アニメーションしたい要素
  {
    //アニメーション前の記入
    y: 20, //アニメーション開始前の位置
    autoAlpha: 0, //アニメーション開始前の状態
  },
  {
    //アニメーション後の記入
    y: 0, //アニメーション後の位置
    autoAlpha: 1, //アニメーション後の状態
    scrollTrigger: {
      trigger: ".middle", //アニメーションが始まるトリガーとなる要素
      start: "bottom top", //アニメーションが始まる位置を指定
    },
  },
)

scrollTrigger: {
  trigger: ".middle", //アニメーションが始まるトリガーとなる要素
  start: "bottom top", //アニメーションが始まる位置を指定
  markers: true, //マーカーの表示
},