Svelte Easing Explained — Animation Easing Functions

In this tutorial, you will learn about Svelte Easing Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte provides a comprehensive set of easing functions that control animation acceleration, from linear to elastic and bounce effects, applicable to transitions and motion stores.

What You'll Learn

• Built-in easing functions
• Using easing with transitions
• Using easing with motion stores
• Custom easing functions
• Choosing the right easing

Why It Matters

Easing makes animations feel natural. A bounce-out animation feels more physical than linear motion. Svelte's easing functions apply to all animation directives with minimal syntax.

<script>
  import { bounceOut, elasticOut, cubicInOut, circInOut, backOut } from "svelte/easing";
  import { spring } from "svelte/motion";

  let visible = false;
  let x = spring(0, { stiffness: 0.1, damping: 0.3 });
</script>

<button on:click={() => visible = !visible}>Toggle</button>

{#if visible}
  <div transition:scale={{ duration: 500, easing: bounceOut }}>
    Bounce Out
  </div>
  <div transition:fly={{ y: 50, duration: 600, easing: elasticOut }}>
    Elastic Out
  </div>
{/if}

<div style="width: {$x}px; height: 20px; background: #ff3e00; transition: width 0.3s {backOut};"
     on:click={() => $x = $x === 0 ? 200 : 0}>
</div>

Expected output: Elements animate with bounce and elastic easing. The bar expands and shrinks with backOut easing on click.