Smoothing/Easing an animation along curve


I am having quite a bit of problems with an animation that moves a object (“card”) along a 3-point curve. A playground will show you the issues.

The animation works but there are two issues:

  1. the “card” does not precisely follow the curve. As it is a 3 points bezier curve it goes through the points and not the drawn curve.
  2. I wanted to ease out at the end of the curve but, for some reason, it eases out at the end of each segment (I call “segment” the distance between two points).

If someone could help, I would be grateful as I have run out of ideas to test.

Animation along curve | Babylon.js Playground (

@PatrickRyan, could you have a look ?

1 Like

Thank you!

I understand a little bit better now as I see that I’ve calculated each key and passed keys to the animation. I don’t see why the easing out is not working though.

I’ll spend more time tonight. Thanks!

1 Like

@SpikeSpiegel, the easing function for an animation is what is used by each keyframe. So, if you choose an easing function that is ease in and out, you will see the motion defined by the easing function at each keyframe which is what you see in your example. In @Pryme8’s example, there are 300 keys set in the animation so you don’t see the influence of the easing because all frames of the animation have a key baked to them so there is nothing to ease. Basically, if you want to do it this way, you will need to add extra keys toward the end with smaller distance increments which will bake in your ease to the frames of animation. Another way you can do this is to break the animation path into two animations that play back to back, one that takes the curved path with keyframes set at each point of the curve, but stopping short of the green card, and a second animation that moves the card the last bit starting from the position of the last frame of the last animation and ending in the final position of the green card. This animation would have two frames and an easing function. This would give you the precision of following the path and lead to an eased motion at the end. That eased motion would be straight, but you could shape the traveled curved path to look like the second animation naturally follows the first.

ok! I undestand better know. When I compute the keys, I leave no room for easing… I should have thought of this. I’ll have a look on this with a new mind. Thanks!

1 Like