Ease In

Apply the easing curve when coming from values of 0 towards 0.5.

Ease Out

Apply the easing curve when coming from values of 1 towards 0.5.

Linear

No change. X = X

Sine

The Sine easing function produces a smooth, wave-like progression. It starts slowly, accelerates in the middle, and decelerates towards the end, making it ideal for creating natural, fluid movements.

‍f(t) = -0.5  ⋅ (cos(t ⋅ pi) - 1)

Quadratic

Quadratic easing is straightforward, generating a parabolic curve. It accelerates linearly for a smooth transition, suitable for simple easing with a gentle curve.

f(t) = 2 ⋅ t^2 if t > 0.5, otherwise f(t) = -1 + (4 - 2 ⋅ t) ⋅ t

Cubic

This function intensifies easing by creating a more pronounced curvature. It accelerates and decelerates faster than quadratic easing, which can make movements feel more dynamic.

‍f(t) = 4 ⋅ t^3 if t < 0.5 , otherwise f(t) = (t - 1) ⋅ (2t - 2)^2 + 1

Quartic

Quartic easing has a sharper acceleration and deceleration than cubic easing, creating an even steeper curve. It’s effective for rapid transitions that need to start or stop abruptly.

‍f(t) = 8 ⋅ t^4 if t > 0.5 , otherwise f(t) = 1 - 8 ⋅ (t - 1)^4

Quintic

The most intense of the polynomial easings, Quintic creates a very steep curve, accelerating and decelerating extremely quickly. Useful for short, impactful transitions.

‍f(t) = 16 ⋅ t^5 if t > 0.5 , otherwise f(t) = 1 + 16 ⋅ (t - 1)^5

Exponential

Exponential easing starts almost imperceptibly slow and speeds up (or vice versa) very quickly. It’s ideal for movements that need a dramatic change in velocity.

‍f(t) = 0.5 ⋅ 2^{20 ⋅ t - 10} if t > 0.5 , otherwise f(t) = 1 - 0.5 ⋅ 2^{-20 ⋅ t + 10}

Circular

Circular easing mimics a circular motion, starting and stopping gradually. It provides a smooth curve with a subtle easing effect, making transitions feel natural.

‍f(t) = 0.5 ⋅ (1 - sqrt{1 - 4 ⋅ t^2}) if t > 0.5 , otherwise f(t) = 0.5 ⋅ (sqrt{1 - (2t - 2)^2} + 1)

Back

The Back easing function overshoots slightly, creating a "rubber band" effect by pulling back before moving forward. It’s effective for elastic transitions that feel bouncy.

‍f(t) = 0.5 ⋅ ((2 * t)^2 ⋅ ((c + 1) ⋅ 2 ⋅ x - c)) if t > 0.5 , otherwise f(t) = 0.5 ⋅ ((2 ⋅ t - 2)^2 ⋅ ((c + 1) ⋅ (t ⋅ 2 - 2) + c) + 2)) where c = 1.70158 ⋅ 1.525

Elastic

Elastic easing emulates an oscillating spring effect, rapidly bouncing back and forth. It’s a highly dynamic easing suitable for effects that require elasticity.

Bounce

Bounce easing mimics a bouncing effect, with a decaying series of rebounds as if an object is falling and bouncing off a surface. Perfect for effects that simulate gravity.

Custom

Edit a curve by adding, removing, and moving points around.