Jump to content
Search Community

ScaleX not working on SVG

foxhound3311 test
Moderator Tag

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've done this before, and i can't figure out why it's not working this time.


I'd like to increase the width of #tube-liquid at a certain point in my timeline. Right now i have the property set as .to(tubeLiquid, 2, {scaleX:50});

The scale of the rectangle will not increase, and it's simply ignoring me not giving me an error. 

What am i missing when it comes to using ScaleX, ScaleY within GSAP? 


See the Pen JJdyrM by stinkytofu3311 (@stinkytofu3311) on CodePen

Link to comment
Share on other sites

I'm running out the door, so I didn't have much time to dig in, but I'm pretty sure the problem is that you're capturing a reference to your elements (like tubeLiquid) and then you're converting them to paths and tweening those, thus your tweens are actually targeting the pre-converted elements. Remember, convertToPath() literally removes the old ones from the DOM and swaps in brand new <path> elements (it's impossible to take the a <rect> instance, for example, and make it into a <path> - instead, it must create a new instance of a <path> and copy the attributes over and swap it in)


So if you just put the MoprhSVGPlugin.convertToPath() at the TOP of your JS (well, anywhere above where you're capturing references), you should be fine. 


Make sense? 

  • Like 2
Link to comment
Share on other sites

All GreenSock is suggesting is that you move a line of code like:


MorphSVGPlugin.convertToPath("circle, rect, polygon");
var $btnPlay = $("#btnPlay"),
        $btnSlowMo = $("#btnSlowMo"),
        $btnReverse = $("#btnReverse"),
        tl = new TimelineMax({repeat:-1, repeatDelay:1}),
      paper = document.getElementById("printer-paper"),
      file = document.getElementById("file"),
      greenLight = document.getElementById("rect3720"),
      tubeLiquid = document.getElementById("tube-liquid");

This ensures there is a <path> with an id of tube-liquid when you try to reference it via getElementById().


From your demo It seems you don't need #tube-liquid morphing so converting it to a path is not only a little wasteful, it is having a negative impact on scaling that element. If you can't move that line of code as suggested you then have options to make sure that converToPath() selects the right things.


Instead of selecting all rects, I think it would be better to just specifically target the <rect>s you need to morph but you could also try using not() selector so that you convert every path except the #tube-liquid like so


MorphSVGPlugin.convertToPath("circle, rect:not(#tube-liquid), polygon");


The demo below has been simplified (scrollmagic and other tweens removed) just to illustrate the scaleX animation working.


See the Pen XgmJrX?editors=1010 by GreenSock (@GreenSock) on CodePen



  • Like 2
Link to comment
Share on other sites

ahh. So you are saying that morphing the rectangle to a path made it where i could not increase the X axis? What if i wanted to-do the opposite , and i wanted to scale the rectangle to become smaller? I tried adding scaleX: -negative number and it just flips the rectangle. What is the proper way to shrink a rectangle from right to left? 

Link to comment
Share on other sites

No no, I think there are a bunch of misunderstandings going on...

  1. You can definitely scale <path> elements. Totally fine. No restrictions whatsoever.
  2. As @Carl indicated, I was *not* saying that you shouldn't use MorphSVGPlugin.convertToPath(). It's absolutely fine to use. Your problem simply had to do with a logic issue in your code and the way you're referencing things...


var a = "1";
var b = a; 
console.log(b); //"1" - great.
a = "2";
console.log(b); //still "1"



var tubeLiquid = document.getElementById("tube-liquid"); //grabs the <rect> instance
MorphSVGPlugin.convertToPath("rect"); //that original <rect> instance is now removed from the DOM and there's a new <path> instance swapped into the DOM, but tubeLiquid variable still points to the old <rect>!
TweenMax.to(tubeLiquid ...); //this would animate the original <rect>...which isn't even visible anymore, as it was removed from the DOM. That's why it seems like nothing is happening even though TweenMax is indeed animating the properties of the <rect>, as requested.


Does that help? 


Again, you can definitely animate scaleX of the <path>. You were simply referencing the wrong object(s) due to the way you were creating your variable references.

  • Like 3
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.
  • Create New...