Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
JonasBad

SVG position tweening performance

Recommended Posts

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×