IntersectionObserver를 활용한 스크롤 애니메이션 구현

구현 원리

• IntersectionObserver로 애니메이션을 구현하려는 타겟이 화면에 들어오면 애니메이션을 실행합니다.

  IntersectionObserver가 등장하기 이전에는 scroll event를 사용하여 브라우저나 html 요소의 높이를 측정하여 설정한 높이에 따라 애니메이션을 실행할 수 있게 구현하였다고 합니다. 하지만 실행 환경에 따른 높이가 다르고, 호환성의 문제도 있으며, scroll event의 경우 스크롤을 움직일 때마다 픽셀 단위로 변화를 감지하기 때문에 엄청난 요청을 보내게 됩니다.

구현 내용

• React, Typescript, TailwindCSS를 사용하여 구현하였습니다.

const showRef = useRef<HTMLDivElement>(null);

• 감지하고 싶은 대상을 useRef로 지정합니다.

const observer = new IntersectionObserver(() => {});

• new IntersectionObserver 함수를 변수에 할당합니다.
• IntersectionObserver 함수 안에는 다른 익명 함수를 인자로 받습니다.

  useEffect(() => {
    if (showRef.current !== null) {
      observer.observe(showRef.current);
    }
  }, [showRef.current]);

• observer.observe() 함수에 사용하여 감지하고자 하는 대상을 인자로 넣습니다.

const observer = new IntersectionObserver((entries) => {
    const target = entries[0].target as HTMLElement;

    if (entries[0].isIntersecting) {
      target.style.opacity = '1';
      target.style.transform = 'translateY(-10px)';
    } else {
      target.style.opacity = '0';
      target.style.transform = 'translateY(10px)';
    }
  });

• IntersectionObserver 안에 익명 함수에 entries라는 매개변수를 설정하고 entries[0].target을 target 변수에 할당합니다.
• target 변수는 useRef로 지정한 HTML 요소입니다.
• isIntersecting은 entries[0]이 화면에 감지되는 것을 확인할 수 있게 해줍니다.
• 조건문을 사용하여 entries[0]이 감지되었을 때 HTML 요소에 CSS 요소를 지정해줍니다.
• else 문의 경우 화면에 사라졌을 때 지정할 CSS를 설정합니다.