ScrollTrigger/Gsap automatically adds translateY in vite/create-react-app

[AmethystKhoa]

Hello there, wish you have a good day,

I tried to transfer the project using Gatsby JS (this one is functioning well) into Vite, however, the result is not as expected, i got the issue that the trigger element .container had the value of transform: (0px, 3500px)  ,  i tried to comment the end value -> the translateY value will turn into screen height transform: (0px, *screen height*px)

 

Here is the minimal demo for it

https://codesandbox.io/s/modest-rhodes-ew5wgm?file=/src/App.jsx

[GreenSock]

It looks like you're getting bitten by the React 18 double-invoke of useEffect()/useLayoutEffect(), and since you're not doing proper cleanup, you're creating duplicate/competing ScrollTriggers/animations. 

 

All you need to do is return a cleanup function that calls mm.revert(). 

 

https://codesandbox.io/s/inspiring-mcclintock-z6m9io?file=/src/App.jsx

 

I was a bit confused about why you're using a matchMedia("(min-width: 1px)") - wouldn't that ALWAYS be true? I mean it's fine if you want to do that...it just seemed a little odd to me. 

 

If you don't use matchMedia(), you could use gsap.context() (which is what gsap.matchMedia() uses under the hood) - it's your new best friend in React. 

 

I'd highly recommend reading this article:

 

Does that help? 

[AmethystKhoa]

Thanks so much for your help, it works perfectly for me