Svelte by Example: Animate

flip animates an element from its old position to its new position.

Each todo has a stable ID so Svelte can track it when the order changes.

Use animate:flip on an immediate child of a keyed each block. Unlike a transition, it runs when existing items move, not when they enter or leave.

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




  let todos = $state([
    { id: 1, task: 'Mow lawn' },
    { id: 2, task: 'Walk dog' },
  ]);
</script>


<button onclick={() => todos = [...todos].reverse()}>
  Reverse todos
</button>


<ul>
  {#each todos as todo (todo.id)}
    <li animate:flip={{ duration: 200 }}>{todo.task}</li>
  {/each}
</ul>

resources://