Jump to content
GreenSock

nikolev

[MorphSVG] Trouble achieving the right morphing

Recommended Posts

Hey guys, I just joined the club earlier today and briefly went through the documentation.

 

I am trying to morph the shape on the left into the shape on the right.

 

The effect I was hoping to achieve is to make the left shape(original state) look like it's starting to drip down like it's melting.

 

I tried using leveraging the findShapeIndex() function but none of the indexes there replicated that effect.

 

Does that mean that what I am trying to achieve is not possible or is there a different approach I can use? Any ideas would be greatly appreciated!

Thanks


image.thumb.png.2f8d2d82013b9c94d09bbd7488abbc22.png
 

See the Pen KKdPWEy by nikolev (@nikolev) on CodePen

Link to comment
Share on other sites

Yeah, since you've got a very different number of points in the end shape, MorphSVGPlugin has to add them in artificially and you've got a disproportionate amount clustered at the bottom. In cases like these, asset prep is key. So I'd suggest adding a similar number of points to the bottom of the STARTING shape so that when it morphs, it more naturally finds ones at the bottom to map to. 

 

I very quickly added some to the bottom here and you can see that it improves things (but I'm sure you could get it better): 

See the Pen 193d53a53f3896608254829409700973?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's a screen shot of where the points/anchors are on each shape: https://greensock.d.pr/oT3ksO

 

If you want it to be REALLY good, you could start with the un-melted shape, add a bunch of smooth points to the bottom of it (but DON'T actually drag them down to make it look melted yet - just add the points first so the shape looks completely unmelted). Then copy that shape and pull the points down and position them to make it look melted. Then morph between those shapes. It'll map the points perfectly. 

 

Does that help?

 

And welcome to the club! Thanks for joining. 🙌

  • Like 4
Link to comment
Share on other sites

Thanks for the response. I believe I understand the idea. Basically it's mapping the points and it's moving the closest points to the mapped locations. 

 

Okay I did exactly what you suggested but my result is still really off. I have applied 8 points to the bottom of the unmelted shape. Then copied it and expanded the points. However if you refresh the code(I updated it) the result is not what I was hoping for.

 

What am I doing wrong? 

 

image.thumb.png.c1579b753c1bdfae6e5e02258edad536.png

Link to comment
Share on other sites

Hm, can you provide a codepen? I wonder if maybe you left the shapeIndex: 20 that you had in there. That'd certainly explain things looking strange. 

Link to comment
Share on other sites

2 minutes ago, GreenSock said:

Hm, can you provide a codepen? I wonder if maybe you left the shapeIndex: 20 that you had in there. That'd certainly explain things looking strange. 

Here's the codepen link: 

See the Pen KKdPWEy by nikolev (@nikolev) on CodePen



P.S. Thanks for your prompt responses. I really appreciate it!

  • Like 1
Link to comment
Share on other sites

Hm, I don't think your SVG has the edited points from your screenshot. I'm still seeing this: https://greensock.d.pr/gCY0WP  Didn't you say you added a bunch of points to the bottom? 

 

I'm also curious - what program are you using? Do you have an EPS/PDF/AI file? I'm just curious. Illustrator wouldn't open the SVG; it's like there's something malformed in the paths. And there are some very large transforms applied needlessly. 

  • Like 2
Link to comment
Share on other sites

Hey @nikolev,

 

Like Jack, I'm convinced there's something wrong with your SVG.

Here in this SVG I have a little 'frayed out' the initial shape also.

 

See the Pen bGVbroe by mikeK (@mikeK) on CodePen

 

The shape could be further optimized.
By the way: It is enough to set   .hide {visibility: hidden;}

 

Happy tweening ...

Mikel

  • Like 3
Link to comment
Share on other sites

Thanks guys, I appreciate the help. 

@Mikel, I re-made my SVG since there were a lot of weird points. I believe now it's as clean as I could get it retaining the shapes that I wanted to achieve. However I'm still experiencing a problem.

 

@GreenSock You can see my anchor points in the screenshot below. However my codepen is still acting weird. I used the findShapeIndex() method to portray how the initial shape is morphing into the final shape. I don't understand why it's grabbing the incorrect points. Your initial example was very very good but I can't get close to it for some reason.

 

Here's the codepen again: 

See the Pen KKdPWEy by nikolev (@nikolev) on CodePen

 

EDIT 1

15 hours ago, GreenSock said:

I'm also curious - what program are you using? Do you have an EPS/PDF/AI file? I'm just curious. Illustrator wouldn't open the SVG; it's like there's something malformed in the paths. And there are some very large transforms applied needlessly. 

I just now saw this. I am using Adobe Illustrator. Let me upload the AI file and I will update this post. I noticed that Illustrator doesn't want to open the svg as well. Perhaps it's because I ran it through https://jakearchibald.github.io/svgomg/.

 

EDIT 2

Here's a link to my .ai file: https://we.tl/t-Ird1Rmvssi

 

I do believe that whatever I did in SVG OMG did mess up the path and that is why you couldn't open the SVG.

 

image.thumb.png.910b4f0fe6d68b6408fe050e37ea1527.png

Link to comment
Share on other sites

15 hours ago, GreenSock said:

Illustrator wouldn't open the SVG; it's like there's something malformed in the paths.

Yep - same here. AI does not like it. There is something funky about that SVG. My advice would be to start fresh with a new vector file. Be sure to use a background square the same same size as your SVG so you don't get any of those unnecessary transforms. 

 

16 hours ago, GreenSock said:

If you want it to be REALLY good, you could start with the un-melted shape, add a bunch of smooth points to the bottom of it (but DON'T actually drag them down to make it look melted yet - just add the points first so the shape looks completely unmelted). Then copy that shape and pull the points down and position them to make it look melted. Then morph between those shapes. It'll map the points perfectly. 

Exactly this. As amazing as the morph plugin is, if you can help it along with the same number of points, you'll get buttery smooth morphs with no surprises. That's exactly what I did for every single letter on this demo. 

 

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

  • Like 2
Link to comment
Share on other sites

5 minutes ago, PointC said:

Yep - same here. AI does not like it. There is something funky about that SVG. My advice would be to start fresh with a new vector file. Be sure to use a background square the same same size as your SVG so you don't get any of those unnecessary transforms. 

 

Exactly this. As amazing as the morph plugin is, if you can help it along with the same number of points, you'll get buttery smooth morphs with no surprises. That's exactly what I did for every single letter on this demo. 

 

 

See the Pen

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

by PointC (@PointC) on CodePen

 

@PointC That looks amazing! Love it.

 

 Btw I did upload the AI file(I updated my previous post). Do you mind taking a look? I did re-do the shape 5 times already but to no avail.

Link to comment
Share on other sites

Yeah, your shape does NOT have the extra points at the bottom. I just updated the codepen-only MotionPathHelper file to add an editPath() method so that you can see what I mean: 

 

See the Pen 8fcb337385d0f1e401a66f260cf73e76?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Look at the anchors. No extra points along the bottom. Maybe your software is stripping them out when you save? 

  • Like 3
Link to comment
Share on other sites

1 minute ago, GreenSock said:

Yeah, your shape does NOT have the extra points at the bottom. I just updated the codepen-only MotionPathHelper file to add an editPath() method so that you can see what I mean: 

 

 

See the Pen

See the Pen 8fcb337385d0f1e401a66f260cf73e76?editors=0010 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

 

Look at the anchors. No extra points along the bottom. Maybe your software is stripping them out when you save? 

You are right. Would you happen to have an idea of how to preserve those points. I can't find anything on Google.

 

What I do right now to export is I go to File->Export->Export As->Export. Then when I load the SVG back in AI I see that the bottom anchor points are missing. 

 

Apologies for wasting your time guys. This seems to be a problem with the way I export things.

Link to comment
Share on other sites

5 minutes ago, nikolev said:

You are right. Would you happen to have an idea of how to preserve those points. I can't find anything on Google.

 

I would do it by hand. Jack's demo is using the MotionPathHelper.

https://greensock.com/docs/v3/Plugins/MotionPathHelper

 

You can use that to edit add/edit points and copy the new path data.

See the Pen oNNEdRV by GreenSock (@GreenSock) on CodePen

 

 

  • Like 1
Link to comment
Share on other sites

5 minutes ago, OSUblake said:

I would do it by hand. Jack's demo is using the MotionPathHelper.

https://greensock.com/docs/v3/Plugins/MotionPathHelper

 

So add points using that helper (alt + click), copy the path data, and then put the path data inside the d="" quotes.

<path id="red-piece" fill="#ff39aa" d="" />

 

Now move the those points to the melted position, copy the path data, and insert it in thed="" quotes.

<path id="red-piece-melted" fill="#ff39aa" d="" />

 

  • Like 6
Link to comment
Share on other sites

@OSUblake is showing an excellent solution there. I highly recommend it. 👍

 

If you do want to tame the Adobe Illustrator beast, here's a little trick. I made a simple blue rectangle on a background white rectangle. I then converted the blue one to a compound path and added an extra random point on each side. You can see the AI result:

 

bDVix4p.jpg 

 

Now when I use export I get this:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400" viewBox="0 0 600 400">
  <title>rectTest</title>
  <g id="Layer_1" data-name="Layer 1">
    <rect width="600" height="400" fill="#fff"/>
  </g>
  <g id="Layer_2" data-name="Layer 2">
    <path d="M525,325H75V75H525V325Z" fill="#29abe2"/>
  </g>
</svg>

My 4 extra points are now gone. Adobe Illustrator is sooooo helpful. 🙄

 

But if I select my two rectangles and go up to the top menu and choose Copy and then paste everything into my code editor, I get this:

 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="600px"
     height="400px" viewBox="0 0 600 400" style="enable-background:new 0 0 600 400;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:#29ABE2;}
</style>
<defs>
</defs>
<g>
    <rect class="st0" width="600" height="400"/>
</g>
<path class="st1" d="M525,325H351.6H75v-74.9V75h220.3H525v78.2V325z"/>
</svg>

Ah-ha. My 4 extra points on the blue rectangle path remain. It requires a little more clean-up for the CSS, but it will prevent AI from being too helpful.

 

Just my two cents. Happy morphing.

:)

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

PS Here's your AI file with the Copy/Paste solution applied.

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

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

36 minutes ago, PointC said:

But if I select my two rectangles and go up to the top menu and choose Copy and then paste everything into my code editor, I get this:

That's awesome, thank you so much! This worked like a charm and now my animation looks exactly how I wanted it to.

 

@OSUblake Thank you as well for sharing that approach with me! 

 

You guys rock, I am so very excited to move on with my work!

  • Like 2
Link to comment
Share on other sites

Very nice work, @PointC🙌 And @OSUblake also gets bonus points for making use of another GreenSock tool ;) 

 

Happy tweening @nikolev!

  • Like 3
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.
×