[FRAMER MOTION] useScroll

학습일 : 2023. 05. 14

---

useScroll을 사용하게 되면
스크롤의 MotionValue를 얻을 수 있다.


사용하기 위해 useScroll을 import 해준다.

import { useScroll } from "framer-motion";

useScroll이 넘겨주는 두가지는
1. scrollX, scrollY
2. scrollXProgress, scrollYProgress

---

스크롤시 배경색 (서서히) 변화시키기

scrollY는 픽셀 단위인 수직 스크롤이 될 것이다. (픽셀 단위로 스크롤 간격을 줄것임.)
scrollYProgress는 0과 1사이 값이고 (0은 끝이고 1은 시작. 반대일수도 있음)

스크롤 위치에 따라 서서히 배경색이 바뀜

import { styled } from "styled-components";
import {
  motion,
  useMotionValue,
  useMotionValueEvent,
  useScroll,
  useTransform,
} from "framer-motion";

// style
const Wrapper = styled(motion.div)`
  height: 500vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

// 박스
const Box = styled(motion.div)`
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

function App() {
  const x = useMotionValue(0);

  const rotateZ = useTransform(x, [-800, 800], [-360, 360]);

  const gradient = useTransform(
    x,
    [-800, 800],
    [
      "linear-gradient(135deg, rgb(255, 255, 255), rgb(1, 10, 29))",
      "linear-gradient(135deg, rgb(201, 207, 21), #060c47",
    ]
  );

  // useScroll
  const { scrollY, scrollYProgress } = useScroll();

  useMotionValueEvent(scrollY, "change", (latest) => {
    console.log("scrollY : ", latest);
  });
  useMotionValueEvent(scrollYProgress, "change", (latest) => {
    console.log("scrollYProgress : ", latest);
  });

  return (
    <Wrapper style={{ background: gradient }}>
      <Box style={{ x, rotateZ: rotateZ }} drag="x" dragSnapToOrigin></Box>
    </Wrapper>
  );
}
export default App;

실행결과

 

---

스크롤시 박스 크기 변화시키기

 

import { styled } from "styled-components";
import {
  motion,
  useMotionValue,
  useMotionValueEvent,
  useScroll,
  useTransform,
} from "framer-motion";

// style
const Wrapper = styled(motion.div)`
  height: 200vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

// 박스
const Box = styled(motion.div)`
  width: 200px;
  height: 200px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 40px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.06);
`;

function App() {
  const x = useMotionValue(0);

  const rotateZ = useTransform(x, [-800, 800], [-360, 360]);

  const gradient = useTransform(
    x,
    [-800, 800],
    [
      "linear-gradient(135deg, rgb(255, 255, 255), rgb(1, 10, 29))",
      "linear-gradient(135deg, rgb(201, 207, 21), #060c47",
    ]
  );

  // useScroll
  const { scrollYProgress } = useScroll();
  const scale = useTransform(scrollYProgress, [0, 1], [1, 5]);

  return (
    <Wrapper style={{ background: gradient }}>
      <Box
        style={{ x, rotateZ: rotateZ, scale: scale }}
        drag="x"
        dragSnapToOrigin
      ></Box>
    </Wrapper>
  );
}
export default App;

실행결과