From f07b6999260951e81c009935ad20af832042a375 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 30 Jan 2026 00:56:58 +0300
Subject: [PATCH] feat(FontDisplay): add animation on displayed fonts list
 order change

---
 src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte b/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
index 3f8010b..0cc8940 100644
--- a/src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
+++ b/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>