Jump to content


Staggering scale multiple g elements inside a svg

Moderator Tag
Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
Share on other sites

  • Solution

Hi  iuscare :)


you just need to set transformOrigin like this : 

TweenMax.staggerFrom(listItems, .4, {scale:0,transformOrigin:'center'}, 0.3);
  • Like 3
Link to comment
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 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.