Easing Settings

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 \cdot (\cos(t \cdot \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) = \begin{cases} 2 \cdot t^2 & \text{if } t > 0.5 \\ -1 + (4 - 2 \cdot t) \cdot t & \text{otherwise} \end{cases} \]

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) = \begin{cases} 4 \cdot t^3 & \text{if } t < 0.5 \\ (t - 1) \cdot (2t - 2)^2 + 1 & \text{otherwise} \end{cases} \]

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) = \begin{cases} 8 \cdot t^4 & \text{if } t > 0.5 \\ 1 - 8 \cdot (t - 1)^4 & \text{otherwise} \end{cases} \]

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) = \begin{cases} 16 \cdot t^5 & \text{if } t > 0.5 \\ 1 + 16 \cdot (t - 1)^5 & \text{otherwise} \end{cases} \]

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) = \begin{cases} 0.5 \cdot 2^{20 \cdot t - 10} & \text{if } t > 0.5 \\ 1 - 0.5 \cdot 2^{-20 \cdot t + 10} & \text{otherwise} \end{cases} \]

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) = \begin{cases} 0.5 \cdot (1 - \sqrt{1 - 4 \cdot t^2}) & \text{if } t > 0.5 \\ 0.5 \cdot (\sqrt{1 - (2t - 2)^2} + 1) & \text{otherwise} \end{cases} \]

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) = \begin{cases} 0.5 \cdot ((2 \cdot t)^2 \cdot ((c + 1) \cdot 2 \cdot t - c)) & \text{if } t > 0.5 \\ 0.5 \cdot ((2 \cdot t - 2)^2 \cdot ((c + 1) \cdot (t \cdot 2 - 2) + c) + 2) & \text{otherwise} \end{cases} \]

\[ \text{Where } c = 1.70158 \cdot 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.

\[ f(t) = \begin{cases} 0.5 \cdot (2^{-10 \cdot t} \cdot \sin((t - 0.075) \cdot (2 \cdot \pi) / 0.3) + 1) & \text{if } t > 0.5 \\ 0.5 \cdot (2^{10 \cdot (t - 1)} \cdot \sin((t - 1 - 0.075) \cdot (2 \cdot \pi) / 0.3)) & \text{otherwise} \end{cases} \]

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.

\[ f(t) = \begin{cases} 0.5 \cdot (1 - \text{bounceOut}(1 - 2t)) & \text{if } t > 0.5 \\ 0.5 \cdot \text{bounceOut}(2t) & \text{otherwise} \end{cases} \]

Custom

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