Scrolly Video

Updated: 7 Mar 2025

1051 Stars

Components for scroll-based (or other externally controlled) playback.

Overview:

ScrollyVideo.js is a component designed for scroll-based (or externally controlled) video playback. It offers flexibility and ease of use across various web development frameworks like HTML, React, Svelte, and Vue. By incorporating this component, users can create engaging and interactive video experiences on their web pages.

Features:

HTML Container: Easily add the HTML container to integrate ScrollyVideo.js on your webpage.
Cross-Framework Compatibility: Supports popular frameworks like React, Svelte, and Vue with straightforward installation procedures.
Customization Options: Provides various attributes for customization such as video source URL, transition speed, and container styling.

Installation:

HTML:

<div id="scrollyVideoContainer"></div>
<script src="https://unpkg.com/scrolly-video@latest/dist/scrollyvideo.umd.js"></script>
<script>
  const sv = new ScrollyVideo({ src: 'your_video_url.mp4', scrollyVideoContainer: '#scrollyVideoContainer' });
</script>

React:

npm install scrolly-video --save

import ScrollyVideo from 'scrolly-video';

<ScrollyVideo src="your_video_url.mp4" />

Svelte:

npm install scrolly-video --save

import ScrollyVideo from 'scrolly-video';

<ScrollyVideo src="your_video_url.mp4" />

Vue:

npm install scrolly-video --save

<template>
  <scrolly-video src="your_video_url.mp4"></scrolly-video>
</template>

<script>
import ScrollyVideo from 'scrolly-video';
export default { components: { ScrollyVideo } };
</script>

Summary:

ScrollyVideo.js is a versatile component that simplifies scroll-based video playback implementation across different web development frameworks. With features like easy installation, cross-framework compatibility, and customizable options, it empowers users to create engaging and interactive video experiences on their web pages effortlessly.