Jump to content


Trying to scale up a specific path from SVG

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

I'm trying to scale up specific path from SVG graphic. It's not working so I may be missing something.


Path definition

<symbol id="dot"><path id="smalldot" class="cls-2" d="M104.9,36a3,3,0,1,1-3-3A3,3,0,0,1,104.9,36Z"/></symbol>



TweenMax.to("#dot", 3, { scale: 5 });






Link to comment
Share on other sites

Hi @PinkMeNow :)


I'm not sure how you're adding the symbol instance since you didn't post that part of the code, but you should be able to add it like this:


<use id="dotClone" xlink:href="#dot"/>


Then you can animate it like this:


// via the ID
TweenMax.to("#dotClone", 3, {scale:5});

// or use works too
TweenMax.to("use", 3, {scale:5});


Hopefully that helps. Happy tweening.



  • Like 1
Link to comment
Share on other sites

Hi @PinkMeNow,


What is your reason to use <symbol> here?
Information about <symbol> .


You can name this object with the id = "dot" ...


See the Pen aPWMrb by mikeK (@mikeK) on CodePen

Attention: You use the same id 'smalldot' for several objects. Use 'smalldot' as class! More info


Happy tweening ...




  • Like 5
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.