Animate entrances, exits, and list reordering with the transition: and animate: directives built into Svelte — no library needed.
Why: put transition: on an element and Svelte animates it in when it appears and out when it leaves — fade, fly, slide, and scale ship with the language. Use in: and out: to set different enter and exit animations. Nothing to install.
<script lang="ts">
import { fade, fly } from 'svelte/transition'
let visible = $state(true)
</script>
<button onclick={() => (visible = !visible)}>Toggle</button>
{#if visible}
<!-- Plays on enter AND exit — built into the language -->
<p transition:fly={{ y: -16, duration: 300 }}>Saved successfully</p>
{/if}
{#if visible}
<!-- in: and out: set different enter and exit animations -->
<p in:fly={{ y: 8 }} out:fade>Flies in, fades out</p>
{/if}Why: when a keyed {#each} list reorders, animate:flip makes the OTHER items slide smoothly to their new spots instead of jumping. Combine it with transition: so added and removed items animate too.
<script lang="ts">
import { flip } from 'svelte/animate'
import { fade } from 'svelte/transition'
let items = $state([1, 2, 3])
let nextId = 4
</script>
<button onclick={() => items.unshift(nextId++)}>Add to top</button>
<ul>
{#each items as item (item)}
<!-- flip slides existing items out of the way; fade handles enter/exit -->
<li animate:flip={{ duration: 300 }} transition:fade>
Item {item}
</li>
{/each}
</ul>