Understanding Linear Interpolation in UI Animation
Nash Vail
5614

Nice article!. I would do a few little changes. One related with requestAnimationFrame(updateCallback). I should put a link to the https://developer.mozilla.org/docs/Web/API/Window/requestAnimationFrame to clarify that this is part of the javascript browser API.

And another related with the overall animation because it must be noticed that for the overall animation this is not exactly linear and could be confused due that this is an ease-out animation. You start fast and you end slow, reducing the speed of motion as you go toward the end. This is because you are varying the initial position and you are maintaining the fraction as a constant. So, this is just linear interpolation for the in-frame motion calculation. But, another approach is to vary the fraction instead of the start position between frames. This will produce a constant speed motion like in your first example where you increased x and y by adding 1 to them.

Like what you read? Give Gabriel Avellaneda a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.