Changing transformOrigin on svg rects built with D3

[ddi-web-team 13 Likes (Newbie)]

Hi all!

 

I've been experimenting with combining D3 and GSAP to animate some nice looking charts. I created a vertical bar chart that GSAP has no problem animating as D3 returns plain SVG.

 

The issue is coming from how these rects are being 'drawn' in. It's from the top. I tried changing the transformOrigin but it doesn't seem to be affecting anything.

See the Pen 6e93150999d75cec4e9cdd9601808072?editors=1010 by DDI-Web-Team (@DDI-Web-Team) on CodePen

[ZachSaucier 7,048 Likes (Superhero)]

Hey ddi-web-team.

 

The reason why changing the transform origin isn't working for you is because you're not animating transforms  You're animating the height property. If you switch it to using transforms instead (which is more performant) it works:

tl.from('#stage rect', {scaleY: 0, stagger:.1, transformOrigin:'center center'})

 

[ddi-web-team 13 Likes (Newbie)]

Amazing. Thank you @ZachSaucier 😁

One quick question. You mention that transforms are more performant than height. Do you have a resource where I can learn more about why this is?

[ZachSaucier 7,048 Likes (Superhero)]

Well with SVGs it may not be. I'm not familiar with how they are rendered. 

 

With DOM elements transforms are better for sure. Lots of resources on the subject but here's one: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

[ddi-web-team 13 Likes (Newbie)]

TIL. Thank you so much!

[mattsrinc 11 Likes (Newbie)]

I know this is a late comment to this topic and I would give my hand for defending GSAP animation features when comparing to other libraries but ... whenever there is a built-in feature of a main given javascript library for a solution I try to use it and not adding additional libraries when not needed.

So instead of calling GSAP you can play with transition and delay parameters in D3.js, essentially giving you the sequenced stagger animation like GSAP. I don't have time to rework your example (doing at least 2 D3.js charts/month per clients) yet this should guide you to pure D3.js approach:

https://www.d3-graph-gallery.com/graph/barplot_animation_start.html

Of course for more advanced animation you can always later add/switch to GSAP. 😀

[ddi-web-team 13 Likes (Newbie)]

That's a fair point @mattsrinc and I'll look over it for sure.