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
{/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);
@@ -13,7 +15,8 @@
src={Goldengate}
height="100lvh"
trackScroll={false}
- videoPercentage={progress}
+ videoPercentage={Math.min(1, Math.max(progress, 0))}
+ transitionSpeed={20}
showDebugInfo
/>
{/snippet}