Improving performance of SVG Scale on Scroll

[João Azevedo]

Hi,

I am having performance issues with an animation and am hoping that someone could possibly shed some light on why this is not working smoothly.
I am trying to scale an image (an SVG) as the user scrolls the page, and then animate in some elements on top of the image once it is scaled. Whilst the animation works, it is extremely jittery on certain devices, namely Chrome on MacOS (possibly due to the retina display).

I have put together an example CodePen here:

The CodePen does perform better than our actual site but this is probably because the assets are slightly larger (have more detail in them), nevertheless, you should still be able to see the ‘jitteryness’ in this CodePen.
Can anyone suggest how I can improve the performance of this animation? If it is already as optimized as it can be, would canvas be a better option and if so, can you recommend a suitable library? Should we be looking at PixiJS?

Thanks in advance,
João

See the Pen oNzqKdx by joao-azevedo-hydradev (@joao-azevedo-hydradev) on CodePen

[ZachSaucier]

Hey João and welcome to the GreenSock forums.

 

It seems like you're just putting a lot of work on the browser to render these large images. Large images take up a lot of processing, especially when you're animating them, especially when you're animating their dimensions (even if it's just scaling). You might be able to get better performance by scaling down your <svg> initially and then scaling up to a scale of 1 in your animation (instead of 275). But it might not make a difference, I'm not sure.

 

Canvas rendering may perform better as well. You don't really need a library for a simple scaling like you show in the demo. 

 

It's definitely not an issue with GSAP  Maybe someone else will be able to help further but no promises.

[João Azevedo]

Hi Zach,

Thank you so much for your prompt response!
I feared this would be the case as there is a lot going on to be fair. I will give the scaling adjustment a go but I agree that it is unlikely to yield a better result…
I hugely appreciate that the following is beyond your scope of support, but would you be able to point me in the right direction for animating this with canvas? I assume I need to somehow draw the SVG into the canvas, and then apply the scaling based on a passed value from the scrollTrigger plugin. Is that the right logic?

Thanks in advance,
João

[ZachSaucier]

15 hours ago, João Azevedo said:

I assume I need to somehow draw the SVG into the canvas, and then apply the scaling based on a passed value from the scrollTrigger plugin. Is that the right logic?

Yep!