João Azevedo
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by 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, wouldcanvas
be a better option and if so, can you recommend a suitable library? Should we be looking at PixiJS?
Thanks in advance,
JoãoSee the Pen oNzqKdx by joao-azevedo-hydradev (@joao-azevedo-hydradev) on CodePen
Improving performance of SVG Scale on Scroll
in GSAP
Posted
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