src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte

@@ -3,12 +3,16 @@
     Displays a grid of FontSampler components for each displayed font.
 -->
 <script lang="ts">
+import { flip } from 'svelte/animate';
+import { quintOut } from 'svelte/easing';
 import { displayedFontsStore } from '../../model';
 import FontSampler from '../FontSampler/FontSampler.svelte';
 </script>
 
 <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
     {#each displayedFontsStore.fonts as font (font.id)}
-        <FontSampler font={font} bind:text={displayedFontsStore.text} />
+        <div animate:flip={{ delay: 0, duration: 400, easing: quintOut }}>
+            <FontSampler font={font} bind:text={displayedFontsStore.text} />
+        </div>
     {/each}
 </div>