Framer-Motion useScroll not working on component in Vite project

Question

I've been trying to troubleshoot an issue I'm having with animating the opacity of my component based on the scrollYProgress. Currently the opacity stays at 0 and isn't updating to a higher value.

When I console.log the scrollYProgress it gives me a "MotionValue" but doesn't specify the value.

Here is my console.log result:

Scroll Y Progress: 
MotionValue
canTrackVelocity
: 
true
current
: 
0
events
: 
{change: SubscriptionManager, renderRequest: SubscriptionManager}
hasAnimated
: 
false
lastUpdated
: 
343058.2999999989
owner
: 
undefined
prev
: 
0
scheduleVelocityCheck
: 
() => frame.postRender(this.velocityCheck)
timeDelta
: 
4.099999999627471
updateAndNotify
: 
(v, render = true) => {…}
velocityCheck
: 
({ timestamp }) => {…}
version
: 
"10.16.12"
[[Prototype]]
: 
Object

Here is the code for my parent component Projects.jsx:

import React, { useEffect, useRef } from 'react'
import './index.css'
import Project from './components/Project'
import projectsData from '../../../data/projectsData'

const Projects = () => {

    return (
        <section 
            className="content-projects"
            id='projects'
        >
            <h1>Projects</h1>
            {
                projectsData.map((project, index) => (
                    <Project
                        key={index}
                        {...project}
                    />
                ))
            }
        </section>
    )
}

export default Projects

And here is the code for my Project.jsx child component:

import React, { useRef } from 'react'
import { motion, useScroll } from 'framer-motion'

const Project = ({ name, description, imageUrl, tech, link }) => {

    const ref = useRef(null)
    const { scrollYProgress } = useScroll({
        target: ref,
        offset: ["0 1", "1.33 1"],
    })
    return (
        <motion.div
            ref={ref}
            className='individual-project-container'
            style={{ opacity: scrollYProgress }}
        >
            <div className='project-left-slice'>
                <h2>{name}</h2>
                <p>{description}</p>
                <ul>
                    {
                        tech.map((tech, index) => (
                            <li
                                
                                key={index}
                            >
                                <p>{tech}</p>
                            </li>
                        ))
                    }
                </ul>
            </div>
            <div className='project-right-slice'>
            <a href={link} target='_blank'>
                <motion.img
                    src={imageUrl} 
                    alt={`${name} Project Image`} 
                    whileHover={{ scale: 1.03, x: -20, rotate: -1 }}
                    transition={{ ease: 'easeInOut' }}
                />
            </a>
            </div>
        </motion.div>
    );
}
 
export default Project;

I've tried moving the animation to the parent component but the issue was the exact same when moved to the parent component's section element. I've also heard that framer-motion determines the scrollY based on the height set, so I tested entering in exactly pixel amounts on the content-projects class as well as the individual-project-container class ie. 1200px, etc. but it did not resolve the issue.

Answer 1

For those who may come across this in the future. The issue was that I had overflow-x: hidden; on my html, body in my global.css. Removed that and it is now working.