Staggering scale multiple g elements inside a svg

[iuscare 11 Likes (Newbie)]

Hi there,

I am new to greensock and even to jquery/javascript at all. I am trying to scale the "g" parts of a svg element from 0 to 1. It already works but the elements don't stay in their end position when they are animating, but "move" in along the x and y axis. I am wondering if there is a way, that they stay fixed in their position and just scale from 0 to 1? I already searched the forum and found advises about transformOrigin, but none of them solved my problem.

See the Pen KgdyGj by iuscare (@iuscare) on CodePen

[Diaco 1,948 Likes (Superhero)]

Hi  iuscare 

 

you just need to set transformOrigin like this : 

TweenMax.staggerFrom(listItems, .4, {scale:0,transformOrigin:'center'}, 0.3);

[iuscare 11 Likes (Newbie)]

Hey Diaco,

 

thank you so much for your answer, it worked well for me. It's so strange for an amateur, I've already tried that before, but was not able to get the desired effect. Seems that I had a syntax error or sth. like this, although the console did not grumble and the animation took place. Anyway, you made my day! This support forum is so great, where you can get help without worrying that you could annoy other people. Keep it up!