Jump to content
Search Community

Scrollbar doesn't work with Scroll Trigger

Roman S. test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello everyone!

As I was advised in the last post, I used the Draggable plugin to create a scrollbar to see the progress of my Fake-Horizontal section.

I'm expecting that .scrollbar__handler move whenever any scroll happens to move the handler to the corresponding ratio according to the scroll position of the .reviews__inner ( Fake-Horizontal section )
The problem is that the handler doesn't move at all. Scroll was made an example of this post.

I attach a demo and a photo with a description of the elements:

ex.png

See the Pen RwYyxBd?editors=1010 by 1kiritos1 (@1kiritos1) on CodePen

Link to comment
Share on other sites

You don't have Draggable loaded in your demo and I would tackle one issue at a time, so remove draggable for now and just focus on moving the scroll handle to the right based on the scroll position.

 

What I would do is turn on markers for your ScrollTriggers and see what they are doing. If you do this you will see that your trigger ScrollTrigger is not doing anything. What I would also figure that your main ScrollTrigger (the working one that moves elements to the right) is the one you want to connect to your fake scrollbar, correct? So that second ScrollTrigger is unnecessary and can be removed.  

 

A ScrollTrigger has a progress value from 0 to 1, so you somehow need to feed in that value to moved your handle from 0 to ???px.  Take a look at https://greensock.com/docs/v3/Plugins/ScrollTrigger/progress to see how to get the progress of a ScrollTrigger and then you need to figure out what you max X value is, then you can use this util function https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() to convert 0, 1 to 0, ???px

 

Post back here with an updated demo if you're stuck. FYI this is really advanced stuff for a beginner, so I would recommend keep forking your pen when trying new things, so you can fall back on earlier versions when something breaks!

  • Like 1
Link to comment
Share on other sites

7 hours ago, mvaneijgen said:

You don't have Draggable loaded in your demo and I would tackle one issue at a time, so remove draggable for now and just focus on moving the scroll handle to the right based on the scroll position.

 

What I would do is turn on markers for your ScrollTriggers and see what they are doing. If you do this you will see that your trigger ScrollTrigger is not doing anything. What I would also figure that your main ScrollTrigger (the working one that moves elements to the right) is the one you want to connect to your fake scrollbar, correct? So that second ScrollTrigger is unnecessary and can be removed.  

 

A ScrollTrigger has a progress value from 0 to 1, so you somehow need to feed in that value to moved your handle from 0 to ???px.  Take a look at https://greensock.com/docs/v3/Plugins/ScrollTrigger/progress to see how to get the progress of a ScrollTrigger and then you need to figure out what you max X value is, then you can use this util function https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() to convert 0, 1 to 0, ???px

 

Post back here with an updated demo if you're stuck. FYI this is really advanced stuff for a beginner, so I would recommend keep forking your pen when trying new things, so you can fall back on earlier versions when something breaks!

