Image laggy on first animation

[Kaiyuan]

I am working on an image appearing effect with a react project using scrollTrigger. Only the initial animation is laggy. I set toggleActions to "play none none reset". After the first laggy animation, when I scroll top the top and replay the animation it goes back to normal. 

 

code here:https://github.com/KaiyuanMa/Dovin/blob/main/src/components/Home/index.js

 

I tried this:

 

but none of them worked. Really appreciate any help.

[GSAP Helper]

Hi @Kaiyuan. It's not really feasible for us to troubleshoot with just a link to your whole Github project (the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc.), but I did notice that you're not doing proper cleanup which is what React requires. In React 18, your useEffect()/useLayoutEffect() gets called TWICE in strict mode, so you may be inadvertently creating duplicate/conflicting animations and ScrollTriggers. 

 

gsap.context() is your new best friend in React because it makes cleanup so easy. I would strongly recommend reading this article: 

 

If you're still having trouble, would you please provide a very simple StackBlitz or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process. If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter template you can fork that uses React, GSAP, and ScrollTrigger.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Kaiyuan]

12 hours ago, GSAP Helper said:

Hi @Kaiyuan. It's not really feasible for us to troubleshoot with just a link to your whole Github project (the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc.), but I did notice that you're not doing proper cleanup which is what React requires. In React 18, your useEffect()/useLayoutEffect() gets called TWICE in strict mode, so you may be inadvertently creating duplicate/conflicting animations and ScrollTriggers. 

 

gsap.context() is your new best friend in React because it makes cleanup so easy. I would strongly recommend reading this article: 

 

If you're still having trouble, would you please provide a very simple StackBlitz or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process. If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter template you can fork that uses React, GSAP, and ScrollTrigger.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Sorry about the inconvenience. I will try to make a codepen in the future for other questions. After I did a proper clean up it got better but still had some lags, and I tried to debug using chrome devtool performance recorded and found out it took a ton of time to paint images. Turns out I was using avif images and I thought it is boosting performance but it's not. Avif is smaller but takes longer time for the browser to decode. Changed all imgs to webp and it fixed it. Appreciate the help!

[GreenSock]

Thanks for reporting back with your findings, @Kaiyuan! 🙌