Skip to main content
Easing functions specify the rate of change over time, transforming linear time values into curves that feel more natural. Svelte provides a comprehensive set of easing functions adapted from mattdesl’s easing library.

​
Signature

type EasingFunction = (t: number) => number
​
t
number
required
A value between 0 and 1 representing the progress of the animation
​
return
number
The eased value, typically between 0 and 1 (some easing functions like elastic and back may exceed this range)

​
Usage

Easing functions are commonly used with transitions and animations: 
<script>
  import { fade } from 'svelte/transition';
  import { cubicOut } from 'svelte/easing';

  let visible = $state(true);
</script>

<button onclick={() => visible = !visible}>
  Toggle
</button>

{#if visible}
  <div transition:fade={{ duration: 300, easing: cubicOut }}>
    Fades in and out
  </div>
{/if}

​
Available Functions

​
linear

function linear(t: number): number
No easing, constant rate of change.

​
Quadratic (quad)

function quadIn(t: number): number
function quadOut(t: number): number
function quadInOut(t: number): number
Acceleration using a quadratic curve (t²).

​
Cubic

function cubicIn(t: number): number
function cubicOut(t: number): number
function cubicInOut(t: number): number
Acceleration using a cubic curve (t³). Recommended for most UI animations.

​
Quartic (quart)

function quartIn(t: number): number
function quartOut(t: number): number
function quartInOut(t: number): number
Acceleration using a quartic curve (t⁴).

​
Quintic (quint)

function quintIn(t: number): number
function quintOut(t: number): number
function quintInOut(t: number): number
Acceleration using a quintic curve (t⁵).

​
Sinusoidal (sine)

function sineIn(t: number): number
function sineOut(t: number): number
function sineInOut(t: number): number
Acceleration using a sinusoidal curve. Provides very smooth, gentle easing.

​
Exponential (expo)

function expoIn(t: number): number
function expoOut(t: number): number
function expoInOut(t: number): number
Acceleration using an exponential curve (2^t). Creates dramatic acceleration.

​
Circular (circ)

function circIn(t: number): number
function circOut(t: number): number
function circInOut(t: number): number
Acceleration using a circular curve (sqrt). Sharp acceleration at the end.

​
Back

function backIn(t: number): number
function backOut(t: number): number
function backInOut(t: number): number
Overshoots the target value before settling. Creates a “wind-up” effect.

​
Elastic

function elasticIn(t: number): number
function elasticOut(t: number): number
function elasticInOut(t: number): number
Creates an elastic, spring-like oscillation. More pronounced than back.

​
Bounce

function bounceIn(t: number): number
function bounceOut(t: number): number
function bounceInOut(t: number): number
Bouncing effect, like a ball landing.

​
Easing Variants

Most easing functions come in three variants:
  • In: Starts slow and accelerates (easing at the beginning)
  • Out: Starts fast and decelerates (easing at the end)
  • InOut: Combines both, easing at the beginning and end
For most UI animations, Out or InOut variants feel more natural and responsive.

​
Creating Custom Easing

You can create custom easing functions: 
<script>
  import { fade } from 'svelte/transition';

  // Custom elastic easing
  function customEase(t) {
    return t < 0.5
      ? 4 * t * t * t
      : 1 - Math.pow(-2 * t + 2, 3) / 2;
  }
</script>

<div transition:fade={{ easing: customEase }}>
  Custom easing
</div>

​
Notes

  • All easing functions accept a value t between 0 and 1
  • Some functions (elastic, back, bounce) may return values outside the 0-1 range
  • For most UI animations, cubicOut or cubicInOut provide good defaults
  • Easing functions are pure and have no side effects
  • The library is adapted from mattdesl’s work, distributed under MIT License

​
See Also