Easing Animations Using JavaScript

Easing functions are mathematical equations that determine how an animation's speed changes over time. Here we are going to create animations with easing functions using some JavaScript coding of JavaScript.

First, we need to get the easing function we need. There are lots of easing functions, and we can create new ones if required. You can find a set of the most common easing functions from easings.net. They have given the JavaScript functions to calculate easing values. When we provide a linear value between 0 and 1 to those functions, they return us the easing value between 0 and 1. So you can select one of the easing functions, or list any of them you want.

// set of easing functions
const easings = {
  easeInSine: x => 1 - Math.cos((x * Math.PI) / 2),
  easeInQuad: x => x * x,
  easeInQuint: x => x * x * x * x * x,
  easeOutCirc: x => Math.sqrt(1 - Math.pow(x - 1, 2)),
  easeOutQuint: x => 1 - Math.pow(1 - x, 5)
}

Now we can use the requestAnimationFrame method to create an animation loop. This MDN article has the full description on using it. Below, we have created an update function and looped it using requestAnimationFrame. Also, remember that this returns us the current timestamp, same as performance.now(). We can use it to find how much time is spent from the moment the animation loop started.

// update function
const update = currentTime => {
  // use current time
  console.log(currentTime)
  // request next frame
  requestAnimationFrame(update)
}

// start update function loop
requestAnimationFrame(update)

Let's calculate the animation's spent time. For that, we need to remember the start time, then subtract it from the current time inside the animation loop. Look at the modified update loop.

// update function
const update = currentTime => {
  // calculate the spent time
  const timeSpent = currentTime - startTime
  // request next frame
  requestAnimationFrame(update)
}

// remember current time as start time
const startTime = performance.now()

// start update function loop
requestAnimationFrame(update)

Now we have to decide the animation time duration, so from the duration we can calculate a value between 0 and 1, and that value can be provided to the easing function to get the output value. Finally, we can multiply it by the animating value (Ex, Element width, height, scale...)

// get element to animation its width
const element = document.querySelector("#example")
// animation duration in milliseconds
const duration = 1500

// update function
const update = currentTime => {
  // calculate the spent time
  const timeSpent = currentTime - startTime
  // get spent time to ero to one range
  const factor = timeSpent / duration
  // run factor through easing function
  const easingFactor = easings.easeInSine(factor)
  // calculate current animation value
  const value = easingFactor * 100
  // animate the element width from 0 to 250 in pixels
  element.style.width = `${value * 250}px`
  // request next frame
  requestAnimationFrame(update)
}

// remember current time as start time
const startTime = performance.now()

// start update function loop
requestAnimationFrame(update)