tips for optimizing GSAP animations

[RDima]

Good afternoon. I have the following situation.

 

There is a website page where there are many different animations using GSAP (parallax effect, 3D transformations when mouseover at an object, etc.). Almost all animations are started using ScrollTrigger. In addition, there are a lot of graphics on the page (the pictures are optimized, but there are still a lot of them). As a result, the page takes a long time to load.

 

At the moment, this is not a critical problem, but I noticed that due to the long loading of images and other elements, sometimes GSAP animations fail. In particular, animations either do not work, or the coordinates of the location are lost. On the advice from the forum, I solved the problem like this: I create all GSAP animations only after the page is fully loaded. The solution is working, but I would like to know if there are any other ways to optimize

[Cassie]

Other than animating transforms instead of layout properties and making your images smaller - not really.

GSAP does the performance stuff automatically for you!

The main performance killers would be animating stuff like filters or drop shadows, loading huge images or animating lots of SVG elements.