GSAP을 사용하면서 리사이징 시 애니메이션 값 재할당에 대해 질문드립니다.

Question

const end = document.querySelector(".last").getBoundingClientRect().left; 위 코드와 같이 요소의 특정 값을 사용하여 gsap 애니메이션을 사용할 경우 resize 이벤트 시 정상적으로 동작하는 케이스가 종종 있는데 리사이즈 이벤트가 발생할 때마다 addEventListener를 통해 gsap 애니메이션 코드를 모두 다시 호출하여 값을 재할당하는 방법밖에 없을까요? 리사이징에 대비하여 애니메이션 값을 동적으로 업데이트할 수 있는 더 효율적인 방법이나 권장되는 접근 방식이 있는지 질문드립니다.

범쌤 · Answer

안녕하세요 보르코님 😀

DOM 객체에 속성은 GSAP이 관리하는 대상이 아닌 Javascript 자체의 처리 결과이기 때문에
직접 가져올 경우 이벤트를 사용해 업데이트를 해줘야 합니다.

DOM 객체를 GSAP으로 반응성을 직접 제어하고자 한다면


gsap.to(elem,{
  x:()=>{
      // 콜백 사용
  }
})

속성에 콜백 함수를 연결하여 사용하는 방법이 있습니다.

콜백 방식을 사용하면 gsap이 업데이트 될 때마다 값을 새롭게 계산하기 때문에 보다 편하게 애니메이션 제어가 가능합니다.

Q. 스크롤을 중간으로 내렸을 때처럼 애니메이션이 중간정도 진행됬을 때와 같은 경우를 처리하는 방법이 따로 있는지도 궁금합니다.

이 부분에 대해선 제가 제대로 이해하지 못해 답변을 드리기 어렵습니다 ㅠ^ㅠ

감사합니다 :)

보르코 · Answer

만약 addEventListener를 통하여 gsap 객체를 다시 생성하는 경우 밖에 없다면
스크롤을 중간으로 내렸을 때처럼 애니메이션이 중간정도 진행됬을 때와 같은 경우를 처리하는 방법이 따로 있는지도 궁금합니다.

인프런 커뮤니티 질문&답변

GSAP을 사용하면서 리사이징 시 애니메이션 값 재할당에 대해 질문드립니다.