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
Firefox ✅ ¹ ✅ ¹
Chromium based browsers (Vivaldi, Brave, …)

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

    <div    scroll-frames="demo"
            data-url-mask="|1 to 120|.webp"
        <p>Scroll down and up</p>
    <div id="detector"></div>
    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;

© Timelapses by Olivier 3lanc