Easing Functions

Inspired from http://gizma.com/easing/. Only considering the t value for the range [0, 1] => [0, 1].

export const ease = {
  // no easing, no acceleration
  linear: (t) => t,

  // accelerating from zero velocity
  easeInQuad: (t) => t*t,

  // decelerating to zero velocity
  easeOutQuad: (t) => t*(2-t),

  // acceleration until halfway, then deceleration
  easeInOutQuad: (t) => t<.5 ? 2*t*t : -1+(4-2*t)*t,

  // accelerating from zero velocity 
  easeInCubic: (t) => t*t*t,

  // decelerating to zero velocity 
  easeOutCubic: (t) => (--t)*t*t+1,

  // acceleration until halfway, then deceleration 
  easeInOutCubic: (t) => t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1,

  // accelerating from zero velocity 
  easeInQuart: (t) => t*t*t*t,
  // decelerating to zero velocity 
  easeOutQuart: (t) => 1-(--t)*t*t*t,
  
  // acceleration until halfway, then deceleration
  easeInOutQuart: (t) => t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t,

  // accelerating from zero velocity
  easeInQuint: (t) => t*t*t*t*t,

  // decelerating to zero velocity
  easeOutQuint: (t) => 1+(--t)*t*t*t*t,

  // acceleration until halfway, then deceleration 
  easeInOutQuint: (t) => <.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t,
}

Content properties

  • Type: Note
  • Category: JavaScript
  • Tags: frontend, javascript
  • Custom slug: None

This is a preview of a simpler page design that I'm working on over the next little bit. I've finally added a (click it!) but there's still a few pages left to be converted so don't worry if things don't look quite right just yet 🙏

Content on blog pages use the CC-BY-SA license. The source code and notes use the MIT license. Unsure? Mention me on Mastodon.