Jonny Posted June 9, 2020 Share Posted June 9, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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. 1 Link to comment Share on other sites More sharing options...
Jonny Posted June 9, 2020 Author Share Posted June 9, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 9, 2020 Share Posted June 9, 2020 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now