Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ddi-web-team

Changing transformOrigin on svg rects built with D3

Recommended Posts

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

Link to comment
Share on other sites

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'})

 

  • Like 3
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 1 month later...

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. 😀

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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.
×