Changing SVG Morph half way through tween

[Jonny]

I have a codepen (link attached), that has an svg of a black outlined square.

I have two sliders, one to morph width of the square, and a second slider that morphs height of the square.

The problem is this:
If I move the first (width control) half way through the transition, and then I want to morph the height using the second slider, there is a bug in which the square morphs the height to the original width (so there is a width and height transition to the svg as it's morphing the height).

 

What I want to be able to do is to morph the squares width with the first slider, and then from whatever width it is currently at, morph the height, maintaining current width.
Is this possible?

 

Another bug that happens is that if I morph width, then height, if I go back to morphing width, the svg snaps back to the original width before it starts morphing again.

 

Thank you for any help,

Regards,
J

See the Pen RwrrwZj by JonnyPS (@JonnyPS) on CodePen

[ZachSaucier]

Hey Jonny. There are no bugs here. You have two conflicting tweens that are both trying to affect the d attribute so of course it's going to jump.

 

To do this sort of effect you should animate the width and height attributes of a <rect>, not use morphing. That way you can animate different properties independently.

[Jonny]

Hi Zach, thanks for the quick reply.

Ah I see, the problem is that this is a greatly simplified version, and I am actually morphing some text I saved as an svg thinking I could use the morph plugin.
Just to be clearm are you saying to abandon svgmorph plugin completely and use vanilla js?

[ZachSaucier]

3 minutes ago, Jonny said:

Just to be clearm are you saying to abandon svgmorph plugin completely and use vanilla js?

Using vanilla JS wouldn't help you. The problem is logical: You're trying to have one element be two different things at the same time. That's impossible. 

 

You need to separate the variables that you're wanting to animate and animate them independently. If you can't do that then you can't do the effect that you're after.