animate: directive digunakan untuk menganimasikan elemen saat posisinya berubah di dalam {#each}.

animate:flip

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

{#each items as item (item)}
  <div animate:flip={{ duration: 300 }}>
    {item}
  </div>
{/each}

FLIP = First, Last, Invert, Play — teknik animasi yang menghitung posisi awal dan akhir lalu menganimasikan perpindahannya.

Kombinasi dengan Transition

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

{#each items as item (item)}
  <div animate:flip transition:fade>
    {item}
  </div>
{/each}