Mr Baas

I've tried three different mouses, two Logitech: Logitech MX Master 2S and Logitech MX510, and one from Dell. All have regular mouse wheels and no touchpad scroll like the Magic Mouse. Removing the scrub option doesn't make a difference.

I think I've covered all the cases when mouse wheel (vertical) scrolling using a regular mouse works and when it doesn't. Does not work: Remove all tweens: gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"}, scrollTrigger: { scroller: text.closest(".horizSlider"), horizontal: true, trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true } }); }); Remove horizontal: true gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"}, scrollTrigger: { scroller: text.closest(".horizSlider"), trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true } }) .fromTo(text, {x: 250}, {x: -250}, 0) .from(text.nextElementSibling, {scale: 0.8}, 0) }); Only ScrollTrigger.create() gsap.utils.toArray(".slideText").forEach(text => { ScrollTrigger.create({ scroller: text.closest(".horizSlider"), horizontal: true, trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true }); }); Works: Remove ScrollTrigger gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"} }) .fromTo(text, {x: 250}, {x: -250}, 0) .from(text.nextElementSibling, {scale: 0.8}, 0) }); I the last case when it works (and I can scroll down using mouse wheel) the animations are run as soon as the page is loaded.

Only adding the gsap/ScrollTrigger files (and no other JavaScript executed) doesn't trigger the problem and vertical scrolling using the mouse wheel works. It still works when adding gsap.registerPlugin(ScrollTrigger); But the problem arises when I add the following code: gsap.utils.toArray(".slideText").forEach(text => { gsap.timeline({ defaults: {ease: "none"}, scrollTrigger: { scroller: text.closest(".horizSlider"), horizontal: true, trigger: text.closest(".slide"), start: "left right", end: "left left", scrub: true } }) .fromTo(text, {x: 250}, {x: -250}, 0) .from(text.nextElementSibling, {scale: 0.8}, 0) }); As a side note, adding pointer-events: none; to class horizSlider makes vertical scrolling using mouse wheel work even when ScrollTriggers are applied, but then the touchpad doesn't work for horizontal scrolling between the images.

And you are both scrolling using the wheel on a regular mouse and not the built-in touchpad/touch screen?

If I removing all javascript (keeping only the html and css, even removing the script imports) from the example given then vertical scroll works using the mouse wheel even if the cursor is over the image. I've also tried copying the html + css into a separate html document on my local computer on two different Macbook Pro computers and opening it in Safari browsers on both (Safari 14.1.1/Big Sur and Safari 14.1.1/Catalina) using two different mices (both Logitech) and it works, but as soon as I include the gsap.min.js (version 3.6.1) + ScrollTrigger.min.js (3.6.1) from the Cloudflare CDN and add the JavaScript found in the codepen, vertical scrolling stops working as soon as the pointer reaches the image part. Same html file works in Chrome if I do the same thing. I've also added an event listener for the "wheel" event to the element (.horizSlider) and I can see that WheelEvents are emitted when using the mouse wheel when the pointer is over the image, but the page isn't scrolled down. It's like the events aren't propagated somehow.

Hi, I'm using Safari (version 14.1.1, on OSX Big Sur) and there seems to be an issue with vertical scrolling using mouse wheel when you use ScrollTrigger with horizontal: true. In other browsers like Chrome, Firefox I can scroll vertically using the mouse wheel when the mouse cursor is over the ScrollTriggered element, but in Safari when I scroll using the mouse wheel the page doesn't scroll up or down (you just get stuck with the cursor inside the element). Scrolling vertically using the touchpad seems to work correctly, though. I've included the CodePen from the gsap ScrollTrigger examples where the issue is present. Anyone else have this problem? Or is there a solution to make the mouse wheel work in Safari when you have a ScrollTrigger with horizontal: true?