Scrolltrigger - Horizontal scrolling

[Federico2811]

Let me start by saying that I am a very novice developer.

Thanks to several examples I managed to create a horizontal scroll with scrolltrigger, however, as you can see from codepen, when I scroll horizontally the page makes vertical movements. Would you be able to tell me what I did wrong? I've been trying for days but I can't find the solution

 

See the Pen YzgXBNO by Federium (@Federium) on CodePen

[mvaneijgen]

Hi @Federico2811 welcome to the forum!

 

The issue here is your CSS position fixed and probably also bootstrap which adds scroll-behavior: smooth; which you'll need to overwrite with scroll-behavior: auto !important; (they either put it on the body or the html or everything I don't know anymore) 

 

Next you're overwriting the default scroll of the browser, you need to be a really skilled web developer and 100% know what you're doing if you want to take that control away from the browser and roll you're own! I've been doing this for over 10 years now and I've never needed to overwrite the scroll in that way. 

 

Here is your demo with the overflow and position properties set back to normal and now ScrollTrigger works like a charm. If I was you I would restructure your layout a bit and pin the element that contains all your elements instead of creating position: fixed; elements you can even pin the body like so pin: "body", but better is to create an element, something like #pinMe an use that as the pin.

 

As you've found you can indeed set a different scroller in ScrollTrigger, but there was to much code in your minimal demo to figure out how that would work, my advise first do it the 'normal; way, by having the browser handle the scrolling, before you do your custom scroll and again you really need to know what you're doing if you want to go that route. 

 

Hope it helps and happy tweening! 

 

See the Pen ExMjqvV?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Federico2811]

Thanks for the quick reply, I tried to follow your advice even if I didn't understand the #pinMe part, what do you mean?.

 

 

Also this part

Quote

"Next you're overwriting the default scroll of the browser, you need to be a really skilled web developer and 100% know what you're doing if you want to take that control away from the browser and roll you're own! I've been doing this for over 10 years now and I've never needed to overwrite the scroll in that way."

I don't really understand what you mean, sorry I'm doing a university project and I'm not really comfortable with coding.

 

 

 

Here the project fixed

See the Pen VwRvZrG by Federium (@Federium) on CodePen

[Rodrigo]

Hi,

 

Honestly I think that the solution @mvaneijgen provided is good enough. I can't seem to understand the problem you're having here. It seems that the jump up/down seems to be fixed though.

 

Happy Tweening!

[Federico2811]

Hi guys, unfortunately I find myself forced to ask for help again, I have tried in every way for a solution but I can't figure it out. The problem is that the length of the timeline and therefore of the horizontal scroll varies based on the width of the web page. So I want the timeline to go up to 142 but if I decrease the width of the browser the timeline goes to 80 or less and if I increase it it goes too far. I don't know if the problem is in how I used scrolltrigger or in the css.

 

See the Pen oNVWLRL by Federium (@Federium) on CodePen

[GreenSock]

Hi @Federico2811. It looks like your demo has close to 4,000 lines of HTML/CSS/JS - that's way too much for us to parse through here on these free forums. If you'd like more help, you've got a few options: 

1. Create a very bare-minimum version that only has the essential code to illustrate the one problem in a generic sense. Using a few colored <div> elements is best. Make your question VERY clear and specific. 
2. -OR- you can post in the Jobs & Freelance forum or contact us for paid consulting services. 
3. -OR- you can wait and see if someone else around here has the time and willingness to dig through all that code, try to understand your goal/question and post some suggestions. I just wanted to be clear about expectations - this is definitely beyond the scope of help we can provide in these free forums.

Good luck with your university project. 👍

[Federico2811]

I understand completely and I apologize.

I significantly reduced the code and added colored rectangles.

I really appreciate your effort, thank you

[mvaneijgen]

You'll have to calculate the width of the block you want to animate. Due to the way you've layout everything, mainly with position: fixed; and weird offsets and  flexbox your .slider element doesn't span the whole width of all the elements. If you log its width it is around 4000px and if you log the width of all the .module elements this is 15000px, so that is a big difference! 

 

You are also animating your trigger element which is not recommended. I've add a new .trigger element and wrapped that around your slider. Then calculate the width of all the .module elements and use that minus the current window width (because you start with that amount of elements in view). I've also set the end trigger to be at the bottom of the page, because otherwise there was no way to scroll all the way to the end of the ScrollTrigger. 

 

Personally I would rewrite the layout, so that you don't need fixed elements with offsets, so that you can use the width of the .slider element and that you only need to pin .trigger element with ScrollTrigger that way it will be a lot more stable. But that depends on your CSS skill and how much time you want to researching and debugging CSS. Hope it helps and happy tweening! 

 

See the Pen oNVWqev?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen