GSAP Mobile Optimization

[KeithMartell]

Hello all! Back at it again hahah

This time I was wondering about optimizing GSAP for mobile. I have been looking through the forums and google to get a sense of performance of GSAP on mobile/slower speed devices and found a lot of interesting pointers but there wasnt a definitive list of guidelines.

From what I can gather, besides using the GSAP matchMedia() function, what are some pointers we should take note when developing for mobile/slower-download speeds?

Off the top of my head I can think about potentially avoiding GSAP animations right off the landing page for a faster first-contentful-paint/time-to-interactive.  Additionally is there a solution whereby on React we do some kind of LazyLoading for GSAP package until it is needed?  Has somebody done lazy loading for GSAP CDN?

Over here in this thread from 2020 and this other one  talks about more/less performant properties to animate like preferring x and y values over top and left. Should we take into consideration the quantity and intensity of GSAP animations (i.e. Less frequent and less complex) for mobile views?

Cheers!

 

[Rodrigo]

Hi,

 

Performance is a deep topic that could require quite some time and a few pages to get around.

 

The reason there isn't some sort of list or guidelines is because every project has it's own particularities and the right approach changes from project to project. For example are you animating a lot of images? Are those images optimized and using the srcset and size, or using the picture tag? Are the images transparent or do they have some shadow? That's just a few pointers just for images. Then you have other elements, SVGs, canvas, etc. As you can see this rabbit hole is a deep one.

 

The only rule of thumb I have personally is to test and start as simple as possible with the animations on small screens in order to improve performance but also save battery. You can have users with more powerful devices but complex animations will drain more battery due to CPU usage. Of course you have to take into account users that don't have powerful devices and mid/low range devices. Also you can't control the number of browser tabs the user will have in the browser and neither how many apps the user has running (even in the background) when it's viewing the site. Again, as you can see a lot of options.

 

Hopefully this helps and of course if you want to chime in with your personal experience in the subject you're more than welcome to share. In this subject we're all teachers and students at the same time.

Happy Tweening!

[KeithMartell]

1 hour ago, Rodrigo said:

Hi,

 

Performance is a deep topic that could require quite some time and a few pages to get around.

 

The reason there isn't some sort of list or guidelines is because every project has it's own particularities and the right approach changes from project to project. For example are you animating a lot of images? Are those images optimized and using the srcset and size, or using the picture tag? Are the images transparent or do they have some shadow? That's just a few pointers just for images. Then you have other elements, SVGs, canvas, etc. As you can see this rabbit hole is a deep one.

 

The only rule of thumb I have personally is to test and start as simple as possible with the animations on small screens in order to improve performance but also save battery. You can have users with more powerful devices but complex animations will drain more battery due to CPU usage. Of course you have to take into account users that don't have powerful devices and mid/low range devices. Also you can't control the number of browser tabs the user will have in the browser and neither how many apps the user has running (even in the background) when it's viewing the site. Again, as you can see a lot of options.

 

Hopefully this helps and of course if you want to chime in with your personal experience in the subject you're more than welcome to share. In this subject we're all teachers and students at the same time.

Happy Tweening!

Yeah I see the potential complexity now! Thats cool glad theres still stuff for everyone to learn and figure out :-)))

If I have any interesting ideas on optimizations will definitely share!

Thanks for the insight