Skip to content

Commit

Permalink
fix initial jump (#108)
Browse files Browse the repository at this point in the history
  • Loading branch information
dkaoster authored Jun 13, 2024
1 parent 058303a commit 7c844b1
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 1 deletion.
2 changes: 1 addition & 1 deletion public/ScrollyVideoDemo.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script>
import ScrollyVideo from '../src/ScrollyVideo.svelte';
const cards = [
'This kind of scrolling video is common in visual journalism, marketing materials, or other scrollytelling applications.',
'This library provides a way to easily create these kinds of scrolling video experiences, without fussing with special video encoding formats.',
Expand Down
6 changes: 6 additions & 0 deletions src/ScrollyVideo.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,9 @@ class ScrollyVideo {
this.video.pause();
this.video.load();

// Start the video percentage at 0
this.videoPercentage = 0;

// Adds the video to the container
this.container.appendChild(this.video);

Expand Down Expand Up @@ -197,6 +200,9 @@ class ScrollyVideo {
* - easing: (progress: number) => number - A function that defines the easing curve for the transition. It takes the progress ratio (a number between 0 and 1) as an argument and returns the eased value, affecting the playback speed during the transition.
*/
setVideoPercentage(percentage, options = {}) {
// Early termination if the video percentage is already at the percentage that is intended.
if (this.videoPercentage === percentage) return;

if (this.transitioningRaf) {
// eslint-disable-next-line no-undef
window.cancelAnimationFrame(this.transitioningRaf);
Expand Down

0 comments on commit 7c844b1

Please sign in to comment.