elm-community/easing-functions/1.0.2

NOTE: this package is not compatible with Elm 0.19.1

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 (i/n)) [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 (i/n)) [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 =
Float -> Float

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

bezier : Float -> Float -> Float -> Float -> Easing

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 : Easing
outQuad : Easing
inOutQuad : Easing
inCubic : Easing
outCubic : Easing
inOutCubic : Easing
inQuart : Easing
outQuart : Easing
inOutQuart : Easing
inQuint : Easing
outQuint : Easing
inOutQuint : Easing
inSine : Easing
outSine : Easing
inOutSine : Easing
inExpo : Easing
outExpo : Easing
inOutExpo : Easing
inCirc : Easing
outCirc : Easing
inOutCirc : Easing
inBack : Easing
outBack : Easing
inOutBack : Easing
inBounce : Easing
outBounce : Easing
inOutBounce : Easing
inElastic : Easing
outElastic : Easing
inOutElastic : Easing

Combining easing functions

reverse : Easing -> Easing

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 -> Easing

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 -> Easing

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 -> Easing

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.