Jump to content
Search Community

Advice on improving this bit of animation

nikolev test
Moderator Tag

Recommended Posts

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: 
image.thumb.png.17b2d9214ef64b4c917402f9149800d4.png
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. 

image.thumb.png.0be17fd0a2c2b9e5d830a30f22f1cd70.png
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. 

image.thumb.png.3998e2bd58f880f1228bd7970c687440.png
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

  • Like 1
Link to comment
Share on other sites

5 minutes ago, nikolev said:

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 con first. Is there a way to do this without breaking the melting part into 2 pieces?

Nope, you can't morph part of an element before another part. Using 2 pieces is the way to go for that effect.

 

6 minutes ago, nikolev said:

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 con and the pin ice cream ball.

It can't be less than a pixel :) It probably was a pixel. Most likely that's rendering error due to a partial pixel and is based on the display size. It can be fixed in a couple of ways, like being more careful in how you create the SVG (making sure that the points/lines align with pixels on the size you're going to display the SVG or by building in a little wiggle room) or in some cases applying a 3D transform to the parent to force more careful rendering. Hard to help without seeing it ourselves.

 

10 minutes ago, nikolev said:

3. At a specific point of the animation the ice cream ball is overlapping the con. What would be a better way to change the shape of the ball to avoid this defect? 

Have the shape that morphs only be as wide as the start of the ice cream to the point at which the cone stops.

  • Like 1
Link to comment
Share on other sites

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. :)

  • Like 2
Link to comment
Share on other sites

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

 

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.

image.png.7216d0c00f9cca945a45c40ae1478f53.png

 

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:

image.png.a712289a9b1d6e3aeeb76b644ed3a0dd.png

 

Could it be that the browser is not rendering it correctly? Or am I doing something wrong?

 

Thank you guys.

 

Link to comment
Share on other sites

4 minutes ago, nikolev said:

Could it be that the browser is not rendering it correctly? Or am I doing something wrong?

You have a good eye! I could hardly see it when looking at your zoomed in image. I don't see it on my computer. It's probably rendering error. You might be able to figure out a way to get rid of it but I'm betting it's not worth your time.

 

Like I mentioned above, you can work around it by making the SVG extend past what you need it to cover.

  • Like 2
Link to comment
Share on other sites

1 hour ago, nikolev said:

extra pixel

 

You can leverage SVG filters to correct things like this.

 

In this Codepen example you can see @chrisgannon uses a filter with an ID of edgeClean, which can be seen extracted below.

 

See the Pen NqyWOw by chrisgannon (@chrisgannon) on CodePen

 

...
<defs> 
  <filter id="edgeClean" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncA type="table" tableValues="0 .5 1 1" />
    </feComponentTransfer>
  </filter>  
</defs>
...
<g filter="url(#edgeClean)">

This can be used to prevent the hairline phenomenon.

 

I'm not sure if this is something Chris came up with but he is one of the first people I saw using it. 👍 Here is another example by someone that using a different name but its the same setup.

 

See the Pen JKmRwY by grayghostvisuals (@grayghostvisuals) on CodePen

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

That hairline can definitely be tricky and irritating. I'd agree with Blake and suggest adding some overlap. Here's a really old pen of mine with some square paths morphing to circles. You can see on line 11 that I had to add a small stroke to blend everything together. If you comment out that line, you'll see that this suffers from the same hairline problem even though the paths line up in AI.

 

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

 

Happy tweening.

:)

 

 

  • Like 3
Link to comment
Share on other sites

Ha, or maybe straight lines in general. Fun discussion, like with most things different approaches are applicable in different scenarios for different outcomes. I think its a nice usage of an SVG filter , which can work in various cases where setting a stroke or even reworking original artwork are not applicable if the final result is acceptable. Of course if things can be considered and setup correctly initially thats always optimal. I personally have found this approach to be useful in various occasions. ¯\_(ツ)_/¯

  • Like 1
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.
×
×
  • Create New...