[React] framer motion useScroll offset

문제

framer motion을 이용해 스크롤 애니메이션을 적용 중, useScroll의 offset을 이용해 딱 100vh만큼의 스크롤까지 감지하고 싶었다.

코드

import { motion, useInView, useScroll, useTransform } from "framer-motion";
import { ReactNode, useRef } from "react";

const LogoText = ({ children }: { children: ReactNode }) => {
  return (
    <span className={"text-primary font-extrabold text-[16vw]"}>
      {children}
    </span>
  );
};

function App() {
  const { scrollYProgress } = useScroll({ offset: ["0vh", "100vh"] });
  const ref = useRef(null);
  const isInView = useInView(ref);
  const x1 = useTransform(scrollYProgress, [0, 0.75], ["15%", "80%"]);
  const x2 = useTransform(scrollYProgress, [0, 0.75], ["10%", "0%"]);
  const opacity = useTransform(scrollYProgress, [0.75, 1], ["100%", "0%"]);

  return (
    <div className={"bg-bg flex flex-col"}>
      <div className={"h-[100vh]"} ref={ref}>
        {isInView && (
          <>
            <motion.div
              style={{ x: x1, opacity }}
              className={"fixed top-1/4 flex"}
            >
              <LogoText>Climb</LogoText>
            </motion.div>
            <motion.div
              style={{ x: x2, opacity }}
              className={"fixed top-1/4 p-[20vw] flex"}
            >
              <LogoText>Balance</LogoText>
            </motion.div>
          </>
        )}
      </div>
      <div className={"h-[400px]"} ref={ref}></div>
      <img src={"./src/assets/climbing.jpg"} />
      <div className={"h-[100rem] w-full"}></div>
    </div>
  );
}

export default App;