Morph text?

[clieee]

Hi,

 

I've tried to morph svg text, but the result is not that very good.

Let's say you have a text like "OH!" and would like to morph it to "HOW ARE YOU?" how would you morph between those in the "best way" so it feels like it is transforming between one text to the another?

 

[ZachSaucier]

Hey clieee and welcome to the GreenSock forums! Thanks for being a Shockingly Green member. We couldn't do what we do without people like you. 

 

8 minutes ago, clieee said:

Let's say you have a text like "OH!" and would like to morph it to "HOW ARE YOU?" how would you morph between those in the "best way" so it feels like it is transforming between one text to the another?

First off, you should morph paths. It's best to export them as paths if you're using a vector editor. MorphSVGPlugin does have a convertToPath()

method that works in some instances, but if you can avoid that step you might as well  

 

Secondly, no morph is going to be super smooth from something with 3 characters like "OH!" to something with 10 characters like "HOW ARE YOU?" unless you control each and every point's movement. And even if you did control every single point, you'd be hard pressed to make it look that nice. MorphSVG does have a shapeIndex property that you can use but it can only help so much.

 

I would consider alternative forms of animating from one set of text to another. Like ScrambleText or simply fading out and then fading in.

[clieee]

Thank you for your reply.

 

I've been looking at this example, and thinking maybe there is a way to accomplish something like this?

What do you think? 

 

[ZachSaucier]

2 minutes ago, clieee said:

I've been looking at this example, and thinking maybe there is a way to accomplish something like this?

Sure. Like I said, you should convert the text to paths and try morphing it  

[clieee]

Haha, yes - i did. I use Sketch for it, but not sure how to map svgs between different number of characters in the best way?

You mean I should convert each character into its own path?

[ZachSaucier]

2 minutes ago, clieee said:

You mean I should convert each character into its own path?

Probably not. It'd probably be best to convert all of one text to 1 path and then all of the other text to 1 other path and then morph between them.

[clieee]

Yep, that's what I tried, but then it's more of sliding in and out animation than morphing.... 

I'm thinking of a way where you morph what you can, and then kind of fade out what you cannot morph... you see what I mean?

[ZachSaucier]

5 minutes ago, clieee said:

I'm thinking of a way where you morph what you can, and then kind of fade out what you cannot morph... you see what I mean?

You could try that by breaking it into pieces. But that's not what MorphSVG was made to do  

[clieee]

Haha, okay. Well, I'm more looking for the right effect Maybe it is hard to achieve. Think it would look nice.

[clieee]

Another question -

 

When using MorphSVG, do I need it to morph paths only or is it possible to tell it to morph a complete svg object?

For example, if the svg object contains boths paths and polygons, can I tell it to morph into another svg that lets say only contains a single polygon?

[ZachSaucier]

1 minute ago, clieee said:

do I need it to morph paths only or is it possible to tell it to morph a complete svg object?

As the docs say, you should morph only paths. You can convert some non-paths to paths and then morph it. The docs are great - you should read them thoroughly  

[clieee]

Thanks

[PointC]

Good SVG morphs (or any SVG animation) comes down to 3 things. Prep. Prep. & Prep.

 

Something like you're describing should probably be broken into pieces for each letter. That will give you the coolest effect and smoothest animation. Here's a demo I did a couple years ago with SVG text. I created the original text and then duplicated and warped each piece in Illustrator. 

 

See the Pen yPbYRY by PointC (@PointC) on CodePen

 

Happy morphing.

 

 

 

[clieee]

yes, thank you!

I think I need to break each letter down to it's own character too, as you say it will probably be the smoothest.

 

Anyhow - I'm using Sketch for my svgs, is there a way to keep each path seperated for each character and still export it as one svg in Sketch? Or do I need to use some other tool. If I export each letter as a svg, and then manually place it inside my svg tag they end up sitting on each other.

 

[PointC]

Sorry to say, but I've never used Sketch so I have no idea how exports work with it. 

[clieee]

Okay. Thanks anyway.

 

I'm thinking of a strategy like this:

 

Let's say I have this word:

"How are you?" (11 chars incl spaces)

and I would like to go to this word:

"Hello" (5 chars)

 

Then if I have a svg path for each letter, and do the following:

1. what is the current word

2. what is the next word

3. compare the difference between those

4. find out there are 6 differences between those (incl spaces)

5. trying to center things, check from the left side: we have empty slots on the left side, tween those to alpha 0

6. check from the remaining side (right), are there any empty slots left between the previous and next word? if so, tween those to alpha 0

7. morph the the characters that are in common place

 

Am I on to something here or is this just a big no no?

 

[ZachSaucier]

3 minutes ago, clieee said:

Am I on to something here or is this just a big no no?

Seems like a reasonable approach.

[clieee]

It's been a while since i did some css styling.

A question - if I put a svg with several paths inside it, how do I style it to make sure each path is floating after each element. Lets say I have each letter as a svg path, like A, B, and C, how do I make them stick float like they are "ABC" on the screen? If I do it right now, they end up on top of each other?

[ZachSaucier]

9 minutes ago, clieee said:

Lets say I have each letter as a svg path, like A, B, and C, how do I make them stick float like they are "ABC" on the screen? If I do it right now, they end up on top of each other?

You position things in SVG using coordinates or a vector editor. You'll get more help from Google than from us here  

 

If you have any specific GSAP-related questions let us know.

[clieee]

Thanks! 

Will figure something out.

 

Hope everything is doing alright in these difficult times.

[PointC]

I have no idea if any of this applies in Sketch, but I wrote up a little post about vector exports in Illustrator. Maybe there is some crossover in export settings that could be helpful.