DaCodeWiz

I'm working on a project currently with Vite. I'm using scrollTrigger on a component so that it animates a scale on a video in the background while also animating in some text in the foreground. I originally used Gatsby with the project and was able to set the #root { position: fixed; } in my index.scss but now that i'm Vite I can't do that otherwise i'm unable to scroll altogether. I don't know think it's worth the time of completely recreating three sections in codePen to achieve the same effect but I will post screenshots with the code since i'm fairly certain it's just a positioning issue with my css. This is the Reel.jsx Below is the index.scss Below this is the Reel.scss If the images and everything are too much, I understand and feel free to remove the post. Otherwise, any help is super appreciated since this has been buggy for hours now.