Svelte Animations

An animation in Svelte moves an element smoothly from its old position to a new one whenever a list reorders. This effect differs from a transition, since it handles movement between positions rather than entering or leaving the page entirely.

Why Animations Matter

Sorting a list of items instantly jumps each item to its new spot, which can feel confusing when several items swap places at once. A smooth animation lets a visitor visually track where each item moved, rather than losing track during a sudden jump.

Using The Flip Animation

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

  let numbers = [1, 2, 3, 4, 5];

  function shuffle() {
    numbers = numbers.sort(() => Math.random() - 0.5);
  }
</script>

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

<ul>
  {#each numbers as number (number)}
    <li animate:flip>{number}</li>
  {/each}
</ul>

Clicking the button reorders the numbers array randomly. Instead of the list items snapping to their new positions instantly, each item glides smoothly from its old spot to its new one.

Flip Animation Diagram

Before Shuffle          After Shuffle             Visual Movement
----------------          ----------------           ------------------
Position 1: 5             Position 1: 2              5 glides down
Position 2: 3             Position 2: 5              3 glides down
Position 3: 1             Position 3: 1              1 stays in place
Position 4: 4             Position 4: 3              4 glides up
Position 5: 2             Position 5: 4              2 glides up

Why The Key Matters For Animations

The parentheses after number inside the each block mark the key Svelte uses to track each item individually. Without this key, Svelte loses track of which item moved where, and the flip animation fails to produce the smooth gliding effect.

Setting Animation Options

<li animate:flip={{ duration: 400 }}>{number}</li>

The duration option controls how long the gliding movement takes, measured in milliseconds. A shorter duration produces a snappier movement, while a longer duration produces a gentler glide.

Animations Compared To Transitions

A Layman Analogy

Think of a school photo where students rearrange themselves by height. Instead of every student teleporting instantly to their new spot, each student walks smoothly across the room to their new position, letting everyone watching follow exactly who moved where.

Common Use Cases

• Sorting a list of items by name, price, or date
• Filtering a list and watching remaining items settle into place
• Drag-and-drop lists where items reorder after a drop
• Leaderboards where rankings shift after new scores arrive

Combining Animations With Transitions

A list can use both an animation for reordering and a transition for items entering or leaving, giving the whole list a polished, coordinated feel.

<script>
  import { flip } from "svelte/animate";
  import { fade } from "svelte/transition";
</script>

{#each numbers as number (number)}
  <li animate:flip transition:fade>{number}</li>
{/each}

Removing a number from the list fades that item out smoothly, while the remaining items glide into their new positions at the same time.

Key Points

• Animations move elements smoothly between positions within a list
• The flip animation works well inside each blocks with a defined key
• Animations differ from transitions, which handle entering and leaving
• Options like duration adjust how fast an animation completes