Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
spacewindow

MorphSVG text shapes - counter switch

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

Try defining the map as "complexity":

TweenMax.to(blMadeLeft, 2.5,{
  morphSVG: {shape:'#blMadeRight', map:"complexity"},
  repeat: -1,
  yoyo: true,
  ease: Power1.easeInOut
});
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×