Jump to content
GreenSock

amort2000

Newbie SVG question - Animate Bar UP not Down

Recommended Posts

Hi,

 

I'm just getting started with GSAP and SVG - in the example in this pen

I'd like the animated bar to grow upwards, rather than down - what am I missing here?

thanks!

amort2000

See the Pen BaNbLMb by amort2000 (@amort2000) on CodePen

Link to comment
Share on other sites

Hi there,

 

You have to animate your y positioning as well (your bar starts at y=580), if you include y=0 inside your tween you'll see that the bar now animates upwards.

Happy tweening!

  • Like 1
Link to comment
Share on other sites

Fantastic, that works really well. Thanks

 

But I  do find it quite unintuitive - If I use scaleY the bar grows in the direction specified by transformOrigin, but not when I animate  the svg height attribute.

 

I'd like to use scaleY but to pass it pixel value rather than a percentage - I've picked up somewhere that it's better to use transforms than manipulate attributes - is that possible?

Link to comment
Share on other sites

You are right on using transforms instead of targeting width or height directly (it affects performance since the browser need to redraw and recalculate)

  • Like 1
Link to comment
Share on other sites

You can always define the final height on your svg and then use a gsap.from tween with scaleY: 0, that way it will grow to the desired size without having to calculate the ratio

  • Like 2
Link to comment
Share on other sites

Thanks  a lot - that's what I was after!

Link to comment
Share on other sites

Can you please leave a link to your CodePen? That way this thread might be more useful to future readers :) 

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