Easing Functions Cheat Sheet

Easing functions

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

All easings

In CSS, this function can be implemented using @keyframes:

Size

Position

Transparency

Davinci Resolve Expression

Below you see the code of this easing function written in LUA for Davinci Resolve Expression. This will animate from 0 (the beginner of the animation) to 1 (the end of the animation).

Below you see the code of this easing function written in TypeScript. The variable x represents the absolute progress of the animation in the bounds of 0 (beginning of the animation) and 1 (end of animation).

function (x: number): number {
}

Check easing for changes:

That function:

That function

Linear function:

Linear function