Play/Rewind Video On Scroll – ScrollyVideo.js

Preview:

Description:

ScrollyVideo.js is a JavaScript component to play and rewind your videos based on scroll events or any other external control.

Works seamlessly with React, Svelte, Vue, and even plain JavaScript.

How to use it (JavaScript):

1. Download and import the scrolly-video.js.

<script src="/dist/scrolly-video.js"></script>

2. Create a container to hold your video.

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

3. Initialize the ScrollyVideo.js and specify the path to the video.

new ScrollyVideo({
    scrollyVideoContainer: "scrolly-video",
    src: "/path/to/1.mp4"
});

4. More configurations.

new ScrollyVideo({
    // Whether the video should "cover" inside the container
    cover: true, 
    // Whether the video should "stick" to the top of the container
    sticky: true, 
    // Whether the container should expand to 100vh and 100vw
    full: true, 
    // Whether this object should automatically respond to scroll
    trackScroll: true, 
    // How fast the video transitions between points
    transitionSpeed: 8, 
    // When to stop the video animation, in seconds
    frameThreshold: 0.1, 
    // Whether to try using the webcodecs approach
    useWebCodecs: true, 
    // Whether to print debug stats to the console
    debug: false, 
    
});

Changelog:

v0.0.14 (03/02/2023)

• Destroy ‘scroll’ event listener

v0.0.13 (02/12/2023)

• React ESM Export

v0.0.12 (02/11/2023)

• Fix Safari 14

v0.0.11 (02/08/2023)

• Bugfixes