useScroll 정의

• useMotionValue 와 같이 동작하지만 스크롤에 관련한 정보를 담당합니다.
• 리렌더링 발생시키지 않습니다

useScroll Props

• scrollY : 픽셀 단위인 수직 스크롤

• scrollYProgress : 0 과 1 사이 수로 표현되는 수직 스크롤
  • 대부분의 경우에 사용

useScroll 예시

function App() {
  const x = useMotionValue(0);
  const rotateZ = useTransform(x, [-800, 800], [-360, 360]);
  const gradient = useTransform(
    x,
    [-800, 800],
    [
      "linear-gradient(135deg, rgb(0, 210, 238), rgb(0, 83, 238))",
      "linear-gradient(135deg, rgb(0, 238, 154), rgb(238, 178, 0))",
    ]
  );
  const { scrollYProgress } = useScroll();
  const scale = useTransform(scrollYProgress, [0, 1], [0.1, 2]);
  return (
    <Wrapper style={{ background: gradient }}>
      <Box style={{ x, rotateZ, scale }} drag="x" dragSnapToOrigin />
    </Wrapper>
  );
}

참조

Framer Motion Docs
리액트 마스터클래스, 노마드코더