Options
All
  • Public
  • Public/Protected
  • All
Menu

A library of easing functions, mapping an input in the range 0.0 to 1.0 to an output in the same range. (Technically you can feed the math values outside that range, but it doesn't make sense in the context of easing). This is primarily used for controlling animations.

Remember that the easing functions are named after the shape of the curve of the output; not the visual effects they are used to create. So, e.g., to create a nice appearance, you typically want easeOut, i.e. the element appears at full speed, and decelerates as it settles when the interpolation reaches its target.

Most functions courtesy of Gaƫtan Renaudeau, https://gist.github.com/gre/1650294

See also https://easings.net/

Index

Functions

ballistic

  • ballistic(t: number): number
  • Moves from 0 to 1 and back to 0 in a parabolic curve. The inverse of parabolic. This is strictly speaking not an "easing" since it doesn't ease from 0 to 1, but it is useful for temporary highlights.

    Parameters

    • t: number

    Returns number

Const easeIn

  • easeIn(t: number): number
  • Alias for easeInQuad

    Parameters

    • t: number

    Returns number

easeInCubic

  • easeInCubic(t: number): number
  • Accelerating from zero velocity

    Parameters

    • t: number

    Returns number

Const easeInOut

  • easeInOut(t: number): number

easeInOutCubic

  • easeInOutCubic(t: number): number
  • Acceleration until halfway, then deceleration

    Parameters

    • t: number

    Returns number

easeInOutQuad

  • easeInOutQuad(t: number): number
  • Acceleration until halfway, then deceleration

    Parameters

    • t: number

    Returns number

easeInOutQuart

  • easeInOutQuart(t: number): number
  • Acceleration until halfway, then deceleration

    Parameters

    • t: number

    Returns number

easeInOutQuint

  • easeInOutQuint(t: number): number
  • Acceleration until halfway, then deceleration

    Parameters

    • t: number

    Returns number

easeInQuad

  • easeInQuad(t: number): number
  • Accelerating from zero velocity

    Parameters

    • t: number

    Returns number

easeInQuart

  • easeInQuart(t: number): number
  • Accelerating from zero velocity

    Parameters

    • t: number

    Returns number

easeInQuint

  • easeInQuint(t: number): number
  • Accelerating from zero velocity

    Parameters

    • t: number

    Returns number

Const easeOut

  • easeOut(t: number): number
  • Alias for easeOutQuad

    Parameters

    • t: number

    Returns number

easeOutCubic

  • easeOutCubic(t: number): number
  • Decelerating to zero velocity

    Parameters

    • t: number

    Returns number

easeOutQuad

  • easeOutQuad(t: number): number
  • Decelerating to zero velocity

    Parameters

    • t: number

    Returns number

easeOutQuart

  • easeOutQuart(t: number): number
  • Decelerating to zero velocity

    Parameters

    • t: number

    Returns number

easeOutQuint

  • easeOutQuint(t: number): number
  • Decelerating to zero velocity

    Parameters

    • t: number

    Returns number

linear

  • linear(t: number): number
  • No easing, no acceleration

    Parameters

    • t: number

    Returns number

parabolic

  • parabolic(t: number): number
  • Moves from 1 to 0 and back to 1 in a parabolic curve. The inverse of ballistic. This is strictly speaking not an "easing" since it doesn't ease from 0 to 1, but it is useful for temporary highlights.

    Parameters

    • t: number

    Returns number