스크롤 위치에 따라서 특정 태그 보이게 / 안보이게 구현하기

이런 식으로 첫 화면을 벗어나면 목차가 보이고, 첫 화면에서는 목차가 보이지 않도록 애니메이션을 주고 싶었습니다. 저는 GSAP의 ScrollTrigger를 활용하였습니다.

useLayoutEffect(() => {
  gsap.registerPlugin(ScrollTrigger);
  gsap.to(tableOfContentRef.current, {
    scrollTrigger: {
      trigger: document.documentElement,
      start: 0,
      end: window.innerHeight,
      onLeave: () => {
        gsap.to(tableOfContentRef.current, {
          scale: 1,
          duration: 0.25,
          ease: 'power1.out',
        });
      },
      onEnterBack: () => {
        gsap.to(tableOfContentRef.current, {
          scale: 0,
          duration: 0.25,
          ease: 'power1.out',
        });
      },
    },
  });
}, []);

애니메이션 관련 라이브러리

• GSAP
• Framer Motion
• locomotive-scroll : 뷰포트의 요소 감지 & scroll을 자연스럽게 구현

첫 화면이 지나면, 목차가 보이게 하고 싶어 목차에 넘겨주는 ref값인 tableOfContentRef를 넘겨주었습니다.