Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Staggering scale multiple g elements inside a svg

Recommended Posts

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

Link to post
Share on other sites

Hi  iuscare :)


you just need to set transformOrigin like this : 

TweenMax.staggerFrom(listItems, .4, {scale:0,transformOrigin:'center'}, 0.3);
  • Like 3
Link to post
Share on other sites

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 :D 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!

  • Like 2
Link to post
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.