nikolev Posted April 8, 2020 Share Posted April 8, 2020 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 See the Pen KKdPWEy by nikolev (@nikolev) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted April 8, 2020 Share Posted April 8, 2020 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. 🙌 4 Link to comment Share on other sites More sharing options...
nikolev Posted April 8, 2020 Author Share Posted April 8, 2020 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? Link to comment Share on other sites More sharing options...
GreenSock Posted April 8, 2020 Share Posted April 8, 2020 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 More sharing options...
nikolev Posted April 8, 2020 Author Share Posted April 8, 2020 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: P.S. Thanks for your prompt responses. I really appreciate it! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 8, 2020 Share Posted April 8, 2020 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. 2 Link to comment Share on other sites More sharing options...
mikel Posted April 8, 2020 Share Posted April 8, 2020 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 3 Link to comment Share on other sites More sharing options...
nikolev Posted April 8, 2020 Author Share Posted April 8, 2020 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: 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. Link to comment Share on other sites More sharing options...
PointC Posted April 8, 2020 Share Posted April 8, 2020 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 2 Link to comment Share on other sites More sharing options...
nikolev Posted April 8, 2020 Author Share Posted April 8, 2020 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 More sharing options...
GreenSock Posted April 8, 2020 Share Posted April 8, 2020 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? 3 Link to comment Share on other sites More sharing options...
nikolev Posted April 8, 2020 Author Share Posted April 8, 2020 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 More sharing options...
OSUblake Posted April 8, 2020 Share Posted April 8, 2020 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 1 Link to comment Share on other sites More sharing options...
OSUblake Posted April 8, 2020 Share Posted April 8, 2020 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="" /> 6 Link to comment Share on other sites More sharing options...
PointC Posted April 8, 2020 Share Posted April 8, 2020 @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: 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. 4 1 Link to comment Share on other sites More sharing options...
PointC Posted April 8, 2020 Share Posted April 8, 2020 PS Here's your AI file with the Copy/Paste solution applied. See the Pen jObNjBo by PointC (@PointC) on CodePen 2 1 Link to comment Share on other sites More sharing options...
nikolev Posted April 8, 2020 Author Share Posted April 8, 2020 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! 2 Link to comment Share on other sites More sharing options...
GreenSock Posted April 8, 2020 Share Posted April 8, 2020 Very nice work, @PointC! 🙌 And @OSUblake also gets bonus points for making use of another GreenSock tool Happy tweening @nikolev! 3 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