Svelte Animations Explained — Advanced Element Animation

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

Svelte's animate: directive enables fluid animations when elements change position in a list, using the FLIP (First, Last, Invert, Play) technique for smooth reordering.

What You'll Learn

• animate:flip for list animations
• Custom animation functions
• Key blocks for animation triggers
• Coordinating transitions and animations
• Performance considerations

Why It Matters

List reordering animations make UI changes intuitive. Svelte's built-in FLIP animation handles position changes automatically with minimal code compared to manual DOM manipulation.

<script>
  import { flip } from "svelte/animate";
  import { cubicOut } from "svelte/easing";

  let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
  let nextId = 6;

  function shuffle() {
    items = items.sort(() => Math.random() - 0.5);
  }

  function removeItem(item) {
    items = items.filter(i => i !== item);
  }

  function addItem() {
    items = [...items, `Item ${nextId++}`];
  }
</script>

<button on:click={shuffle}>Shuffle</button>
<button on:click={addItem}>Add</button>

{#each items as item (item)}
  <div animate:flip={{ duration: 300, easing: cubicOut }}>
    <span>{item}</span>
    <button on:click={() => removeItem(item)}>X</button>
  </div>
{/each}

Expected output: List items smoothly animate to their new positions when shuffled, added, or removed, using the FLIP animation technique.