Jump to content
Search Community

Changing transformOrigin on svg rects built with D3

ddi-web-team test
Moderator Tag

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

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