Framer motion onscroll animation using useTransform

Question

import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import productData from "../../data/productsData.json";
import sec3 from "../images/sec3.png";

function HeroList() {
  const ListRef = useRef(null);
  const { scrollYListProgress } = useScroll({
    target: ListRef,
    offset: ["0 1", "1.2 1"],
  });
  const listX = useTransform(scrollYListProgress, [0, 1], ["-200%", "100%"]);

  return (
    <section
      className="w-full h-auto min-h-screen relative px-7 sm:px-10 lg:px-20 py-5 "
      ref={ListRef}
    > 

So this is my code, the listX definition line returns this error:

Cannot read properties of undefined (reading 'get')
TypeError: Cannot read properties of undefined (reading 'get')
    at http://localhost:3000/static/js/bundle.js:77619:29
    at useCombineMotionValues (http://localhost:3000/static/js/bundle.js:77398:87)
    at useListTransform (http://localhost:3000/static/js/bundle.js:77615:89)
    at useTransform (http://localhost:3000/static/js/bundle.js:77608:72)
    at HeroList (http://localhost:3000/main.c6d6b98bdc2ac163c567.hot-update.js:42:76)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:37140:22)

Keep in mind, in the parent component, i used the exact same code to add a similar animation. i just changed the variables' names and it's still working, what can be the cause of this error, Thank you in advance <3

Answer 1

You have a typo on this line:

const { scrollYListProgress } = useScroll({

useScroll doesn't return property scrollYListProgress , it returns scrollYProgress instead. You need to either use that name or rename it like this:

const { scrollYProgress: scrollYListProgress } = useScroll({