Jump to content
Search Community

Custom Scrollbar w/GSAP & React

Nitro Interactive test
Moderator Tag

Recommended Posts

Context:

We are working with fairly complex ScrollTriggered timelines that tend to overlap if a user scrolls too quickly.  We know we can add logic to check if a tween or timeline is still tweening so that we can kill it off gracefully but this tends to get extremely convoluted.

 

Long story short --- our answer to these issues is to set the overflow to hidden when a triggered tweens begins to jack the users' scroll functionality and set it back to auto/initial once the tween has completed so that the user regains controls and is able to make their next move.  This makes the stories we're trying to unfold extremely consistent and beautiful; users experience the same exact story unfolding no matter how they are using their input device.

 

I get the sense on these forums that scroll jacking is considered poor practice --- but I beg to differ, used properly it's a tremendously powerful tool.  If abused, it will definitely lead to a poor experience, but when you have a series of short sequences that makes the entire experience, you definitely want the user to have the chance to see these things as they were meant to be seen; a state could also be set so that users are only forced to view sequences in their entirety their first walkthrough.

 

Question:

Are there any custom scrollbars that work well with ScrollTrigger?  We have yet to find one and in order for our solution to work we need to use a custom scrollbar (we can't have the scrollbar popping in/out on each tween).  We're utilizing React for the majority of our projects.  I saw that Zach posted a custom scrollbar created in GSAP which may work.  I think the only thing it was missing was Draggable; but that would be easy enough to add.

 

 

Link to comment
Share on other sites

Yes, that's the thread I saw just recently.

 

I also looked at this potentially solution that Blake helped on that users smooth-scroller: https://codesandbox.io/s/s84ki

 

It looks like this might be the best route but in many cases we have many different scrollTriggers within many different timelines across many different timelines and I'm really not certain if we need to setup ScrollerProxy just once in our main component or for all of our ScrollTriggers.

 

 

Edit: we just got Blake's example working in our project, but none of the ScrollTriggers across the project are functional so I guess that answers my question.  We need to connect every single ScrollTrigger via scrollerProxy, or at least it needs to be within each child component.

Link to comment
Share on other sites

@OSUblake I've really looked at your example here: https://codesandbox.io/s/s84ki

 

I've set this up in my project, but I have a tremendous amount of code to refactor.  My project is setup the same exact way as the above example except that I have 20+ components with 20-30 ScrollTriggers each.

 

I just tested this and it works great but I have to setup forwardRefs and imerpative handling throughout many many timelines.  I know you cannot say for sure as every project is different but was this the only method you found to use ScrollerProxy with this smooth-scoller setup between parent/child components?

Link to comment
Share on other sites

1 hour ago, Nitro Interactive said:

@OSUblake I've really looked at your example here: https://codesandbox.io/s/s84ki

 

What post was that from? I make so much stuff I forget where or why I did something. 😛

 

Have you checked the smooth scrollbar docs?

https://github.com/idiotWu/smooth-scrollbar/blob/900f2434f8b61237af52de3bf9f07c87c0638917/docs/api.md

 

I would try that update method first. Maybe that was the issue the other person was having.

 

Quote

Forces scrollbar to update geometry infomation.

By default, scrollbars are automatically updated with 100ms debounce (or MutationObserver fires). You can call this method to force an update when you modified contents:


// append some contents to the scrollbar element...
scrollbar.contentEl.appendChild(awesome);

// force an update
scrollbar.update();

 

Link to comment
Share on other sites

Well ---- I saw this thread: 

 

While you didn't post in that one I figured this user opened a new thread at some point and you assisted them because they have several Codesandboxes with this setup where they cannot get the ScrollTrigger to fire without hot loading.  I can see they were using Refs correctly and useEffect simply was not latching on; some ordering of how things were loading/firing.  Then you have a form where you corrected that using useImperativeHandle via forwarded Refs in a main component which happens to be exactly what I need.  I tested it and it seemingly works great without any side effects, but I was just concerned I would get through a ten hour refactor only to find it didn't work quite how I expected since I had never even heard of the React hook.

 

This ended up not being the answer to our prayers --- smooth scrolling uses a transform for the scrolling so hiding overflow doesn't do anything.  We need overflow hidden to jack the scrolling while we have a tween going so that the user doesn't jump into the next one too quickly.  I guess we can setup some logic that kills off the tween but overflow hidden works beautifully.  We just need to do something about the scrollbar popping in/out; that was the purpose of using a custom scrollbar.

 

Link to comment
Share on other sites

4 hours ago, Nitro Interactive said:

since I had never even heard of the React hook.

 

Yeah, it's a rare one. I recently discovered it too after watching some video by accident.

 

4 hours ago, Nitro Interactive said:

While you didn't post in that one I figured this user opened a new thread at some point and you assisted them because they have several Codesandboxes with this setup where they cannot get the ScrollTrigger to fire without hot loading

 

So is the issue just a hot loading one? Because it's not like hot reloading works in production. It's just to make development easier.

 

Link to comment
Share on other sites

Well, the issue you had originally helped the other gentleman with was a hot loading issue, his ScrollTriggers were working ONLY when hot loaded --- mine was different.  I was looking for a React custom scrollbar which would work well with ScrollTrigger.  We wanted to very selectively use overflow: hidden during our tweens and couldn't with the native scrollbar (just didn't look production ready).

 

I ended up creating my own custom React scrollbar that utilizes hooks and the context API.  I created it in a sandbox.  Once I finish setting it all up I'll create a thread with that Codesandbox.  It might help others that are looking to incorporate a custom scrollbar with GSAP/ScrollTrigger.

  • Like 2
Link to comment
Share on other sites

Not sure if this is any help, but idiotwu, the creator of smooth-scrollbar also made a repo for smooth-scrollbar with React (which is archived by now and not actively maintained). I am absolutely unfamiliar with React, so I have no idea if this is what you are referring to, but there is mention of context in the short documentation on that github page.

 

https://github.com/idiotWu/react-smooth-scrollbar

  • Like 1
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...