src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte

@@ -14,6 +14,7 @@ import {
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
 import AArrowUP from '@lucide/svelte/icons/a-arrow-up';
 import { type Orientation } from 'bits-ui';
+import { untrack } from 'svelte';
 import { Spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 
@@ -74,7 +75,10 @@ function handleInputFocus() {
 
 // Movement Logic
 $effect(() => {
-    if (containerWidth === 0 || panelWidth === 0 || staticPosition) return;
+    if (containerWidth === 0 || panelWidth === 0 || staticPosition) {
+        return;
+    }
+
     const sliderX = (sliderPos / 100) * containerWidth;
     const buffer = 40;
     const leftTrigger = margin + panelWidth + buffer;
@@ -88,21 +92,29 @@ $effect(() => {
 });
 
 $effect(() => {
-    const targetX = side === 'right' ? containerWidth - panelWidth - margin * 2 : 0;
+    // Trigger only when side changes
-    if (containerWidth > 0 && panelWidth > 0) {
+    const currentSide = side;
-        // On side change set the position and the rotation
-        xSpring.target = targetX;
-        rotateSpring.target = side === 'right' ? 3.5 : -3.5;
 
-        timeoutId = setTimeout(() => {
+    untrack(() => {
-            rotateSpring.target = 0;
+        if (containerWidth > 0 && panelWidth > 0) {
-        }, 600);
+            const targetX = currentSide === 'right'
-    }
+                ? containerWidth - panelWidth - margin * 2
+                : 0;
+
+            // On side change set the position and the rotation
+            xSpring.target = targetX;
+            rotateSpring.target = currentSide === 'right' ? 3.5 : -3.5;
+
+            if (timeoutId) clearTimeout(timeoutId);
+
+            timeoutId = setTimeout(() => {
+                rotateSpring.target = 0;
+            }, 600);
+        }
+    });
 
     return () => {
-        if (timeoutId) {
+        if (timeoutId) clearTimeout(timeoutId);
-            clearTimeout(timeoutId);
-        }
     };
 });
 </script>