diff --git a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte b/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte index 2cd3c35..dcaa6d1 100644 --- a/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte +++ b/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; - if (containerWidth > 0 && panelWidth > 0) { - // On side change set the position and the rotation - xSpring.target = targetX; - rotateSpring.target = side === 'right' ? 3.5 : -3.5; + // Trigger only when side changes + const currentSide = side; - timeoutId = setTimeout(() => { - rotateSpring.target = 0; - }, 600); - } + untrack(() => { + if (containerWidth > 0 && panelWidth > 0) { + 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) { - clearTimeout(timeoutId); - } + if (timeoutId) clearTimeout(timeoutId); }; });