Framer-Motion scroll 애니메이션 다루기

NetFlix클론을 하다가 Navbar에 일정 스크롤을 내리면 불투명도를 주고 싶었다.

 

수 많은 방법이 있지만 그 중에서 Framer-Motion을 통해서

스크롤 애니메이션으로 처리할 수 있는 방법을 선택하였다.

 

const { scrollY } = useScroll();
  const bg = useTransform(
    scrollY,
    [0, 80],
    ['rgba(0,0,0,1)', 'rgba(0,0,0,0.5)']
  );

 scrollY : 사용자의 스크롤 동작에 따라 동적으로 업데이트되는 스크롤 위치를 나타낸다.

[0, 80] : 입력 범위로, 여기서 0은 스크롤의 시작을 나타내고, 80은 스크롤 범위의 끝을 나타낸다.

             이 범위는 스크롤 위치에 따라 배경 색상의 전환을 결정하는데 사용된다.

['rgba(0,0,0,1)', 'rgba(0,0,0,0.5)'] : 스크롤 위치에 따른 배경 색상의 전환을 정의하는 배열이다.

스크롤 위치가 0일 때는 완전히 불투명한 검정색 (rgba(0,0,0,1)이고,

스크롤 위치가 80일 때는 반투명한 검정색 (rgba(0,0,0,0.5))으로 전환 된다.