Using morphSVG with shapeIndex ignores duration

[maki3000]

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

[GreenSock]

That's because you put the duration INSIDE the morphSVG object, but it doesn't belong there.

// BAD
{morphSVG:{ shape: "#...", shapeIndex: 12, duration: 10}}

// GOOD
{morphSVG:{ shape: "#...", shapeIndex: 12}, duration: 10}

As for using MorphSVG on CodePen, you can use all the bonus plugins for free there. See

 (there are special trial versions that only work on whitelisted domains).

 

Happy tweening!

[maki3000]

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 👍

[GreenSock]

5 minutes ago, maki3000 said:

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 👍

We love hearing that, @maki3000. Thanks for being part of Club GreenSock! 💚