Scroll Frames

Animate sequences of still frames on any DOM element in relation with its position into the viewport.

Scroll Frames is a javascript library intended to be used for cinematic usage on any web page. Scroll Frames binds scroll on still images sequences to craft cinematics on a web page. It applies CSS background image on any HTML tag from a sequence of images according to the position of this HTML tag.

Key Features

Native Javascript
No dependencies
Easy to use see usage

Browsers support

Browser	Mobile	Desktop
Chrome	✅	✅
Safari	✅	✅
Firefox	✅ ¹	✅ ¹
Opera	✅	✅
Chromium based browsers (Vivaldi, Brave, …)	✅	✅

^{(1) Firefox issue: Some troubles when user leaves the tab and comes back.}

<section>
    <div    scroll-frames="demo"
            data-url-mask="https://olivier3lanc.github.io/cinematics-resources/timelapse_tamie/timelapse_tamie_|1 to 120|.webp"
            data-detector="detector"
            data-background-size="cover">
        <p>Scroll down and up</p>
    </div>
    <div id="detector"></div>
</section>
<style>
    section {
        height: 200vh;
    }
    [scroll-frames="demo"] {
        height: 100vh;
        position: sticky;
        top: 0;
    }
    [scroll-frames="demo"] > p {
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 1em;
        color: white;
        font-family: monospace;
        font-size: 20px;
    }
</style>