SVG position tweening performance

[JonasBad]

Hello,

 

I'm facing performance issues when tweening SVG <image> elements x and y position. I'm animating using the attr x and y value. The performance is great on IE,FF and Safari, but very bad on Chrome. Does anyone have a cross browser solution or an explanation why this happends?

 

Thanks!

Jonas

See the Pen 2cf10d4578674de9425a21c63cdf6009?editors=001 by JonasB (@JonasB) on CodePen

[GreenSock]

It looks like Chrome just doesn't like preserveAspectRatio="none". Remove that and things seemed to animate fine. Obviously that's a browser issue, not GSAP (you can see that GSAP is animating the values fine - Chrome just doesn't want to paint the screen properly with the updated positions). You might want to try using transforms instead of the actual x/y attributes. 

[Carl]

Hi Jonas,

 

Just want to jump in and thank you for the CodePen demo and for posting in the forums. It makes it so much easier for us to investigate and explain... and you get the added bonus of having more eyes on the problem. 

 

Best,

 

Carl

[JonasBad]

Hi Jonas,

 

Just want to jump in and thank you for the CodePen demo and for posting in the forums. It makes it so much easier for us to investigate and explain... and you get the added bonus of having more eyes on the problem. 

 

Best,

 

Carl

Carl, I will be doing this more often and help solve other people's problems. The community you have is amazing! Thanks!

 

It looks like Chrome just doesn't like preserveAspectRatio="none". Remove that and things seemed to animate fine. Obviously that's a browser issue, not GSAP (you can see that GSAP is animating the values fine - Chrome just doesn't want to paint the screen properly with the updated positions). You might want to try using transforms instead of the actual x/y attributes. 

Thanks for the solution and the tip! This solved the issue and helped me make it better!