Basics

Guides

Easing / Timing Functions

Easing controls the rate at which an animation progresses. The default easing of the Web Animation API is linear. It evenly tweens between values. This can look unnaturally smooth because things in nature accelerate and decelerate at start and end. A custom cubic-bezier function or using ease is a good place to start toward creating natural looking animations.

Add easing with any supported CSS timing function to the animation:

consttiming=just.animate({targets:'#element',duration:650,easing:'ease-in',// or 'easeIn'web:{opacity:[0,1]}})

Just Animate assumes the easing is ease if one is not provided. This is applied to between all keyframes individually.

Just Animate includes the following timing keywords in addition to cubic-bezier() and steps() from CSS: