ScrollTrigger not working when manually move scrollbar

[MarkGATX]

I hope someone can help me here.

I'm stuck and confused, especially after I started a StackBlitz to recreate the problem and it seems to be working there. Here's the code... 
https://stackblitz.com/edit/stackblitz-starters-2owhjq?file=app%2Flayout.tsx

 

For some reason when I manually use the scrollbar to scroll through the page, none of the animations work. It doesn't matter how fast or slow I manually drag the bar, the animation doesn't work. Mousewheel works fine, but scrollbar doesn't.

 

The most frustrating part is that it seems to be working on the version in stackblitz. 

 

I'm trying to think of the differences in them...

- I'm not using Tailwind. Can't see how that should matter.

- I've replaced all the images with divs in stackblitz. Again can't see how that could have an effect.

- I've added background-colors to stackblitz for ease of seeing things. Shouldn't matter.

 

I'm sure I've done something wrong but I can't find it. I've checked the forum. I've checked the common scrolltrigger errors post. I've checked copilot. 

 

If anyone has any idea what's going on I would really appreciate some guidance.

I took a quit screengrab so you can see what I'm seeing.

Edited February 1 by MarkGATX
took out stackblitz embed that didn't seem to be working

[mvaneijgen]

Are you maybe overwriting the default scroll behaviour of the browser? I see the fixed header is over the scrollbar as far as I'm aware the scrollbar should lay on top over everything and this not being the case it feels like you're modifying the scroll. In ScrollTrigger you can setup op a scroller property which needs to get set to the element that is scrolling. https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

When this happens to me I like to disable big chunks of my code base until the issue goes away. Then I start enabling small things back in, until the issue is back, this allows me to pin point the issue if I have no idea what is causing it. 

57 minutes ago, MarkGATX said:

- I'm not using Tailwind. Can't see how that should matter.

CSS can most certainly cause an issue even more if you don't write the CSS your self, so that would be a great starting point, remove tailwind and see what it does. 

 

You are sharing the file layout.tsx, and there is no GSAP code in there. My guess page.js is where your GSAP code resides? I see you have the tween animate an element which is also your trigger element fro ScrollTrigger, this is almost always a bad idea, in this case you're moving the elements only visually or in the x axis, but I would get in to the habit of never animating the trigger elements!

 

Hope it helps and happy tweening! 

[MarkGATX]

I started commenting out and testing and it still didn't work. Then I remembered one thing you suggested.

8 hours ago, mvaneijgen said:

I see the fixed header is over the scrollbar as far as I'm aware the scrollbar should lay on top over everything and this not being the case it feels like you're modifying the scroll.

That was never my intention and I did notice the scrollbar under the header. I put it on the list of something to clean up later. I should have fixed it sooner. I had an overflow-x:hidden rule set up when i was messing with some earlier layouts for mobile. I didn't need it now so I removed the rule and suddenly the animations work.

 

So now I'm curious as to why the overflow-x:hidden would break the animations only on the manual scrollbar? 

[mvaneijgen]

15 hours ago, MarkGATX said:

So now I'm curious as to why the overflow-x:hidden would break the animations only on the manual scrollbar? 

Probably because there were multiple scrollbars on top of each other and the one you clicked on was a different one than when you scrolled over some element. 

 

ScrollTrigger uses the default viewport as its scroll container (you can change this), so if you were scrolling some random other element it would not have been hooked up to your ScrollTrigger. 

 

Glad you've solved your issue!