xaviergd

Just add on both your #outer_circle tweens overwrite: true after scale, that should take care of it

Hi there Alexandra! Regarding the changing of shapes you have several options: -Option 1: Since these are pretty simple shapes you can achieve the same result using only CSS and divs instead of using SVG, and then you can modify the border-radius property of each element. -Option 2: If you want to use SVG to handle the shape change MorphSVG plugin is your best option, -Option 3: You can always alter the path directly too targeting the d attribute, but it won't look as smooth and you'll need to make sure that all of your SVG paths have the same number of nodes. Hope that helps!

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

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

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!