ScaleX not working on SVG

[foxhound3311]

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

[GreenSock]

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? 

[foxhound3311]

15 hours ago, GreenSock said:

 

 

I understand what you are saying, but i already have MorhpSVGPlugin.convertToPath() within my JS. I'm using it to animate the other elements. Any other solution by chance? 

[Carl]

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

 

 

[foxhound3311]

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? 

[GreenSock]

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...

Example:

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

 

Similarly...

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.