I looked through the documentation on mapRange() and method .progress. I understood what they are doing, tested .progress, but I cannot figure out how to apply it in my case ;(

I removed the extra trigger and added markers and onUpdate for the second one. Also, commented out onDrag method in Draggable, so as not to catch an error.

How should I update the scrollbar position on the x-axis during the scroll horizontal section? If I figure out how to do this, I’m sure I can solve the problem with Draggable, so there is only one problem left to solve. 

Link to comment
Share on other sites

5 hours ago, mvaneijgen said:

Something like this. I hope it helps you get started.

 

 

 

Thank you, I figured out how it works in practice!
I've completed the function you started with the updated scroll and everything works! But still, I couldn’t end Draggable :(
The problem is I can’t find a suitable analog for .progress. The last thing I stopped at was .x But it also doesn't fit, it issues undefined after a callback. Could you tell me, which analog I can use for it?

Here's a demo:

See the Pen GRXdXKB?editors=1010 by 1kiritos1 (@1kiritos1) on CodePen

Link to comment
Share on other sites

  • Solution

When not knowing anything about a function it is best to just log everything you can think of and then spit though the log of something that you could use. Here is it even simpler, because the docs give you almost all the properties you are looking for. https://greensock.com/docs/v3/Plugins/Draggable

 

onDrag:

 

Function - A function that should be called every time the mouse (or touch) moves during the drag. Inside that function, this refers to the Draggable instance (unless you specifically set the scope using callbackScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX, pageY, target, currentTarget, etc. This is only called once per requestAnimationFrame.

 

There you go, this.minX and this.maxX are your starting ranges. I'll leave for you to figure out what the equivalent value would be instead of progress, just keep login this and see what values change. Here progress is not useful anymore, because you now need to scroll to a pixel position where the start would be the start pixel value of your ScrollTrigger (https://greensock.com/docs/v3/Plugins/ScrollTrigger/start) and the end your ScrollTrigger.end, then it's the same logic as before, map your minX and maxX to your ScrollTrigger.start and .end and put in the magic number you have found and scroll to that point.

 

Side note: A gotcha I could think off is that ScrollTrigger is updating your handle and your handle is updating your ScrollTrigger, so this could create a feedback loop. I don't know if this will happen, but if it does, just create a separate handle in your scrollbar and make that one visible on drag and hide the other and then swap them again when you let go of the drag. But I would tackle these issues as they arise. 

 

See the Pen yLxjrZg?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 1
Link to comment
Share on other sites

10 hours ago, mvaneijgen said:

When not knowing anything about a function it is best to just log everything you can think of and then spit though the log of something that you could use. Here is it even simpler, because the docs give you almost all the properties you are looking for. https://greensock.com/docs/v3/Plugins/Draggable

 

onDrag:

 

 

Function - A function that should be called every time the mouse (or touch) moves during the drag. Inside that function, this refers to the Draggable instance (unless you specifically set the scope using callbackScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent (last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX, pageY, target, currentTarget, etc. This is only called once per requestAnimationFrame.

 

There you go, this.minX and this.maxX are your starting ranges. I'll leave for you to figure out what the equivalent value would be instead of progress, just keep login this and see what values change. Here progress is not useful anymore, because you now need to scroll to a pixel position where the start would be the start pixel value of your ScrollTrigger (https://greensock.com/docs/v3/Plugins/ScrollTrigger/start) and the end your ScrollTrigger.end, then it's the same logic as before, map your minX and maxX to your ScrollTrigger.start and .end and put in the magic number you have found and scroll to that point.

 

Side note: A gotcha I could think off is that ScrollTrigger is updating your handle and your handle is updating your ScrollTrigger, so this could create a feedback loop. I don't know if this will happen, but if it does, just create a separate handle in your scrollbar and make that one visible on drag and hide the other and then swap them again when you let go of the drag. But I would tackle these issues as they arise. 

 

 

 

I added changes to the onDrag function and named the horizontal section as trigger to have access to its functionality, if there is another way, please let me know. Unfortunately, everything turned out as you suspected ( or the reason is a wrong magic number in mapRange ). As you can see when you move the scroll around the edges, the section falls down from its position and generally breaks. But that’s not the main reason why I thought it was loop problem, the result I put on the site and there scroll behaves much worse. I cannot explain a better look visually. I added a new handler to the scrollbar, but I don’t quite understand how this can be implemented, how can it be hidden and at the same time make it move behind the main handler?

Site: https://alut.netlify.app/career.html ( at resolution <= 1260 px )
Demo: 

See the Pen eYLKvdZ?editors=1010 by 1kiritos1 (@1kiritos1) on CodePen

 

 

See the Pen eYLKvdZ?editors=1010 by 1kiritos1 (@1kiritos1) on CodePen

Link to comment
Share on other sites

Hi,

 

Your deployed app is definitely behaving differently than the codepen demo on desktop and a touch device. If I was you I would remove everything else from that page and test how it works. If it works as expected then start adding the other blocks to it until it breaks, then at least you'll know exactly where this is being originated. Now if it doesn't work without anything else on the page, then the problem is definitely in your implementation.

 

Unfortunately we can't debug live sites since there is no way for us to look at the code and test things.

 

Sorry I can't be of more assistance.

Happy Tweening!

Link to comment
Share on other sites

1 hour ago, Rodrigo said:

Hi,

 

Your deployed app is definitely behaving differently than the codepen demo on desktop and a touch device. If I was you I would remove everything else from that page and test how it works. If it works as expected then start adding the other blocks to it until it breaks, then at least you'll know exactly where this is being originated. Now if it doesn't work without anything else on the page, then the problem is definitely in your implementation.

 

Unfortunately we can't debug live sites since there is no way for us to look at the code and test things.

 

Sorry I can't be of more assistance.

Happy Tweening!

Hi!

Because the section in the demo version and on-site was different, they had slightly different styles, namely in ScrollTrigger: start, end, and in styles -  only height, indentation, and content, of course. I didn’t think much of it because I thought it wouldn’t affect on the scrollbar, but I was wrong...

I have priority to solve the problem on the site, codepen is necessary only for its presentation. You don’t mind if I print an exact copy of the horizontal section from the site to codepen, including its content? Styles will be more, respectively, lines of code too. I'll separate unnecessary styles to be more convenient, thanks in advance!

Link to comment
Share on other sites

Hi,

 

We don't impose users to create small demos, the fact  is that is simpler for us to find the issue. You can do it, but if it's too much and too complex the chances of getting a quick response could get reduced. The fact that the codepen works and your live site doesn't tells us that the issue is not on that particular section that's why I suggested removing everything else and see how it works. Now the fact that the codepen doesn't reflect the real life scenario are different is not ideal neither.

 

If you can create an example that is not extremely complex to follow go ahead, just don't include the HTML and CSS of the other sections, just use some empty elements that emulate the heights as much as possible.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

On 3/16/2023 at 11:38 PM, Rodrigo said:

Hi,

 

We don't impose users to create small demos, the fact  is that is simpler for us to find the issue. You can do it, but if it's too much and too complex the chances of getting a quick response could get reduced. The fact that the codepen works and your live site doesn't tells us that the issue is not on that particular section that's why I suggested removing everything else and see how it works. Now the fact that the codepen doesn't reflect the real life scenario are different is not ideal neither.

 

If you can create an example that is not extremely complex to follow go ahead, just don't include the HTML and CSS of the other sections, just use some empty elements that emulate the heights as much as possible.

 

Happy Tweening!

Hi!


I tried to create as simple as possible by copying the horizontal section exactly as on the site, except for one detail: I replaced the photo for . reviews_img and .reviews_person on gray & blue background. Also, I created sections with indentations as on site, replacing their content with gray background. Js code is copied exactly as on the site.

Now the draggable error is displayed differently, or that's a screen trembling when the handler reaches the edges of the scrollbar, or twitches constantly, as shown in the video above.

See the Pen wvExyWv by 1kiritos1 (@1kiritos1) on CodePen

Link to comment
Share on other sites

Hi,

 

I see in your codepen example that the issue happens when you pass the breakpoint (1260px) but not when the page loads above or below that breakpoint.

 

Maybe you should take a look at GSAP MatchMedia in order to revert and create the Draggable instance when the breakpoint is passed or update the Draggable instance when passing the breakpoint:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

https://greensock.com/docs/v3/Plugins/Draggable/update()

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

5 hours ago, Rodrigo said:

Hi,

 

I see in your codepen example that the issue happens when you pass the breakpoint (1260px) but not when the page loads above or below that breakpoint.

 

Maybe you should take a look at GSAP MatchMedia in order to revert and create the Draggable instance when the breakpoint is passed or update the Draggable instance when passing the breakpoint:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

https://greensock.com/docs/v3/Plugins/Draggable/update()

 

Hopefully this helps.

Happy Tweening!

Hi!

Yes, thank you, I've solved this problem!
Unfortunately, the customer no longer needs a fake-horizontal scroll, 'cause for mobile devices, it won't work. Scrolltrigger automatically adds a blank space under the scrollbar and then intercepts a vertical scroll - but on the mobile screen, where screen width is less than height, this trick won't work. So, it'll be a regular scroll section without GSAP.

Thank everyone, who helped solve problems with ScrollTrigger & Draggable, it was a valuable experience!
I’ll give mark to mvaneijgen, cause he contributed more than the others and solved the problem with scrollbar completely. Thank you again!

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