amort2000 Posted April 1, 2020 Share Posted April 1, 2020 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 More sharing options...
xaviergd Posted April 1, 2020 Share Posted April 1, 2020 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! 1 Link to comment Share on other sites More sharing options...
amort2000 Posted April 1, 2020 Author Share Posted April 1, 2020 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 More sharing options...
xaviergd Posted April 1, 2020 Share Posted April 1, 2020 You are right on using transforms instead of targeting width or height directly (it affects performance since the browser need to redraw and recalculate) 1 Link to comment Share on other sites More sharing options...
xaviergd Posted April 1, 2020 Share Posted April 1, 2020 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 2 Link to comment Share on other sites More sharing options...
amort2000 Posted April 1, 2020 Author Share Posted April 1, 2020 Thanks a lot - that's what I was after! Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 1, 2020 Share Posted April 1, 2020 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 More sharing options...
amort2000 Posted April 1, 2020 Author Share Posted April 1, 2020 Hi -yeah sorry - I'd deleted it - here it is undeleted with slightly more descriptive name. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now