body {
  color: #ffffff;
  background: #000000;
  height: 170vh;
}

h1 {
  margin-bottom: 100vh;
}

h2 {
  text-align: right;
  margin-top: 100px;
}

.square_block {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.square {
  background: #ffffff;
  width: 50px;
  height: 50px;
}

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

gsap.from(".square", {
  x: 100,
  y: 100,
  autoAlpha: 0, //透明度の調整
  stagger: {
    each: 0.1
  },
  scrollTrigger: {
      trigger: ".square_block"
      //  対象物の指定
  }
});