Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/sveltejs/svelte/llms.txt

Use this file to discover all available pages before exploring further.

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