5.2.6 Easings

Easing functions are essential for animation. Each easing function provides a different path to go from an initial value to a final value. These functions make an excellent companion to the tween procedure (see Tweening). Experiment with them to figure out which function makes an animation look the best.

Pro tip: smoothstep provides nice results most of the time and creates smoother animation than using linear.

Procedure: linear t

Procedure: smoothstep t

Procedure: ease-in-quad t

Procedure: ease-out-quad t

Procedure: ease-in-out-quad t

Procedure: ease-in-cubic t

Procedure: ease-out-cubic t

Procedure: ease-in-out-cubic t

Procedure: ease-in-quart t

Procedure: ease-out-quart t

Procedure: ease-in-out-quart t

Procedure: ease-in-quint t

Procedure: ease-out-quint t

Procedure: ease-in-out-quint t

Procedure: ease-in-sine t

Procedure: ease-out-sine t

Procedure: ease-in-out-sine t