framer motion

[55555-Jyeon]

framer motion official website

⬇️ install

$ npm install framer-motion

설치 후 바로 import 해서 사용해주면 된다. framer의 useScroll hook함수는 react에서 intersectionObserver API와 동일한 역할을 수행한다. 공식 문서에서 더 자세한 내용 확인하기 → more about useScroll

  const { scrollYProgress } = useScroll({
    target: element, // 관찰할 대상 설정,
    container:   , // 관찰 범위(?) 지정, 명시하지 않을 경우 window가 기준
    offset: ["start end", "start start"], // 2개의 교차점 필요 ["관찰 대상의 시작 지점과 container의 끝 지점","관찰 대상의 시작 지점 container의 시작 지점"]
  });

console로 값을 찍어보면 아래와 같이 잘 동작하는 것을 확인해 볼 수 있다.

[55555-Jyeon]

offset의 값은 꼭 start와 end일 필요는 없다.

    offset: ["start 0.9", "start 0.25"],

container 값이 없을 경우, window라는 가정에서 위와 같이 작성돼 있다면 "start 90%" → window bottom에 padding 10%를 준 것과 동일, 이전에는 100vh 였다면 이젠 90vh가 된 것 "start 0.25" → window top에 padding을 준 것과 동일