Slides with timeline

[konstructive]

The Codepen is the example below is created by GSAP that I found in this thread: https://greensock.com/forums/topic/19393-fullscreen-sliders-horizontal-and-vertical/ -

 

https://codepen.io/mikeK/pen/NWPJeyg

 

The functionality in this codepen does not work in any versions of Safari. The reason is commented out line 78 //event.preventDefault();

When you comment this back in, it works in Safari, but Chrome throws error:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

 

The reason for that is that the following is not valid events anymore and the wheel event should be passes as not passive event:

$(window).on("mousewheel DOMMouseScroll", onMouseWheel);

So it should now be:

document.addEventListener('wheel', onMouseWheel, {passive: false});

 

But then when this is changed, the code on line 52 is also deprecated:

var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;

 

So as outcome of all of this the code should be something like:

document.addEventListener('wheel', onMouseWheel, {passive: false});

// Slides change on mouse scroll
function onMouseWheel(event) {
    let delta = event.deltaY;
    if(delta > 0) {  //scrolling down -> next slide
        // move to slide below
    } else if(delta < 0)  {  // -> prev
        // move to slide above
    }
    event.preventDefault();
}

But the issue with this that 'wheel' event is triggered multiple types and the timeline gets scrolled through few items at a time.
See full solution here:

https://codepen.io/olgabrushuk/pen/oNxYyeO

Are there any solutions for scrolling through gsap timeline slides that is up to date with the current browsers specs?

Thanks,
Olga

See the Pen NWPJeyg by mikeK (@mikeK) on CodePen

[ZachSaucier]

Hey Olga. So the issue that you're wanting help with is preventing multiple slides from being animated when someone uses the scrollwheel? 

 

There's not really a way to reliably do that other than just using a "is transitioning" variable that you disable when you start and enable again after some time.

[konstructive]

Hi Zach,

 

I'm trying to implement any sort of mouse wheel slides transitioning that works cross browser.

And all current GSAP examples that I found do not work anymore cross browser and I don't seem to be able to fix it.

 

I did think about adding some timeout, so the mouse wheel event won't trigger few times per one scroll. Or stop the scrolling inside each of if statement:

 if(delta > 0) {  //scrolling down -> next slide
        // move to slide below
    } else if(delta < 0)  {  // -> prev
        // move to slide above
    }

But I don't know how to implement it.

 

Thanks,
Olga