Jump to content
GreenSock

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

Tweening 'cx' and 'cy' vs tweening 'x' and 'y'

Recommended Posts

Hi!

 

Let's say I want to animate an SVG circle element. I can move it around by tweening its center (cx, cy), or its (x, y) coordinates. Is there a difference between these choices, e.g., in performance? I've read that tweening x and y is just sugar for doing a css translation, which is supposed to be GPU accelerated. (Indeed, a "translate" attribute gets added to the circle node.) On the other hand, tweening cx and cy makes it easy to work in absolute coordinates, whereas the coordinate system for x and y is relative to the element being animated (right?)...

 

Matt

Link to post
Share on other sites
16 hours ago, fmg said:

I've read that tweening x and y is just sugar for doing a css translation, which is supposed to be GPU accelerated. (Indeed, a "translate" attribute gets added to the circle node.)

 

SVG is not optimized the same way HTML is. GPU acceleration for SVG is very limited or non-existent. It depends on the browser and operating system. 

 

16 hours ago, fmg said:

On the other hand, tweening cx and cy makes it easy to work in absolute coordinates, whereas the coordinate system for x and y is relative to the element being animated (right?)...

 

Again, SVG is not the same as HTML. There is no box model in SVG. Everything starts at 0,0. 

 

See the Pen MqgXOG by osublake (@osublake) on CodePen

 

 

So what's better for performance? I got into a discussion about the performance of vector graphics on an issue for PixiJS. This is a response from an engineer at Mozilla about some of the SVG demos in that issue.

 

https://groups.google.com/forum/#!msg/mozilla.dev.tech.svg/bt_Wn-5ygxs/QWLFBpjHBwAJ

 

tl;dr

Transforms are optimized for better performance, but there's a memory limit. If performance is an issue, use canvas.

  • Like 6
  • Thanks 1
Link to post
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.

×