nikolev

Thanks, that's awesome. I am using the rectangle tip all the time now. Major pain relief!

Thanks for spending the time to put this visual example. I appreciate it. AI added the matrix. If I want to get rid of it, is there a way to tell AI not to add it?

That's exactly what I was trying to achieve. I thought that the below code was actually offseting it relatively to the original position. Isn't that the same as saying "transform: translateY(-150px)"? gsap.from("#pink-highlight", {y: yOffset, duration: 8});

Hey guys so I added a tiny highlight to my ice cream. However when I move it down with gsap.to() it starts at a higher point then the other elements. I put the same Y offset for the pink ice cream ball and the highlight. Yet the highlight starts higher. If I switch the y offset for the higlight to -130 instead of -150 it looks more like what I am trying to achieve but I am not sure why. Beginning: End: Here's my codepen: https://codepen.io/nikolev/pen/LYpYvoM P.S. I tried using gsap.fromTo() but I get "Uncaught TypeError: gsap.fromТо is not a function". Is there a file I haven't imported correctly? Thanks!

@ZachSaucier Today I was adjusting the animation again and I noticed that I have the extra pixel or so showing up even though I had aligned everything in illustrator. This time I have a codepen link to show you: https://codepen.io/nikolev/pen/LYpYvoM It's visible for the middle melting piece. You can see the cone behind it showing up. I tried to zoom in to make it more clear. When I look at the Y coordinate in AI this it both the cone and the melting piece have 287px. So same Y value for all 3 pieces: Could it be that the browser is not rendering it correctly? Or am I doing something wrong? Thank you guys.

That's a great idea! I will need to study your code in a minute and see how you did that. @ZachSaucier I used "snap to point" and #2 got resolved. Thanks for the advice. I thought it was a glitch in Illustrator but it turned to be my lack of experience.

@ZachSaucier Thanks for the quick response! I will work on #2 and submit another thread to show you what it looks like if by any chance I can't get it to fix.

Hello amazing folks! So I took my melting piece and started building an ice-cream. It's going okay but I am sure there's a lot of things that I can do better. I am really hopeful to hear some advice from the pros here. Btw @PointC I started using the background rectangle advice that you gave me and that alone has been a game changer! Thank you so much. Anyways here's what I have right now: https://codepen.io/nikolev/pen/LYpYvoM There's a few things I dislike about it: 1. I had to break down the melting piece into 2 pieces. That's because I wanted the middle part of it to start melting first to reflect on the bottom of the pink ice cream ball touching the cone first. Is there a way to do this without breaking the melting part into 2 pieces? Please take a look at the screenshot above to see better. I have a "middle" ending part and "endings" melting part. 2. Another thing I would like to improve is the starting piece. I had to make the starting points(which I call the "unmelted" pieces) pink rectangles. Originally I had it as a path with no stroke and no fill. However once that piece was to expand to become "melted" there was a small gap above it(less than a pixel) between the melted piece the cone and the pin ice cream ball. So the cone was showing between the melted piece and the ice cream ball. That gap was not visible in illustrator and I didn't know how to fix that differently. I expanded the starting piece into a rectangle to overlap the cone. However that seems wrong to me as I have to first hide it and then display at after the pink ball is close enough so it can hide it. Sorry I forgot to take a screenshot of what that gap looks like. 3. At a specific point of the animation the ice cream ball is overlapping the cone. What would be a better way to change the shape of the ball to avoid this defect? To summarize I feel like I have way too many moving pieces and I would like to optimize my development process. If you have any additional feedback please let me know. I am having so much fun with this and would LOVE to learn as much as I possibly could.

That's so awesome I feel like a kid in a candy shop. Gotta take some PTO next.

@PointC That's a great advice! What would be the best way to make a background rectangle with the size of my SVG? Is there a trick to tel AI to make a rectangle to wrap pixel perfect around the SVG? Also do you have other tips like this one?

Hey guys, it's the guy with the melting svg again. ? Here's my codepen for the day: https://codepen.io/nikolev/pen/LYpYvoM I am trying to figure out how to position "#pink-piece-melted, #pink-piece" without the use of CSS Transform(transform: translate(53px,72px); )? Ideally I would have that handled inside their SVG properties. Here's what they look like without applying any CSS: I exported them separately from the cone's SVG in illustrator and thus they ended up being in a completely different location the page. Then I had to apply CSS but the CSS is an extra step I would like to avoid. If I export the cone and the melting SVGs together they will be lined up correctly. However I want to be able to export my project in pieces and work on them separately. I was wondering if I can leverage the MotionPathHelper to move those around and somehow save the new values? Thanks!

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!

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.

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

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: https://codepen.io/nikolev/pen/KKdPWEy EDIT 1 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.

Here's the codepen link: https://codepen.io/nikolev/pen/KKdPWEy P.S. Thanks for your prompt responses. I really appreciate it!

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?

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