The simpliest usage

Playhead moves once the element gets into the viewport.

<div    scroll-frames="any_id"
        data-url-mask="https://olivier3lanc.github.io/cinematics-resources/timelapse_hdp/timelapse_hdp_|1 to 120|.webp">
</div>
<!-- CSS FOR DEMO PURPOSE ONLY -->
<style>
    [scroll-frames] { 
        margin-top: 90vh;
        margin-bottom: 90vh;
        height: 50vh;
        background-color: #F5F5F5;
    }
</style>