nikolev

6 hours ago, PointC said:

Convert elements to compound paths when possible. Also use the background rectangle I mentioned in the other thread and keep all elements within those bounds too.

 

In your demo I'm not sure why the ellipse had the skew, scale and position changes on it. A simple ellipse probably would have done the trick. You can also animate the cx/cy attributes for ellipses. Not that I'm saying that would be better. Just a general FYI. It's also helpful to remember that there is some crossover between CSS properties and SVG attributes. x/y etc... Just little things to keep in mind.

 

Best of luck. I'm looking forward to seeing the completed ice cream cone project when it's ready. Happy tweening.

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

2 hours ago, PointC said:

In this case you have a transform matrix applied to that element so the travel distance at first glance appears to be incorrect, but that is the behavior I would expect. 

 

Here's a quick demo which may help.

 

 

See the Pen

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

by PointC (@PointC) on CodePen

 

 

Three circular paths. Red --> no matrix, Green & Blue --> -50px change in the y position via a matrix. Now I animate Red and Green from y:150 and Blue from y:"+=150". You can see that Red and Green start at the same position, but Green travels to its home of -50 we set in the matrix. It actually moved 200 pixels rather than 150. Whereas Blue was set to a relative distance so it only traveled the expected 150px.

 

In your case, you can use a relative distance as I wrote above, wrap a <g> around that path and animate the group as you've done with most of the other elements or you can redo the vector file so no matrix is applied upon export.

 

Hopefully that makes sense. Happy tweening.

 

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?

1 hour ago, PointC said:

If I correctly understand what you're trying to do, I think you'd want a relative distance for these tweens.

 

gsap.from("#pink-highlight", {y: "+=" + yOffset, duration: 8});

Does that help?

 

Happy tweening.

 

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: 

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!

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

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

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

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.

3 minutes ago, PointC said:

Are you gonna add a little gooey drip?

 

 

 

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: 

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. 

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

2 minutes ago, ZachSaucier said:

Select the rectangle tool and drag from the top left corner of your canvas to the bottom right. Turn on snapping to the artboard to make it easier to get it perfectly aligned.

 

We have a long thread about SVG tips:

 

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

1 hour ago, PointC said:

If you use a background rectangle the same size as your SVG, you won't have these problems. Just make sure you choose the background rectangle along with any elements you want to export or copy/paste and you'll be good to go. I just wrote a little post about this:

Happy tweening.

 

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

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!

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

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!

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.

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.

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.

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

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

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