Jump to content
Search Community

GSAP + ScrollTrigger doesn't trigger horizontal scrolling

Banbeucmas test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi, I am a new user of GSAP + Scrolltrigger and am currently experimenting with making a horizontal scrolling function in ReactJS 18. Though it seems like scrolling doesn't even work here so I don't know which is wrong

 

Here is my codesandbox which is my best attempt of making the minimal example of the current code

https://codesandbox.io/p/sandbox/charming-framework-k3doew?file=%2Fsrc%2FApp.tsx

 

I did some digging a bit, but I have mainly tested whether the useLayoutEffect() was rendered twice. It does appear that the "Second section" in the code indeed exists but scrolling did no change to the transform() function in '.wrapper' div. overflow-x: auto did reveal the scrollbar but it just seem the scrolling down doesn't move it. I suspect I might want to hook it to some scrolling event but based on some example I would think that GSAP would handle it already.

There might be something missing (and simple) that I am not aware of with GSAP.

 

Thanks for your time.

 

Link to comment
Share on other sites

  • Solution

Welcome to GSAP, @Banbeucmas

 

It's almost 4am here, so my brain is mostly asleep and I don't have time to finish everything for you, but I assume you were looking for something more like this: 

https://codesandbox.io/p/sandbox/upbeat-https-u37rrs?file=%2Fsrc%2FApp.tsx

 

It's mostly CSS issues. You had overflow: hidden on the body so you'd never see a scrollbar. You set up the container so that it's as wide as its contents instead of being only as wide as the viewport which threw off your calculation here:

x: -(container.scrollWidth - container.clientWidth) // 0!

That evaluated to 0, so you weren't moving x at all :)

 

Right now, it's not animating all the way to the left only because the ScrollTrigger cannot reach its end position since you've got the page set up with your CSS initially to have a gap at the bottom. So imagine the window is 800px tall but your content inside that page is only 500px, so of course the page is not scrollable...but let's say we want to pin it for 1000px, so ScrollTrigger adds 1000px of padding to that element but since there was a 300px gap, your page will only be ABLE to scroll 700px! Again, that's all CSS-related stuff. But hopefully this gets you going in the right direction. 

 

Happy tweening/scrolling!

  • Like 1
Link to comment
Share on other sites

On 3/13/2023 at 5:52 PM, GreenSock said:

Welcome to GSAP, @Banbeucmas

 

It's almost 4am here, so my brain is mostly asleep and I don't have time to finish everything for you, but I assume you were looking for something more like this: 

https://codesandbox.io/p/sandbox/upbeat-https-u37rrs?file=%2Fsrc%2FApp.tsx

 

It's mostly CSS issues. You had overflow: hidden on the body so you'd never see a scrollbar. You set up the container so that it's as wide as its contents instead of being only as wide as the viewport which threw off your calculation here:

x: -(container.scrollWidth - container.clientWidth) // 0!

That evaluated to 0, so you weren't moving x at all :)

 

Right now, it's not animating all the way to the left only because the ScrollTrigger cannot reach its end position since you've got the page set up with your CSS initially to have a gap at the bottom. So imagine the window is 800px tall but your content inside that page is only 500px, so of course the page is not scrollable...but let's say we want to pin it for 1000px, so ScrollTrigger adds 1000px of padding to that element but since there was a 300px gap, your page will only be ABLE to scroll 700px! Again, that's all CSS-related stuff. But hopefully this gets you going in the right direction. 

 

Happy tweening/scrolling!

A late response but indeed it was. Seem like I missed the point that ScrollTrigger make use of the native scrollbar to work.

 

I was thinking of asking whether there is any scroll-hijacking solution but I believe not in this case  (at least without it being a third party solution out of the scope of what GSAP provides). 

Cheers

Link to comment
Share on other sites

21 minutes ago, Banbeucmas said:

I was thinking of asking whether there is any scroll-hijacking solution but I believe not in this case  (at least without it being a third party solution out of the scope of what GSAP provides). 

I'm not entirely sure what you're looking for there or how scroll-hijacking would solve this, but if you're looking for scroll smoothing, we do have ScrollSmoother which does a hybrid form of scroll hijacking. 

Link to comment
Share on other sites

5 hours ago, GreenSock said:

I'm not entirely sure what you're looking for there or how scroll-hijacking would solve this, but if you're looking for scroll smoothing, we do have ScrollSmoother which does a hybrid form of scroll hijacking. 

Oh I think I did went off-topic there. I was meant to find a solution with custom scrollbar while still allowing horizontal scrolling

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.
×
×
  • Create New...