MorphSVG text shapes - counter switch

[spacewindow 5 Likes (Newbie)]

Hey guys,

 

Been having a go with morphSVG which is pretty amazing.

 

The answer to this may be simple ("your shape is too complex") but I am so close to a good result, thought I would ask.

 

I've done three morphs on three different words in this Balloon animation - its a subtle shift which make the words appear to be on the balloon.

 

In all three cases the morph works perfectly – except for the counters of the letters 'swapping' during the animation. This is the only issue on all three morphs!

 

I wonder if there is anything I can do about it? I suppose I could break up the lettering into separate morphs, but:

 

1) wondering what that would do to performance

2) its a big extra hassle on the design front, but can be done

 

Alternatively, I go for a 'less accurate' tween and abandon the morph for a scale/squash somehow.

 

Thanks for your advice!

 

NOTE: Have a play with my pen. The final animation will have three balloons saying You Made It! You can show and hide the words using the code and animate them.

See the Pen qbZrMr by spacewindow (@spacewindow) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Try defining the map as "complexity":

TweenMax.to(blMadeLeft, 2.5,{
  morphSVG: {shape:'#blMadeRight', map:"complexity"},
  repeat: -1,
  yoyo: true,
  ease: Power1.easeInOut
});

[spacewindow 5 Likes (Newbie)]

No unfortunately that scrambles the SVG Morph animation pretty badly...

[GreenSock 8,117 Likes (Superhero)]

Really? Hm. Looks pretty good to me:

http://codepen.io/anon/pen/gPrRRM

 

What am I missing?

[GreenSock 8,117 Likes (Superhero)]

By the way, I made a bunch of little tweaks to the algorithm that figures out how to match up the segments between the start/end shapes, so things should just look more natural now. Again, make sure you've got the latest version (uploaded today). From what I can tell, you don't even need to set map:"complexity" now (but in the older version, that made your codepen demo look great). 

[spacewindow 5 Likes (Newbie)]

Yeah I am a doofus – turns out I had put in 'shapeIndex: "complexity" ' instead of "map:complexity". So sorry!

 

Glad my incompetence has spurred even more amazing Greensock innovations. Amazing work.

 

Have updated my pen pulling in your new js.

[GreenSock 8,117 Likes (Superhero)]

No problem, spacewindow. I'm glad it all worked out.

[spacewindow 5 Likes (Newbie)]

Interestingly, one of my word shapes (you) was still doing the counter-swapping morph behaviour.

 

However, once I set 'map: complexity' on this morph it was fixed it. The other two word morphs no longer needed it with your update. I will update this post with a new pen once the demo is complete.

[GreenSock 8,117 Likes (Superhero)]

Great. If you could shoot me a demo of the "you" word not morphing as you desired (without map:"complexity"), it'd be really helpful. It's almost impossible to make the algorithm work perfectly for every situation, but perhaps your demo will help me see a tweak I can make. 

 

Glad to hear things are working better now.