diff --git a/src/components/HorizontalScroller/HorizontalScroller.svelte b/src/components/HorizontalScroller/HorizontalScroller.svelte
index 79eea2cd..7a66e6dc 100644
--- a/src/components/HorizontalScroller/HorizontalScroller.svelte
+++ b/src/components/HorizontalScroller/HorizontalScroller.svelte
@@ -54,21 +54,6 @@
     showDebugInfo = false,
   }: Props = $props();
 
-  let componentState = $derived.by(() => ({
-    progress,
-    mappedProgress,
-    easedProgress: easedProgress.current,
-    direction,
-    mappedStart,
-    mappedEnd,
-    triggerStops: scrubbed ? stops : divisions,
-    stops: stops,
-    handleScroll,
-    scrubbed,
-    easing: ease,
-    duration,
-  }));
-
   let easedProgress: Tween<number> = $state(
     new Tween(mappedStart, { duration, easing: ease })
   );
@@ -102,6 +87,21 @@
     return translate;
   });
 
+  let componentState = $derived.by(() => ({
+    progress,
+    mappedProgress,
+    easedProgress: easedProgress.current,
+    direction,
+    mappedStart,
+    mappedEnd,
+    triggerStops: scrubbed ? stops : divisions,
+    stops: stops,
+    handleScroll,
+    scrubbed,
+    easing: ease,
+    duration,
+  }));
+
   onMount(() => {
     // Initialize mappedProgress to mappedStart on mount
     mappedProgress = mappedStart;