Sree Posted July 15, 2021 Share Posted July 15, 2021 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 Link to comment Share on other sites More sharing options...
Solution akapowl Posted July 15, 2021 Solution Share Posted July 15, 2021 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. 4 1 Link to comment Share on other sites More sharing options...
Sree Posted July 16, 2021 Author Share Posted July 16, 2021 @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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now