<div class="box_wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.box_wrap{
  margin: 300px 100px;
}

.box{
  width: 150px;
  height: 150px;
  background: #333;
  color:#fff;
  font-size:1.6rem;
  display: flex;
  align-items:center;
  justify-content:center;
  
  + .box{
    margin-top: 30px;
  }
}

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

gsap.utils.toArray(".box").forEach((target) => {
  
  gsap.timeline({
      scrollTrigger: {
      trigger: target,
      start: "top center",
      end: "bottom center",
      toggleActions: "play none none reverse",
      markers: true,
    }
  })
  .to(target,{
    rotate: 90,
  })
  .to(target,{
    background: "#c3c3c3",
  })
  
});