スクロールに応じて画像が登場するアニメーション【GSAPで簡単に】

<div class="images">
  <div class="images__inner">
      <div class="images__flex">
          <div class="images__grid">
              <img src="https://picsum.photos/200/500" alt="">
              <img src="https://picsum.photos/300/300" alt="">
              <img src="https://picsum.photos/300/200" alt="">
              <img src="https://picsum.photos/500/500" alt="">
              <img src="https://picsum.photos/200/200" alt="">
              <img src="https://picsum.photos/200/300" alt="">
          </div>
          <div class="images__grid">
              <img src="https://picsum.photos/200/500" alt="">
              <img src="https://picsum.photos/300/300" alt="">
              <img src="https://picsum.photos/300/200" alt="">
              <img src="https://picsum.photos/500/500" alt="">
              <img src="https://picsum.photos/200/200" alt="">
              <img src="https://picsum.photos/200/300" alt="">
          </div>
      </div>
  </div>
</div>

*{
    padding: 0;
    margin: 0;
}
.images{
    width: calc(100vw - calc(100vw - 100%));// スクロールバーを考慮して横幅設定
    padding: 100vh 0 50vh;
    overflow: hidden;// 画像たちがはみ出た分を非表示
    &__inner{
        width: fit-content;
    }
    &__flex{
        width: fit-content;
        display: flex;
        /* animation 右側に配置*/
        transform: translateX(200px);
    }
    &__grid{
        width: fit-content;
        margin: 0 auto;
        display: grid;
        gap: 20px;
        grid-template-columns: 200px 300px 500px 200px;
        grid-template-rows: 200px 100px 200px;
        padding: 0 10px;
        img{
            display: block;
            border-radius: 20px;
            overflow: hidden;
            width: 100%;
            height: 100%;

            /* animation 予め透明&大きさ変更 */
            opacity: 0;
            visibility: hidden;
            transform: scale(0.7);
        }
        img:nth-of-type(1){
            grid-column: 1/2;
            grid-row: 1/4;
        }
        img:nth-of-type(2){
            grid-column: 2/3;
            grid-row: 1/3;
        }
        img:nth-of-type(3){
            grid-column: 2/3;
            grid-row: 3/4;
        }
        img:nth-of-type(4){
            grid-column: 3/4;
            grid-row: 1/4;
        }
        img:nth-of-type(5){
            grid-column: 4/5;
            grid-row: 1/2;
        }
        img:nth-of-type(6){
            grid-column: 4/5;
            grid-row: 2/4;
        }
    }
}

/* animation 予め透明&大きさ変更 */
opacity: 0;
visibility: hidden;
transform: scale(0.7);

window.addEventListener('DOMContentLoaded', function () {
    /* 透明な状態から大きさを変えながら出現*/
    gsap.to('.images__grid img',{autoAlpha:1,scale:1,scrollTrigger:{
            trigger:'.images__flex',
            start:'top 60%',
            toggleActions:'play none none reverse'
        }
    })
    /* トリガー位置に到達したら画像を囲む要素が元の位置に戻る */
    gsap.to('.images__flex',{x:0,scrollTrigger:{
            trigger:'.images__flex',
            start:'top 60%',
            toggleActions:'play none none reverse'
        }
    })
    /* スクロールに応じて画像を囲む要素が左に移動 */
    gsap.to('.images__inner',{x:-200,scrollTrigger:{
            trigger:'.images__flex',
            start:'top 60%',
            end:'bottom top',
            scrub:true,
            toggleActions:'play none none reverse'
        }
    })
})