scrolly-video

ScrollyVideo uses three different methods to animate video based on browser support and scroll direction:

1. WebCodecs and Canvas: The most performant method. It extracts frames using the WebCodecs API and draws them to a canvas. It is currently only available in Chrome and requires time to process frames on load.
2. HTML5 Video and playbackRate: A fallback for browsers without WebCodecs. It modulates the playbackRate of an <video> tag. This is very smooth for forward scrolling but does not work for reverse scrolling because playbackRate cannot be negative.
3. HTML5 Video and currentTime: The fallback for reverse scrolling or when other methods fail (e.g., Mobile Safari). It jumps to specific frames using currentTime. For best performance, videos should be encoded with keyframe = 1 to avoid quality drops or large file sizes.

Install the package via npm and import the .vue component.

npm install scrolly-video --save

import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.vue';

<ScrollyVideo src="https://scrollyvideo.js.org/goldengate.mp4" />

Install the package via npm and import the component from the specific distribution files (.cjs.jsx or .esm.jsx).

npm install scrolly-video --save

import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.cjs.jsx';
// or
import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.esm.jsx';

<ScrollyVideo src="https://scrollyvideo.js.org/goldengate.mp4" />

To use ScrollyVideo.js in a plain HTML/JS environment, add a container element and initialize the ScrollyVideo object via a CDN script. You must provide the scrollyVideoContainer ID and the video src.

<div id="scrolly-video"></div>

<script src="https://cdn.jsdelivr.net/npm/scrolly-video@latest/dist/scrolly-video.js"></script>
<script type="text/javascript">
  new ScrollyVideo({
    scrollyVideoContainer: "scrolly-video",
    src: "https://scrollyvideo.js.org/goldengate.mp4"
  });
</script>

Install the package via npm and import the .astro component in your frontmatter.

npm install scrolly-video --save

---
import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.astro';
---

<ScrollyVideo src="https://scrollyvideo.js.org/goldengate.mp4" />

Install the package via npm and import the .svelte component.

npm install scrolly-video --save

import ScrollyVideo from 'scrolly-video/dist/ScrollyVideo.svelte';

<ScrollyVideo src="https://scrollyvideo.js.org/goldengate.mp4" />

The setVideoPercentage method allows you to manually set the currentTime of the video by passing a progress value between 0 and 1. If trackScroll is enabled, this method will also perform the scroll automatically. This is primarily used in React, Vue, and Svelte components.

// Signature: (percentage: number, options: { transitionSpeed: number, (progress: number) => number }) => void

scrollyVideo.setVideoPercentage(0.5, { transitionSpeed: 12, easing: d3.easeLinear });

To create a responsive scrollable video, instantiate the ScrollyVideo class by passing a configuration object to the constructor. You must provide a src (video URL) and a scrollyVideoContainer (either a DOM element or the ID of a container element).

import ScrollyVideo from './ScrollyVideo';

const scrolly = new ScrollyVideo({
  src: 'path/to/video.mp4',
  scrollyVideoContainer: 'my-container-id',
  cover: true,
  sticky: true,
  full: true,
  trackScroll: true,
  onReady: () => console.log('Video is ready!'),
  onChange: (percent) => console.log('Current progress:', percent)
});

To prevent memory leaks and remove event listeners (like scroll and resize), call the destroy() method when the component is no longer needed.

scrolly.destroy();