Suggestions for Smoother Keyframe Animation

[JuanFra]

Hey there!

I've been closely following the Express Basics Course and I'm currently working on the challenge involving a slime animation using keyframes. I have attached my codepen to this forum entry and would greatly appreciate any suggestions or improvements you can provide.

One issue I've noticed is that the transitions between each keyframe stage feel a bit rough. To address this, I have applied the sine ease to the entire animation. However, at every keyframe, it seems like something is missing, and the overall smoothness is not fully achieved.

I would love to hear your thoughts on how I can enhance the animation and make the transitions between keyframes seamless. Are there any specific adjustments I can make to improve the fluidity of the animation?

Thank you in advance for your valuable assistance!

See the Pen eYQZrbP by franc014 (@franc014) on CodePen

[GreenSock]

How about this?: 

easeEach: "sine.inOut"

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

 

 

[JuanFra]

Thanks for your help, Jack. I think it looks better now!
I tried the option `easeEach: "sine.inOut"` but I think the difference between eases is minimum (referring to the global ease).
Maybe, are there other options to improve it a little further?
 

[GreenSock]

The fundamental problem is that you're moving various distances with the same amount of time between the keyframes. So imagine if you make something move 100px over the course of 1 second, and then 300px over the course of the next second...there is no ease that will "fix" that change in speed. The one is moving 3x the distance in the same amount of time. So you're doing that multiple times in your animation, thus it'll look like the thing is speeding up and slowing down. You'd have to do the calculations to place the keyframes according to the distances you're moving so that the pixels-per-second are consistent.