ScrollTrigger Scroll to a specific section on horizontal scrolling & disable horizontal scrolling on mobile.

[Sree]

Hello,

I'm new to Greensock & I was trying to create a horizontal scrolling website using scrollTrigger(Whole website is horizontal scrolling). 
I have two problems to solve now:
1.Scroll to last section on clicking on a button ("Click to contact" button on codepen demo & scroll to <section #contact>..)
2. Disable horizontal scrolling on mobile (below 991px) & apply vertical scrolling.

I tried to implement some solutions other users posted on this forum, but didn't get anything working for me. I'm not much skilled in plain javascript (I was very happy with jQuery untill this project came). I hope someone can help me with this issue.

Thanks in advance.

See the Pen ExmZEjx by DeCodeUI (@DeCodeUI) on CodePen

[akapowl]

 

Welcome to the forum @Sree

 

2 hours ago, Sree said:

I tried to implement some solutions other users posted on this forum, but didn't get anything working for me.

 

Usually it's best if we can see what you tried reflected in your codepen demo and try to help you from there, because people on this forum just don't have the capacity to code out custom solutions for everyone.

 

 

 

2 hours ago, Sree said:

2. Disable horizontal scrolling on mobile (below 991px) & apply vertical scrolling.

 

With regard to this, you'll want to take a look at ScrollTrigger's .matchMedia which is built for exactly doing that (i.e. having different ScrollTriggers active for individual different screensizes). I just quickly threw it in there with your setup and it's already working as I'd expect it to work, so good job on the general setup

 

See the Pen 790ca685594049ad17498fc84ce61370 by akapowl (@akapowl) on CodePen

 

 

 

2 hours ago, Sree said:

1.Scroll to last section on clicking on a button ("Click to contact" button on codepen demo & scroll to <section #contact>..)

 

That one will have a bit more to think about. For one, in your fake-horizontal scenario the fake-horizontal-tween and the scroll-amount of your ScrollTrigger are not equal, so there will be an offset while scrolling that you would have to consider for a) tweens you want to trigger when certain elements reach a certain point in the window (like you appear to have for your contact button e.g.) and also b) for any scrollTo functionality.

 

This thread here contains a more detailed explanation of that 'offset' and at the end of the post linked to, I also added an example of how to possibly implement scrollTo in a scenario as such.

 

 

 

 

One more thing that you would have to consider for the scrollTo, is to make a distinction between when you are fake-scrolling horizontally and when you are native-scrolling vertically on lower width window-sizes because the positions for where to scroll to will be quite different then.

 

Try giving it a shot and we can see how we can help you from there. Hope this helps getting into the right direction a bit.

 

[Sree]

@akapowl Thank you. .matchMedia is awesome. It solved the major issue. Regarding scroll poston on horizontal scroll, now I understand it's bit challenging. I think the question link you have provided should work for my scroll postin probelm. I will try to work on it.

Thanks a lot for replying to my question.