basicScroll only running once when .start() called

[dhruveonmars]

I have the following code;

const backgroundText = basicScroll.create ({
     elem: document.querySelector('.background--text'),
     from: 'top-bottom',
     to: 'bottom-top',
     direct: true,
     track: true,
     props: {
          '--translatex': {
               from: 0,
               to: 2,
          },
     },
     inside: (instance, percentage, props) => {
          console.log('viewport is inside from and to')
     },
     outside: (instance, percentage, props) => {
          console.log('viewport is outside from and to')
     },
});

backgroundText.start();

I have this code at the bottom of my page, with some other scripts before closing the body tag, however it doesn't seem to be working. I see the outside console log, when the page loads, but it doesn't show up again. And the inside never shows up. Wondering if any css or other js could be causing an issue? As I'm sure this was working before, but even when I comment out all my other js/js libraries it doesn't work.

This is the html markup for that item;

<span hidden class="background--text ff-heading background--text__left" aria-hidden="true" unselectable="on">
     <span class="background--textitem" data-name="A space to grow"></span>
</span>

Any help is greatly appreciated

[electerious]

My first guess would be that your site (the body) isn't actually scrolling and you're instead scrolling inside a container. Is that the case?

It's also possible that images or other assets are changing the position of the element. Try resizing the browser to see if that re-render fixes the issue. If yes you can use instance.calculate() and instance.update() after DOMContentLoaded.

[dhruveonmars]

Ah yeah, my body is set to be 100% of the screen height, and then there's an inner wrapper that's used. I've commented the inner wrapper out for and it works 🥳.

Weird how it was working at some point before though, and I've always had that inner wrapper and body structure.

Thanks!