Roman S.

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!

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. https://codepen.io/1kiritos1/pen/wvExyWv

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!

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: https://codepen.io/1kiritos1/ site-example.mp4 pen/eYLKvdZ?editors=1010

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: https://codepen.io/1kiritos1/pen/GRXdXKB?editors=1010

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.

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:

Hello everyone! I apologize in advance for such a simple question, but I cannot find any information about this or a suitable example for my case. I am expecting a scrollbar for my fake-horizontal scroll section as shown in the photo, but I don't know how exactly to do this, which GSAP plugin is needed for this? Please, see clearly what the section to which this scrollbar is needed looks like, I leave a link to the codepen. I'd welcome any information about it. Link to the documentation on the creation of such, video/example work. Thank you in advance, if you need more information, please let me know!

Thank you!

GSAP Helper Yes, I also tried deleting the js code, but it remains the same. It's a matter of styles, I need to correctly set the width for the container (.reviews__inner) or parent ( .reviews ). You likely won't answer the question regarding only styling, so thank you for the tips!

I need the pin spacer to accurately determine the width of the container, which is about 5200px. The problem is the wrong distribution of the width, how to fix it? The photo shows how it should be:

Yes, it worked out, thank you! Looks like the line question is out of line, I’m sorry. Thank you again!

https://1kiritos1.github.io/hosted-assets/ This page on GitHub ( for easy browsing )

I connected a horizontal scroll that has the full width of its content and scrolls at a different speed. This was followed by several problems: Instead of different speed I'd like to have a certain, it seems to depend on the width of the user screen and Idk how to implement it. When scrolling, background image also moves, I'd like to avoid it. Also, there are friezes, maybe it's because of the background. ( I'm sorry if this is out of the scope I’m not sure I can ask it here ) the width of the yellow line is constantly changing how can I make it fixed ? This code is given below, thanks in advance and I apologize if the question is not provided correctly, please let me know if something is wrong.