# 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

// decelerating to zero velocity

// 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.