Flip animations in Svelte

Introduction

Flip animations help make changes on the screen look smooth and natural by flipping elements from one state to another.

When you want to animate a list reordering smoothly.

When items move position and you want to show the movement clearly.

When you add or remove elements and want a nice transition.

When you want to improve user experience by showing changes visually.

When you want to animate layout changes without jumping.

Syntax

Svelte

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

<ul animate:flip>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

Use animate:flip on the container element that holds the changing items.

The flip animation automatically detects position changes and animates them.

Examples

This example shuffles a list and uses flip animation to smoothly move the items to their new positions.

Svelte

<script>
  import { flip } from 'svelte/animate';
  let items = [1, 2, 3];

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

<button on:click={shuffle}>Shuffle</button>
<ul animate:flip>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

This example adds a new item to the list and uses flip animation to smoothly show the new item appearing.

Svelte

<script>
  import { flip } from 'svelte/animate';
  let items = ['apple', 'banana', 'cherry'];

  function addItem() {
    items = [...items, 'date'];
  }
</script>

<button on:click={addItem}>Add Date</button>
<ul animate:flip>
  {#each items as item}
    <li>{item}</li>
  {/each}
</ul>

Sample Program

This Svelte component shows a list of fruit emojis. You can shuffle the list or add a random fruit. The flip animation smoothly moves or adds items so the changes look natural.

Buttons have ARIA labels for accessibility. The list uses flex layout with spacing for a nice look.

Svelte

<script>
  import { flip } from 'svelte/animate';
  let items = ['🍎', '🍌', '🍒'];

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

  function addItem() {
    const fruits = ['🍇', '🍉', '🥭', '🍍'];
    const next = fruits[Math.floor(Math.random() * fruits.length)];
    items = [...items, next];
  }
</script>

<button on:click={shuffle} aria-label="Shuffle fruits">Shuffle Fruits</button>
<button on:click={addItem} aria-label="Add random fruit">Add Fruit</button>

<ul animate:flip style="list-style:none; padding:0; display:flex; gap:1rem;">
  {#each items as item (item)}
    <li style="font-size:2rem;" tabindex="0" aria-label={`Fruit: ${item}`}>{item}</li>
  {/each}
</ul>

Important Notes

Flip animations only work when the DOM elements keep the same keys or identity.

Use the animate:flip directive on the container, not on individual items.

Flip animation helps avoid sudden jumps by animating position and size changes.

Summary

Flip animations make layout changes smooth and easy to follow.

Use animate:flip on containers with changing children.

Great for lists that reorder, add, or remove items.