From e1117667d245bf7738aafc591aa0fa954bf3875d Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 10 Feb 2026 18:14:43 +0300
Subject: [PATCH] feat(ComparisonSlider): add appearance animation to the
 slider line

---
 .../ui/ComparisonSlider/components/SliderLine.svelte           | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
index 84a71f2..53805c1 100644
--- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
+++ b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/SliderLine.svelte
@@ -4,6 +4,8 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { cubicOut } from 'svelte/easing';
+import { fade } from 'svelte/transition';
 
 interface Props {
     /**
@@ -27,6 +29,7 @@ let { sliderPos, isDragging }: Props = $props();
     )}
     style:left="{sliderPos}%"
     style:will-change={isDragging ? 'left' : 'auto'}
+    in:fade={{ duration: 300, delay: 150, easing: cubicOut }}
 >
     <!-- We use part of lucide cursor svg icon as a handle -->
     <svg