Easing

Easing functions specify the rate of change over time and are useful when working with Svelte's built-in transitions and animations as well as the tweened and spring utilities. svelte/easing contains 31 named exports, a linear ease and 3 variants of 10 different easing functions: in, out and inOut.

You can explore the various eases using the ease visualiser in the examples section.

ease	in	out	inOut
back	`backIn`	`backOut`	`backInOut`
bounce	`bounceIn`	`bounceOut`	`bounceInOut`
circ	`circIn`	`circOut`	`circInOut`
cubic	`cubicIn`	`cubicOut`	`cubicInOut`
elastic	`elasticIn`	`elasticOut`	`elasticInOut`
expo	`expoIn`	`expoOut`	`expoInOut`
quad	`quadIn`	`quadOut`	`quadInOut`
quart	`quartIn`	`quartOut`	`quartInOut`
quint	`quintIn`	`quintOut`	`quintInOut`
sine	`sineIn`	`sineOut`	`sineInOut`

Next Script ->