Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Mr Baas

ScrollTrigger with horizontal: true - Safari mouse wheel vertical scroll bug?

Recommended Posts

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?

See the Pen JjYPgdp by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

I'm on the same version of Safari as you, and it works perfectly fine for me. ScrollTrigger doesn't do any "scroll-jacking", so I suspect this may be an issue on your end(?) 

 

Can anyone else reproduce the issue? 

Link to comment
Share on other sites

I can reproduce the issue on the provided codepen. The scrolling is stops as soon as the image reaches the mouse pointer.

 

I'm on Safari 14.1 on macOS Catalina.

Link to comment
Share on other sites

And are you saying this issue is somehow related to ScrollTrigger? If you remove ScrollTrigger, the issue goes away? Again, I cannot reproduce. 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

It's working for me, safari on mac and ios.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

I have a magic mouse I'm afraid - so that's similar to a touchpad I think

Link to comment
Share on other sites

Can you confirm that if you ONLY load the GSAP/ScrollTrigger files (but have NO other JavaScript executed...no ScrollTriggers created or any animations), it still won't scroll for you? Or are you saying that setting up the ScrollTriggers is what seems to cause the issue on your machine? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I still can't reproduce, so I'm taking shots in the dark here - do you still have the problem if you remove all the tweens and just leave the raw timeline instance? So no text or text.nextElementSibling animations whatsoever. Literally just an empty timeline with a ScrollTrigger. Or better yet, just a ScrollTrigger.create({...}) (no timeline at all)? 

 

Another question: does it make any difference if you remove the horizontal: true part? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thanks for the details. Have you noticed any other ways to reproduce the issue? Neither Cassie nor I can reproduce it in Safari. Works perfectly every time. Same version as you. I wonder if it's some sort of weird thing with your mouse driver and Safari(?). What mouse are you using? 

 

Also, does it work if you remove the "scrub" option? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

I was able to reproduce the issue, but only with one Mouse (Razer DeathAdder V2 Mini). Here's a video I recorded: https://cln.sh/B9T9sL

Using Chrome or the Magic Trackpad in Safari, I could scroll over the horizontal scroll area with no issue. I think this is a Safari bug.

  • Like 2
  • Thanks 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×