[react] framer motion 을 이용한 네비게이션 색상 변경 (스크롤 이벤트)

스크롤 위치에 따라 배경 색상이 변하는 애니메이션

1. useTransfrom 사용하는 방법

useTransform()은 한 값 범위에서 다른 값 범위로 매핑하여 다른 MotionValue의 output을 변환하는 MotionValue를 만든다.

예시)

const x = useMotionValue(0)
const input = [-200, 0, 200]
const output = [0, 1, 0]
const opacity = useTransform(x, input, output)

x값을 [-200, 0, 200] 에서 [0, 1, 0] 으로 변경해준다.

이를 이용해 쉽게(?) 스크롤 이벤트를 적용할 수 있다.

const { scrollY } = useScroll()

useScroll() 을 이용하면
scrollY, scrollYProgress, scrollX, scrollXProgress 값을 받아 올 수 있다.
뒤에 progress가 붙은 값들은 100분율로 값을 변환 시켜준다.

둘 중 편한걸 쓰면 될 거 같다. 여기서는 scrollY 를 사용함.

 const backgroundColor = useTransform(scrollY, [0, 80], ["rgba(0,0,0,0)", "rgba(0,0,0,1)"])

scrollY 값이 0 일때는 rgba(0,0,0,0),
scrollY 값이 80 일때는 rgba (0,0,0,1) 으로 변경해줬다.

<motion.nav style={{backgroundColor}} > </motion.nav>

이렇게 스타일에 지정해주면 된다. 끗

2. useAnimation 사용하는 방법

useAnimation() 사용하면 시작 및 중지 메서드가 있는 AnimationControls을 만들 수 있다.

const scrollAntmation = useAnimation()

useMotionValueEvent(scrollY, "change", (latest) => {
 if (latest > 80) {
 scrollAntmation.start({ backgroundColor: "rgba(0,0,0,1)" })
} else {
 scrollAntmation.start({ backgroundColor: "rgba(0,0,0,0)" })
}
})

 <motion.nav animate={scrollAntmation} initial={{ backgroundColor: "rgba(0,0,0,0)" }}>

useAnimation을 이용해서 scroll 컨트롤을 만들어준다.
여기서 useMotionValueEvent() 라는 framer motion에서 제공해주는 hook을 사용하면된다.

scroll 값이 80을 초과하면 애니메이션이 작동하게 된다. (backgroundColor: "rgba(0,0,0,1)

네비게이션 엘리먼트에 animate 속성 안에 넣어줘야한다.
initial은 초기값을 넣어주면 된다.