How to use easing functions to improve lerp/slerp


I am animating a gltf skeleton dynamically and interpolating between position, rotation, scale for each bone.

Using lerp and slerp works, but it still looks very sudden and unnatural, so I have been trying to use easing functions to improve the quality of interpolation a bit.

For example I am using .lerpVectors(a, b, t) like so. The value t is calculated using my render loop: I start at 0 and do t += 0.01 until t >= 1.

Now to make use of easing functions I was trying to pass t through like so Math.Utils(t, 0, 1), but I am not seeing any difference in the speed of interpolation. I am also unsure whether updating t with t += 0.01 in my render loop is correct. I have read that one should scale this by deltaTime, but then my values go from 0 to 1 too quickly.

Thanks for any advice on how to lerp in a smoother way.

The next simplest after lerp is probably a quadratic filter with ease:

f = -ease * t * t + (1 + ease) * t); // ease [-1, 1]

it creates motions like this:

Could you explain a bit more the reasoning behind this quadratic filter? What is ‘ease’ in this context?

Most of these functions just map input to output using some non-linear function, ease is just a parameter of the filter function that allows you to create different curves, in this case something that either slows down at the end or at the beginning. With ease = 0 you get a straight line, so it’s lerp.

ease > 0 boosts the input, making something to change faster than lerp, ease < 0 suppresses it


Ok, that clears it up thank you. So this is basically 3 different easing functions in one dependent on the parameter ‘ease’? Wouldn’t passing the ‘alpha’ parameter of lerpVectors through a manually defined easing function e.g. smoothstep, before calling .lerpVectors(a1, a2, smoothstep(t)) achieve similar results?


Lerp doesn’t add anything to the result, it maps values one to one, if you already use quadratic filter or smoothstep, then just use that result directly but technically yes.

Added another sphere that uses smoothstep as the input for lerp:

1 Like

Cool thanks, I have a few approaches in mind now.

1 Like

The JSFiddles do not work anymore. :frowning_face:
I wanted to add them to the collection.

@hofk Not sure what happened but I found this one:

Ok. Added this exanple. :slightly_smiling_face: