Why is the second call not working in locomotive-scroll?

Question

I have the following code...

<div class="jrg-wrapper-main" data-scroll-section>
    <jrg-splash data-scroll
                data-scroll-id="splash"
                data-scroll-call="splash"
    ></jrg-splash>
    <jrg-sidebar data-scroll
                 data-scroll-id="blog"
                 data-scroll-call="sidebar"
                 data-scroll-speed="2"
                 url="./site.config.json"
    ></jrg-sidebar>
</div>
...
<script src="https://unpkg.com/locomotive-scroll"></script>
<script type="module">
    console.log("Let us try this");
    const scroll = new window.LocomotiveScroll();
    scroll.on("call", args=>{
        console.log(`Called with ${JSON.stringify(args)}`)
    });
    scroll.on('scroll', (args) => {
        if (typeof args.currentElements['splash'] === 'object') {
            console.log("The call was fired");
        } else {
            console.log("Somewhere else");
        }
    });
</script>

When I run this I see...

Called with "splash"

But even after I scroll down to the sidebar area I don't see the expected...

Called with "sidebar"

Also I never see the scroll event working.

What am I missing?

Full Codebase

Update

I also tried using modular scroll directly like...

import modularScroll from "https://unpkg.com/[email protected]/dist/main.esm.js";
const scroll = new modularScroll();
scroll.on("call", args=>{
    console.log(`Called with ${JSON.stringify(args)}`)
});

But neither of the calls get printed this way.

Update 2

Here is a simpler version of what I am trying to do with divs instead of web components...

Answer 1

Use 'call' instead of scroll

scroll.on('call', (args) => {
        if (typeof args.currentElements['splash'] === 'object') {
            console.log("The call was fired");
        } else {
            console.log("Somewhere else");
        }
    });