maki3000

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.

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: https://codepen.io/maki3000/pen/bGxBNBe 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).

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: https://codepen.io/maki3000/pen/oNPzgqN One and a half day later I'm pretty happy with the result ?

UPDATE: I tried to do, what I did with my viewBox animation with CSS, but I failed: https://codepen.io/maki3000/pen/PodzaZQ I guess, MorphSVGPlugin somehow uses CSS transform for it's animation as well, so this one doesn't work. Or is there another reason?

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?

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 ?

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