Kaiyuan

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!

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.

I'm just glad the problem is not on my end. That doesn't happen very often.