GSAP 스크롤 후 페이드인 처리

이미지를 클릭했을 때, 해당 이미지가 화면 중앙에 오도록 스크롤하고, 그 뒤 부드럽게 페이드인하는 기능을 만들고 싶었다.
처음에는 window.scrollTo({ behavior: "smooth" }) 정도면 되지 않을까 했는데, smooth 스크롤이 브라우저 기본 기능이라서 지속 시간을 세밀하게 제어하기가 쉽지 않았다.

그래서 GSAP의 ScrollToPlugin을 사용하기로 했다. 이걸 쓰면 원하는 시간(0.2초, 0.3초 등)을 직접 지정할 수 있었다. 그러나 또 다른 고민은 사용자에게 스크롤 애니메이션 과정을 아예 안 보이게 하고 싶다는 것이었다. 그래서 스크롤은 즉시 이동(애니메이션 없음)으로 처리하고, 10ms 정도 뒤에 페이드인 애니메이션을 실행했다.

 

 

간단한 예시 코드

Home.tsx (일부 발췌)

useLayoutEffect(() => {
  if (selectedImageRef.current) {
    // 즉시 스크롤 위치 설정
    gsap.set(window, {
      scrollTo: { y: computedOffset, autoKill: false }
    });

    // 살짝 뒤에 페이드인
    const timer = setTimeout(() => {
      setZoomReady(true);
    }, 10);

    return () => clearTimeout(timer);
  }
}, [selectedImageRef]);

 

 

 

회고

애니메이션 순서를 어떻게 잡을지, DOM이 언제 렌더되는지 등 타이밍 문제가 항상 까다롭다는 걸 다시 한번 느꼈다. requestAnimationFrame이나 setTimeout을 적절히 조절해줘야 했다. 그래도 GSAP ScrollToPlugin 덕분에 부드러운 스크롤 제어와 시간 제어가 편했다. 스크롤 후 fade in 같은 패턴을 또 만들 일이 있다면, 이번 경험을 잘 참고해서 바로 적용할 수 있을 것 같다.