Jump to content
Search Community

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

AmethystKhoa test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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


Link to comment
Share on other sites

  • Solution

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(). 




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? 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...