Currently, I am working on a project that involves Framer Motion and Next.js. In my implementation, I am utilizing the Framer motion useScroll hook to keep track of the user's scroll activity on the page. However, it seems like the scroll tracking functionality is not updating as expected. Despite referring to the framer-motion documentation and following their provided examples, I seem to have missed something crucial in my code. Consequently, I am struggling to pinpoint the issue with my implementation. Any assistance or insight would be greatly appreciated.
Here is a snippet of my code:
const History = () => {
const targetRef = useRef(null);
const { scrollYProgress } = useScroll({
target: targetRef,
});
console.log(scrollYProgress);
const x = useTransform(scrollYProgress, [0, 1], ["1%", "-95%"]);
return (
<div>
<Head>
<title>매니지온 | History</title>
</Head>
<div>
<h3 className="text-[2.3rem] lg:text-[2.625rem] font-[700] text-center mt-[5rem] w-full tracking-tighter">
History
</h3>
<p className="text-[1rem] md:text-[1.8rem] lg:text-[2.0625rem] text-[#1f1f1f] mx-auto mt-[1rem] mb-[7rem] xl:mt-[5rem] xl:mb-[9.375rem] ">
Title Main
<span
className="bg bg-no-repeat bg-center "
style={{
backgroundImage: "url(/images/sub/gr-underline02.png)",
backgroundSize: "100%",
backgroundPosition: "bottom",
}}
>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam
voluptas illo recusandae eaque reiciendis. Illum repellendus harum
dicta maxime placeat reiciendis. Dolore?
</span>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate
facilis officia ut!
</p>
</div>
<div ref={targetRef} className="relative h-[300vh] bg-neutral-900">
<p className="absolute top-[10%] font-[700] left-6 md:hidden">
<ArrowBackIcon /> Swipe Left
</p>
<div className="sticky top-0 flex h-screen items-center overflow-hidden">
<motion.div style={{ x }} className="flex gap-4">
{cards.map((card) => {
return <Card card={card} key={card.id} />;
})}
</motion.div>
</div>
</div>
<div className="h-[10vh] bg-red-500">Footer</div>
</div>
);
};
Repository: For more details, visit this git repository
I am attempting to utilize useScroll along with useTransform to create a horizontally scrollable container similar to this Sample