react framer-motion 스크롤 시 가로로 이동하는 이미지

const AboutFlow = () => {
  const { scrollYProgress } = useScroll();
  const x = useTransform(scrollYProgress, [0, 1], ["-200%", "200%"]);

  return (
    <Container>
      <First>
        <h1>
          HELLO, WORLD
        </h1>
      </First>
      <Two>
        <motion.p style={{ x }}>
          <img src="" />
        </motion.p>
      </Two>
      <Three>
        <h1>
          ghost
        </h1>
      </Three>
    </Container>
  )
}
export default AboutFlow;

scrollYProgress : 0 ~ 1 사이의 수직 스크롤 (가장 상단 0, 가장 하단 1)
styled-components는 별로 중요한 게 없으니 첨부 하지 않겠다.

어느정도 왔을 때 움직이게 하고 싶다면

  const x = useTransform(scrollYProgress, [0.6, 1], ["-100%", "200%"]);