KST Posted April 13, 2021 Share Posted April 13, 2021 Hi, I use custom scroller and find that pinType: transform sometimes makes the pinned element vibrate. I have tried using pinType: fixed, but found that wheel scrolling event not firing when mouse is over the pinned element. I also tried using css pointer-events: none, but the button is not clickable. Is there anyway to solve this problem? Thanks! See the Pen gOgeWGo by tiffk935 (@tiffk935) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted April 13, 2021 Share Posted April 13, 2021 Hmm. I'm not sure I can see what you mean by vibration I'm afraid. I can see a little flash of pixels at the bottom of the section as it scrolls though, is that it? Maybe you can get around that by making that section *slightly* taller than the viewport. In regards to pin type - pinType: fixed is the default but it only works if the scroller is the <body> - position: fixed doesn't work on nested elements (this is a CSS thing not a GSAP thing) You also don't need to define an end trigger unless it's a different element from the start! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted April 13, 2021 Share Posted April 13, 2021 I don't see the vibration (on desktop at least), but what you're describing sounds like a consequence of the fact that modern browsers handle scrolling on a totally different thread than the main JS one, thus they're not synchronized. So you scroll, the browser moves the contents of the scroller (in the scrolling thread), renders that, and then a few milliseconds later it executes the JS thread and ScrollTrigger applies its transform adjustment and puts things where they're supposed to be. So the content renders at one position and then almost instantly it gets corrected. There's absolutely nothing ScrollTrigger can do (at least that I've found) to force those to stay synchronized. It's totally annoying. That's why ScrollTrigger uses pinType: "fixed" for things in the main scroller (body/documentElement), and "transform" for everything else. Browsers typically only use a different thread for the main/root element scrolling. And you can't use position: fixed to stick things inside a scroller that has any transform applied (nor can any of its ancestors have a similar property that creates a new context). That's a browser-imposed limitation, totally unrelated to ScrollTrigger. Ah, the joys of working with scrolling across browsers/devices. If you can ensure that your scroller won't have any of those context-creating properties (like transform), I'd recommend setting pinType: "fixed" and see if that resolves things for you. 2 1 Link to comment Share on other sites More sharing options...
Dayonel Posted November 11, 2023 Share Posted November 11, 2023 Hi, I just ran into this issue too and I would like to share my solution. As the admins already said, use pinType: 'fixed', vibration is then gone ScrollTrigger.create({ scroller: '#main', // custom scroller pin: '.pin', // pinned pinType: 'fixed', // transform fixed ... }); As the user said, I had this exact same problem: Quote I have tried using pinType: fixed, but found that wheel "scrolling event not firing" when mouse is over the pinned element In case you miss it in the question, this is solved with this CSS: .pin-spacer { pointer-events: none; } Unfortunately for this specific case the button is not clickable but, otherwise this work for all cases. Link to comment Share on other sites More sharing options...
GreenSock Posted November 11, 2023 Share Posted November 11, 2023 Thanks for chiming in, @Dayonel. I'm curious if you've tried setting ScrollTrigger.normalizeScroll(), sorta like this?: See the Pen WNPOwYP?editors=1010 by GreenSock (@GreenSock) on CodePen Does that help? Link to comment Share on other sites More sharing options...
Dayonel Posted November 11, 2023 Share Posted November 11, 2023 11 minutes ago, GreenSock said: Thanks for chiming in, @Dayonel. I'm curious if you've tried setting ScrollTrigger.normalizeScroll(), sorta like this?: Does that help? Thanks for the tip, I didn't know it exist. I have tried it and it definitely fixes the issue "scrolling event not firing" in a cleaner way. But then the scroll event triggers less times and feels very weird. Without normalizeScroll() it fired 105 times in the interval of 0 - 6% page scroll (in my personal project) and when I used normalizeScroll() it triggered 6 times. Is there a way to fix that? Link to comment Share on other sites More sharing options...
GreenSock Posted November 11, 2023 Share Posted November 11, 2023 I'm not noticing that on my setup right now, but it would make sense that it'd fire less frequently because most browsers handle scrolling on a whole separate thread and can fire multiple "scroll" events between every requestAnimationFrame() event which in my opinion is quite wasteful when you're trying to just synchronize it with the rest of the animations on the site which are requestAnimationFrame() driven anyway. See the Pen VwgWjvQ?editors=1010 by GreenSock (@GreenSock) on CodePen I mean if you really need all those events to fire, you could wire up your own normalizeScroll() functionality using an Observer instance with debounce: false where you then move the scrollTop value according to the deltaY. But again, it just seems a bit wasteful although I may not fully understand what you're trying to do. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now