Jump to content
Search Community

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

fmg test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 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.
×
×
  • Create New...