스크롤 방향과 진입/이탈 상태에 따른 액션 제어 (toggleActions)

🔄 다시 올라갈 때는 어떻게 할까?

요소가 화면에 나타나면 애니메이션이 재생(Play)되었습니다. 스크롤을 더 내려서 요소가 화면 밖으로 벗어나면 어떻게 될까요? 스크롤을 다시 올려서 요소가 보일 때는요?

toggleActions는 이 4가지 진입/이탈 상태(onEnter, onLeave, onEnterBack, onLeaveBack)에 대해 각각 "play", "pause", "resume", "reverse", "restart", "none" 중 어떤 행동을 취할지 문자열로 제어합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<style>
.space { height: 100vh; }
.box { width: 100px; height: 100px; background: #eab308; margin: 0 auto; }
</style>

<div class="space"></div>
<div class="box"></div>
<div class="space"></div>

<script>
gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  scale: 2,
  rotation: 180,
  duration: 1,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "bottom 20%",
    // 순서: 진입(내릴때) 벗어남(내릴때) 다시진입(올릴때) 다시벗어남(올릴때)
    toggleActions: "play pause reverse reset",
    markers: true
  }
});
</script>

실행 결과