Svelte Motion and Transitions Explained — Smooth Animations

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

Svelte provides built-in transition directives and motion stores that create smooth animations when elements enter, leave, or change state, with minimal code.

What You'll Learn

• transition:fly, transition:slide, transition:fade
• in: and out: directives
• Custom transition functions
• spring and tweened motion stores
• Crossfade for element transitions

Why It Matters

Svelte's transitions are compiled to efficient CSS animations or JavaScript-based animations. The spring store provides natural-feeling physics-based animations.

<script>
  import { fly, slide, fade } from "svelte/transition";
  import { spring } from "svelte/motion";

  let visible = false;
  let items = ["Apple", "Banana", "Cherry"];
  let size = spring(16, { stiffness: 0.2, damping: 0.3 });
  let x = spring(0, { stiffness: 0.1, damping: 0.25 });
</script>

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

{#if visible}
  <div transition:fly={{ y: 50, duration: 300 }}>
    Flying in!
  </div>
{/if}

{#each items as item, i}
  <div in:slide={{ delay: i * 100 }} out:fade>
    {item}
  </div>
{/each}

<div style="transform: translateX({$x}px); font-size: {$size}px;">
  Spring animation
</div>

Expected output: Elements fly in and out with transitions, list items stagger with slide, and spring values animate smoothly to target values.