elm-community / easing-functions / Ease

An easing function is used in animation to make a transition between two values appear more lifelike or interesting. Easing functions can make sliding panels or bouncing menus appear to be physical objects.

All easing functions expect inputs to be bewteen zero and one, and will typically output in that range. Easing "in" happens at the start of the transition, easing "out" at the end, and "inOut" on both sides. The functions provided here are meant to match the graphical examples on easings.net.

import Ease
n = 10

List.map (\i -> Ease.inQuad (toFloat i / n)) (List.range 0 n)

--> [0, 0.01, 0.04, 0.09, 0.16, 0.25, 0.36, 0.49, 0.64, 0.81, 1]

List.map (\i -> Ease.outCubic (toFloat i / n)) (List.range 0 n)

--> [0, 0.271, 0.488, 0.657, 0.784, 0.875, 0.936, 0.973, 0.992, 0.999, 1]

Easing functions


type alias Easing =
Basics.Float -> Basics.Float

A type alias to make it easier to refer to easing functions.

bezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float

A cubic bezier function using 4 parameters: x and y position of first control point, and x and y position of second control point.

See here for examples or here to test.

linear : Easing

A linear ease, equal to the identity function. Linear eases often appear mechanical and unphysical.

inQuad : Basics.Float -> Basics.Float

outQuad : Easing

inOutQuad : Easing

inCubic : Basics.Float -> Basics.Float

outCubic : Easing

inOutCubic : Easing

inQuart : Basics.Float -> Basics.Float

outQuart : Easing

inOutQuart : Easing

inQuint : Basics.Float -> Basics.Float

outQuint : Easing

inOutQuint : Easing

inSine : Easing

outSine : Basics.Float -> Basics.Float

inOutSine : Easing

inExpo : Basics.Float -> Basics.Float

outExpo : Easing

inOutExpo : Easing

inCirc : Easing

outCirc : Basics.Float -> Basics.Float

inOutCirc : Easing

inBack : Basics.Float -> Basics.Float

outBack : Easing

inOutBack : Easing

inBounce : Easing

outBounce : Basics.Float -> Basics.Float

inOutBounce : Easing

inElastic : Basics.Float -> Basics.Float

outElastic : Easing

inOutElastic : Easing

Combining easing functions

reverse : Easing -> Basics.Float -> Basics.Float

Reverse an Easing function. If an object follows an easing function and then the reversed easing function, it retraces exactly the same path, backwards.

Graphically, this flips the function around x = 0.5.

flip : Easing -> Basics.Float -> Basics.Float

Flip an easing function. A transition that starts fast and continues slow now starts slow and continues fast.

Graphically, this flips the function around x = 0.5 and then around y = 0.5.

inOut : Easing -> Easing -> Basics.Float -> Basics.Float

Makes an easing function using two other easing functions. The first half the first Easing function is used, the other half the second.

retour : Easing -> Basics.Float -> Basics.Float

Makes an Easing function go to the end first and then back to the start. A transition that starts low and goes high now starts low, goes high at halfway, and then goes low again.