meo-canvas - v9.0.2
    Preparing search index...

    Variable easingsConst

    easings: {
        inBack: (t: number) => number;
        inBounce: (t: number) => number;
        inCirc: (t: number) => number;
        inCubic: (t: number) => number;
        inElastic: (t: number) => number;
        inExpo: (t: number) => number;
        inOutBack: (t: number) => number;
        inOutBounce: (t: number) => number;
        inOutCirc: (t: number) => number;
        inOutCubic: (t: number) => number;
        inOutElastic: (t: number) => number;
        inOutExpo: (t: number) => number;
        inOutQuad: (t: number) => number;
        inOutQuart: (t: number) => number;
        inOutQuint: (t: number) => number;
        inOutSine: (t: number) => number;
        inQuad: (t: number) => number;
        inQuart: (t: number) => number;
        inQuint: (t: number) => number;
        inSine: (t: number) => number;
        linear: (t: number) => number;
        outBack: (t: number) => number;
        outBounce: (t: number) => number;
        outCirc: (t: number) => number;
        outCubic: (t: number) => number;
        outElastic: (t: number) => number;
        outExpo: (t: number) => number;
        outQuad: (t: number) => number;
        outQuart: (t: number) => number;
        outQuint: (t: number) => number;
        outSine: (t: number) => number;
    } = ...

    The standard easing catalogue.

    Every entry clamps its input, so a track that runs past its own duration holds at its end value rather than continuing to accelerate off the curve.

    Type Declaration

    • inBack: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by a cubic that overshoots — pulls back before it sets off, and overshoots on arrival.

    • inBounce: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by a series of parabolas — lands and bounces, each one smaller than the last.

    • inCirc: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by a quarter circle — idles, then leaves abruptly.

    • inCubic: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by t cubed — the usual choice when nothing else is called for.

    • inElastic: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by a decaying sine — overshoots and wobbles to a stop, like something sprung.

    • inExpo: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by a power of two — almost flat, then a rush — the most extreme of these.

    • inOutBack: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by a cubic that overshoots — pulls back before it sets off, and overshoots on arrival.

    • inOutBounce: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by a series of parabolas — lands and bounces, each one smaller than the last.

    • inOutCirc: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by a quarter circle — idles, then leaves abruptly.

    • inOutCubic: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by t cubed — the usual choice when nothing else is called for.

    • inOutElastic: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by a decaying sine — overshoots and wobbles to a stop, like something sprung.

    • inOutExpo: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by a power of two — almost flat, then a rush — the most extreme of these.

    • inOutQuad: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by t squared — the gentlest of the power curves.

    • inOutQuart: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by t to the fourth — noticeably sharper than cubic.

    • inOutQuint: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by t to the fifth — the steepest of the plain powers.

    • inOutSine: (t: number) => number

      Accelerates from rest and slows to rest again, symmetric about the midpoint.

      Shaped by a quarter turn of a sine wave — the softest curve here, barely a curve at all.

    • inQuad: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by t squared — the gentlest of the power curves.

    • inQuart: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by t to the fourth — noticeably sharper than cubic.

    • inQuint: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by t to the fifth — the steepest of the plain powers.

    • inSine: (t: number) => number

      Starts at rest and accelerates, so the movement lands at full speed.

      Shaped by a quarter turn of a sine wave — the softest curve here, barely a curve at all.

    • linear: (t: number) => number

      No easing: the value moves at a constant rate from start to finish.

    • outBack: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by a cubic that overshoots — pulls back before it sets off, and overshoots on arrival.

    • outBounce: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by a series of parabolas — lands and bounces, each one smaller than the last.

    • outCirc: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by a quarter circle — idles, then leaves abruptly.

    • outCubic: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by t cubed — the usual choice when nothing else is called for.

    • outElastic: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by a decaying sine — overshoots and wobbles to a stop, like something sprung.

    • outExpo: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by a power of two — almost flat, then a rush — the most extreme of these.

    • outQuad: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by t squared — the gentlest of the power curves.

    • outQuart: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by t to the fourth — noticeably sharper than cubic.

    • outQuint: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by t to the fifth — the steepest of the plain powers.

    • outSine: (t: number) => number

      Starts at full speed and slows to rest, which is what most interface motion wants.

      Shaped by a quarter turn of a sine wave — the softest curve here, barely a curve at all.

    easings.outCubic(0.5)  // 0.875
    track({ from: 0, to: 1, duration: 1, ease: 'outCubic' })

    Settings
    Member Visibility