my animation lags on load

[Moses]

my animation lags on load , but doesn't when I go other pages and switch back to the home page 

See the Pen JjeJMPq by mosesobike (@mosesobike) on CodePen

[Rodrigo]

Hi,

 

Your codepen example is not working. 

 

We've created a collection of starter templates in Stackblitz, feel free to fork the one that better suits your setup in order to replicate the issue you're having:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Happy Tweening!

[Moses]

https://stackblitz.com/edit/gsap-react-basic-f48716-ajsjl6?file=src%2FApp.js

here can you help me now i don't know it keeps lagging

[Moses]

On 7/3/2023 at 9:39 PM, Rodrigo said:

Hi,

 

Your codepen example is not working. 

 

We've created a collection of starter templates in Stackblitz, feel free to fork the one that better suits your setup in order to replicate the issue you're having:

https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters

 

Happy Tweening!

https://stackblitz.com/edit/gsap-react-basic-f48716-ajsjl6?file=src%2FApp.js

here can you help me now i don't know why  it keeps  lagging

[Rodrigo]

Hi,

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. 
5. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
6. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
7. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. 
8. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly.
9. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 

 

Finally you might want to take a look at this thread and see if you can get some ideas from it:

 

 

I did some testing with a long setTimeout before creating the GSAP instances and that makes a difference, so perhaps the thread I linked could have the key for this.

 

Hopefully this helps.

Happy Tweening!

[Moses]

Thank you for the tips 

I added will-change: transform to CSS and it still lags on load and 

on my React app , when I move to another page and move back to the homepage the animation works just fine  

[mvaneijgen]

There is something weird with the images you're loading. I don't know what their file format is (how they are saved), but they cause the stuttering. Also it only seems to happen on Chrome, Safari Version 16.5.1 (18615.2.9.11.7) works fine. 

 

Maybe the files are too big, have some weird HDR or something, I would optimize the images for web viewing and your problem will probably be solved. Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/gsap-react-basic-f48716-kf5wgr?file=src%2FApp.js

[Moses]

thanks , it turns out that my images were too large