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

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: https://codepen.io/joao-azevedo-hydradev/pen/oNzqKdx 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