GreenSock Posted June 1, 2022 Share Posted June 1, 2022 If you'd like some help, please isolate the issue in a brand new, SUPER simple demo. There's just way too much going on in what you've shared in codesandbox and it takes forever to build. It's not even displaying anything for me. Sometimes it crashes the browser during the build process. The simpler your demo, the greater your chances of getting a good answer here Don't forget to register the ScrollSmoother plugin too. I'm just curious - if you use a .to() tween instead of a .from() tween (regardless of the values), does it work? Is it ONLY the .from() that won't work? Link to comment Share on other sites More sharing options...
Kovsky Posted June 1, 2022 Author Share Posted June 1, 2022 Ok last try for me, it's the smallest demo i can provide --> https://codesandbox.io/s/nifty-waterfall-6ig9mn?file=/src/features/home/components/SectionPresentation/index.tsx No Redux, no Styled Components, no GraphQl, just 2 classic components and a layout. I hope it is not too much code. Maybe i should stop try to use Gsap with React ? Quote I'm just curious - if you use a .to() tween instead of a .from() tween (regardless of the values), does it work? Is it ONLY the .from() that won't work? i've tried this 10 times since you first mentionned it few days ago Quote Don't forget to register the ScrollSmoother plugin too. it's done thank you. Thank you for the help. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2022 Share Posted June 2, 2022 Sorry, I have tried about 10 times and the sandbox just won't run. "Bad gateway" errors sometimes, or "The path passed to gatsby-source-filesystem does not exist on your file system" errors. Takes forever to attempt to compile too. Sorry, no dice. I did notice that you were importing gsap from "gsap-trial" (regular module) but all the other plugins you were loading from the /dist/ directory (UMD files), like "gsap-trial/dist/ScrollTrigger". I would definitely recommend being consistent with those, so import gsap from "gsap-trial/dist/gsap". As an experiment, I'd recommend putting your code into a setTimout() that waits a second or so before executing so that you're absolutely POSITIVE that the entire page contents exist when ScrollTrigger does its measuring. I'm just wondering if your code is running when the page isn't fully rendered, throwing off the start/end positions. As another experiment, I'd console.log(yourTween.scrollTrigger.start, yourTween.scrollTrigger.end) and see if those values change when you refresh the page ABOVE versus BELOW the start. 1 Link to comment Share on other sites More sharing options...
Kovsky Posted June 2, 2022 Author Share Posted June 2, 2022 thank you for your time. It's ok to get the 502 badgateway you need to choose the tab with the 8000 port but the most important part, it's working with this workaround setTimeout(() => { gsap.to(splitIntroPresentation.lines, { scrollTrigger: { trigger: refIntroPresentation.current, start: " center center", markers: true, id: "test" }, duration: 2, ease: "power4.out", y: 400 }); }, 10); Thank you Cassie, Thank you Jack 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2022 Share Posted June 2, 2022 Ah, so it works if you add a slight delay? That tells me your page wasn't rendered and it didn't call the window.onload when it was finished. So all you need to do (in theory) is just make sure you call ScrollTrigger.refresh() AFTER everything is settled and your page is fully rendered (and then you don't need to add that setTimeout() delay). I imagine there's a lifecycle event for that or something. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now