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}