[Feature request: implement animate viewBox in MorphSVGPlugin]

Hey! Thanks a lot!

 

@Cassie this looks great 👍

I first thought, I need it to be responsive, but I guess, I will have it the same size for all screens, so working with fixed values and the timeline is for sure far a better solution. And when using overflow: visible, I don't need to care about viewBox size and just move the letters where I want them to be.

[Feature request: implement animate viewBox in MorphSVGPlugin]

UPDATE:

I checked my code again and found out that my scale x-positioning didn't work all the time. Here's a new version of my pen:

See the Pen bGxBNBe by maki3000 (@maki3000) on CodePen

 

Also, I decided to use the overflow: visible!important;, because I like the result better, when it's overflowing and I do the width animations now also with a tween (for simplicity it don't use timeline, because I want to be the keepInViewBox as it is).

[Feature request: implement animate viewBox in MorphSVGPlugin]

Hey! Thanks to all of you! And thank you very much @Jack for your detailed explanations. This is very helpful 👍

 

Based on Jacks CodePen, I added scaling, because I also have a letter morphing from "K" to "I" and because I scale, I decided to have transformOrigin: 'center'. 

 

I also added containers around my SVGs, so I can CSS transform their widths and have a container with letters that doesn't change in size.

 

Here we go:

See the Pen oNPzgqN by maki3000 (@maki3000) on CodePen

 

One and a half day later I'm pretty happy with the result 😀

[Feature request: implement animate viewBox in MorphSVGPlugin]

UPDATE:

I tried to do, what I did with my viewBox animation with CSS, but I failed:

See the Pen PodzaZQ by maki3000 (@maki3000) on CodePen

 

I guess, MorphSVGPlugin somehow uses CSS transform for it's animation as well, so this one doesn't work. Or is there another reason?

[Feature request: implement animate viewBox in MorphSVGPlugin]

Hey there!

 

A lot of the times, when morphing SVG, the size of SVGs changed and when in a fixed sized container, the viewBox may needs to be changed.

 

Check my pen code, where you can see two morphing letters.

 

So I created a animateSvgViewBox function to also animate the viewBox, but it becomes kind of jerky, especially when used with many elements.

 

So: feature request -> implement animate viewBox in MorphSVGPlugin.

 

Or ist there a better option to do that?

See the Pen xxaOYqE by maki3000 (@maki3000) on CodePen

[Using morphSVG with shapeIndex ignores duration]

Thank you very much! Works like charm!

 

I spent half a day yesterday to find a good JS SVG morph library to be honest. Finally I took the decision to buy good software and boom, it's working 👍

[Using morphSVG with shapeIndex ignores duration]

When I use morphSVG with shapeIndex duration the duration is ignored.

 

I do:

morphSVG.convertToPath('#letter-k-polygon, #letter-ki-svg-morph-rect')
gsap.to('#letter-k-polygon', { morphSVG: { shape: '#letter-ki-svg-morph-rect', shapeIndex: 12, duration: 10 } })

Like this the animation goes quite fast.

 

But when I do:

gsap.to('#letter-k-polygon', { morphSVG: '#letter-ki-svg-morph-rect', duration: 10 })

The animation duration is 10 seconds.

 

What am I doing wrong?

 

Sorry, I can't add a CodePen, because I don't know how to get around restricted use of morphSVG...