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.
Section disappears when top reaches top. ScrollTrigger, .pin
in GSAP
Posted
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.