ScrollTrigger performance optimisation

[TomR]

I'm currently working on the below parallax scrolling site using ScrollTrigger:

 

http://piano-raves.s3-website.eu-west-2.amazonaws.com/

https://github.com/ratcliffetj/Piano-Raves

 

The scroll performance is a bit laggy in places, so am looking to optimize this. 

 

A couple of questions that might help me in this regard:

 

- The background images used are in the 300KB-500KB range, is that kind of image size likely to cause performance issues? Particularly when used full screen?

- My approach to parallax sections is to add black section dividers that move slightly slower than the background images, rather than translating the background images in the y direction on scroll. Is that likely to cause performance issues?

 

[ZachSaucier]

Hey Tom and welcome to the GreenSock forums. Unfortunately this isn't the place for a full website audit (maybe you could post in our freelance forum if you'd like to pay for that), but we'll help where we can.

 

42 minutes ago, TomR said:

The background images used are in the 300KB-500KB range, is that kind of image size likely to cause performance issues? Particularly when used full screen?

The file size of images are never the issue other than load time. After the image is loaded, performance only has to do with rendering. Yes, larger images are harder to render especially if you're animating them around but so long as you're using translates it should usually be okay.

 

42 minutes ago, TomR said:

My approach to parallax sections is to add black section dividers that move slightly slower than the background images, rather than translating the background images in the y direction on scroll. Is that likely to cause performance issues?

I'm not sure what you mean here. You are translating the images... But again translating is pretty performant. In general it's a good idea to only animate elements when they need to be animated (on screen or coming on/going off screen).

[GreenSock]

Yeah, I'd echo all of Zach's sentiments. One thing I wanted to mention too is that it seems like you're animating things that are totally off-screen. I wouldn't recommend doing that. Seems wasteful to me. 

 

And yeah, it's almost surely a rendering issue with all the pixels you're asking the browser to paint on each tick. Keep the areas of change to a minimum if you can. Totally unrelated to GSAP, of course. You can experiment with will-change: transform in your CSS and maybe force3D: true in GSAP. 

 

Happy tweening!

[TomR]

Thanks for the helpful responses folks! 

 

Regarding only animating things when they are on screen, do I achieve that by adding 'pause' within toggleActions? or is it something else? 

 

I will try experimenting with will-change and force3D too.

 

[ZachSaucier]

Just now, TomR said:

Regarding only animating things when they are on screen, do I achieve that by adding 'pause' within toggleActions? or is it something else? 

It mainly relates to having start and end positions that are good choices. Such as the default ones: start: "top bottom" and end: "bottom top". The ScrollTrigger documentation and video talk more about what those values mean.

[TomR]

Ok thanks for the pointers! Will look into your suggestions.

[TomR]

After playing about for a while I managed to fix the most severe issues by ensuring that background images were all sized 2400px by 1600px. Previously they were larger than this by varying amounts which for some reason was causing problems.