From e8995cff48cb1f6c7a01d330ea1cf1988ba099dc Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Mon, 12 Jan 2026 15:50:39 +0530
Subject: [PATCH] updates transitionSpeed for videoPercentage reactivity

---
 src/components/ScrollerVideo/ScrollerVideo.mdx            | 4 +++-
 src/components/ScrollerVideo/ScrollerVideo.svelte         | 6 +++++-
 src/components/ScrollerVideo/demo/WithScrollerBase.svelte | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ScrollerVideo/ScrollerVideo.mdx b/src/components/ScrollerVideo/ScrollerVideo.mdx
index de50bf44..241fee6b 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.mdx
+++ b/src/components/ScrollerVideo/ScrollerVideo.mdx
@@ -348,8 +348,10 @@ The `ScrollerVideo` component can be used inside the [ScrollerBase](?path=/story
     <!-- Pass bindable prop `progress` as `videoPercentage` and set `trackScroll` to `false` -->
     <ScrollerVideo
       src="my-video.mp4"
-      videoPercentage={progress}
+      height="100lvh"
+      videoPercentage={Math.min(1, Math.max(progress, 0))}
       trackScroll={false}
+      transitionSpeed={20}
     />
   {/snippet}
   {#snippet foregroundSnippet()}
diff --git a/src/components/ScrollerVideo/ScrollerVideo.svelte b/src/components/ScrollerVideo/ScrollerVideo.svelte
index 1ed3df3e..33096bc7 100644
--- a/src/components/ScrollerVideo/ScrollerVideo.svelte
+++ b/src/components/ScrollerVideo/ScrollerVideo.svelte
@@ -200,7 +200,11 @@
         videoPercentage >= 0 &&
         videoPercentage <= 1
       ) {
-        scrollerVideo.setVideoPercentage(videoPercentage);
+        scrollerVideo.setVideoPercentage(videoPercentage, {
+          jump: false,
+          easing: (t) => t,
+          transitionSpeed: restProps.transitionSpeed,
+        });
       }
     }
   });
diff --git a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
index 6c0874c2..80a45729 100644
--- a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
+++ b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
@@ -5,6 +5,8 @@
 
   // ScrollerBase props
   let progress = $state(0);
+
+  let scrollerVideo = $state(undefined);
 </script>
 
 <ScrollerBase bind:progress query="div.step-foreground-container" visible>
@@ -13,7 +15,8 @@
       src={Goldengate}
       height="100lvh"
       trackScroll={false}
-      videoPercentage={progress}
+      videoPercentage={Math.min(1, Math.max(progress, 0))}
+      transitionSpeed={20}
       showDebugInfo
     />
   {/snippet}