Skip to content

Instantly share code, notes, and snippets.

@krapjost
Created April 23, 2023 02:39
Show Gist options
  • Save krapjost/5b215ca29ffa28aa3548e49f178b779e to your computer and use it in GitHub Desktop.
Save krapjost/5b215ca29ffa28aa3548e49f178b779e to your computer and use it in GitHub Desktop.
easing function
type EaseFunc = (t: number) => number
interface Easing {
[key: string]: EaseFunc
}
export const easing: Easing = {
// 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 < 0.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 < 0.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 < 0.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) =>
t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t,
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment