scrollDirection is "FOWARD" instead of "REVERSE"

[savybrandt]

Hello, I'm working on a project that includes a full screen slide show. The HTML for the slideshow looks like this:

<ul id="slideshow">
    <li id="slide-1"></li>
    <li id="slide-2"></li>
    <li id="slide-3"></li>
    <li id="slide-4"></li>
</ul>

and I have scenes for the scroll-jacking behavior going forward and reverse for each slide transition, which looks something like this:

// slide 1 -> 2 scrolling down
  new ScrollMagic.Scene({
    triggerElement: 'slide-2',
    triggerHook: 0,
    offset: 20,
  }).addTo(ScrollControll)
    .on('start', ({ scrollDirection }) => {
      if (scrollDirection === 'FORWARD') {
        gsap.to('#slideshow', { duration: 1, scrollTo: '#slide-2' });
      }
    });

  // slide 2 -> 1 scrolling up
  new ScrollMagic.Scene({
    triggerElement: '#slide-1',
    triggerHook: 0,
    offset: $('#slide-1').height() - 20,
  }).addTo(ScrollControll)
    .on('start', ({ scrollDirection }) => {
      if (scrollDirection === 'REVERSE') {
        gsap.to('#slideshow', { duration: 1, scrollTo: '#slide-1' });
      }
    });

My issue is that scrollDirection seems to always be "FORWARD" regardless what direction I'm scrolling. See video of console logs tied with the actual scroll event-

scrollDirection-bug-1.mov

This same approach has worked for me when detecting scroll of the window. I wonder if it has to do with detecting scroll in the slideshow container?

Any advise would be helpful, or if this is just a known bug, I can take everything out of the container and scroll the window instead. Thanks!

[AdamReznicek]

Did you solve it?

[shuklabhisekh]

Hey, I would like to work on this issue. please assign this to me.