반응형에서 gsap 위치 못잡는 이슈

반응형 페이지 작업에 gsap를 사용하는데 많은 이슈가 있었다. 얼마나 많이 수정했는지 모르겠다🥲
모션이 많아서인지 단지 반응형 때문인지 페이지 리사이즈 했을때 새로고침이 없으면 10에 9는 다 위치를 못잡는 문제를 일으켰다.

💡반응형 대응을 도와주는 gsap 제공 이벤트

• ScrollTrigger.refresh()
• ScrollTrigger.saveStyles()

💡 위 이벤트로도 안되는 경우

나는 위 이벤트를 다 사용해봐도 여전히...새로고침하지 않으면 각 요소들이 위치를 잡지 못하는 이슈가 있었고 이때 아래와 같은 코드를 사용했다.

function init() {
  
  gsap.registerPlugin(ScrollTrigger);

  ScrollTrigger.matchMedia({
    "(min-width: 768px)": function() {

      gsap.to(".my-element", {
        opacity: 1,
        x: 100,
        scrollTrigger: {
          trigger: ".my-element",
          start: "top center",
          end: "bottom center",
          scrub: true
        }
      });
    },
    "(max-width: 767px)": function() {

      gsap.to(".my-element", {
        opacity: 1,
        y: 100,
        scrollTrigger: {
          trigger: ".my-element",
          start: "top center",
          end: "bottom center",
          scrub: true
        }
      });
    }
  });


  window.addEventListener("resize", ScrollTrigger.update);
}

init();

window.addEventListener("resize", ScrollTrigger.update)는 리사이즈 이벤트가 발생할때 마다 ScrollTrigger.update()를 호출하는 코드이다. 이렇게 하면, 애니메이션 요소들이 리사이즈 이벤트에 대응하여 자리를 잡을 수 있다고 한다.

이외에 앞서 말헀던 ScrollTrigger.refresh()를 사용해 수동으로 업데이트할 수도 있지만 이 방법은 성능 저하를 유발할 수 있다고 한다.

현재 작업하고 있는 디바이스에서는 마법같이 버그가 사라지고 잘보이는데 다른 디바이스에서도 잘 보이는지 확인해 봐야 할것같다. 제발 이번엔 성공했길🙏🏼

✨ 아 그리고 gsap.set이나 css에서 속성을 정의하는 것보다 fromTo를 사용하는게 훨씬 잘 적용된다