.space {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  font-size: 3rem;
  font-weight: bold;
}
.section1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  height: 100vh;
  background-color: lightblue;
}
.box1 {
  width: 200px;
  height: 200px;
  background: lightcoral;
}
.section2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  height: 100vh;
  background-color: lightpink;
}
.box2 {
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 50%;
}

gsap.registerPlugin(ScrollTrigger);

gsap.to(".box1", {
  x: 400,
  y: 400,
  backgroundColor: "blue",
  duration: 2,
  scrollTrigger: {
    trigger: ".section1", // 객체 기준 범위
    start: "0 30%", // 시작 위치
    end: "100% 60%", // 끝 위치
    scrub: true, // 스크롤 속도에 따라 애니메이션 속도 조절
    // markers: true, // 개발 가이드선
  },
});

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".section2", // 객체 기준 범위
    start: "0 0", // 시작 위치
    end: "+=400", // 끝 위치
    scrub: 0.7, // 스크롤 속도에 따라 애니메이션 속도 조절
    markers: true, // 개발 가이드선
    pin: true,
  },
});

tl.to(".box2", {
  y: 200,
  duration: 2,
})
  .to(".box2", {
  x: 200,
  duration: 2,
})
  .to(".box2", {
  rotation: 45,
  scale: 2,
});