clieee Posted April 3, 2020 Share Posted April 3, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 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. 1 Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 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 Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 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. Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 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 Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 Haha, okay. Well, I'm more looking for the right effect Maybe it is hard to achieve. Think it would look nice. Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 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 Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 Thanks Link to comment Share on other sites More sharing options...
PointC Posted April 3, 2020 Share Posted April 3, 2020 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. 6 Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 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. Link to comment Share on other sites More sharing options...
PointC Posted April 3, 2020 Share Posted April 3, 2020 Sorry to say, but I've never used Sketch so I have no idea how exports work with it. Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 3 minutes ago, clieee said: Am I on to something here or is this just a big no no? Seems like a reasonable approach. Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 3, 2020 Share Posted April 3, 2020 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. Link to comment Share on other sites More sharing options...
clieee Posted April 3, 2020 Author Share Posted April 3, 2020 Thanks! Will figure something out. Hope everything is doing alright in these difficult times. Link to comment Share on other sites More sharing options...
PointC Posted April 3, 2020 Share Posted April 3, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now