scroll-state

Usage

<section data-scroll-root="myScrollArea1">
    <div class="someFixedGraphics">
        <img src="/some/img.jpg" data-scroll-bound="welcome" />
        <img src="/some/other-img.jpg" data-scroll-bound="someOtherStuff,center" />
    </div>
    <article data-scroll-trigger="welcome">
        <!-- some content -->
    </article>
    <article data-scroll-trigger="welcome,center">
        <!-- some more content -->
    </article>
    <article data-scroll-trigger="someOtherStuff">
        <!-- some other content -->
    </article>
</section>

import { ScrollMotion } from 'scrollmotion';

// ... and done!
const inst = new ScrollMotion('myScrollArea1');
console.log(inst.node); // section.data-scroll-root
inst.unbindScrollListener(); // ... nothing happens anymore on scroll!