Jump to content
Search Community

Scroll to specific section on horizontal scroll - ScrollTrigger

Sree test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello,

 

I'm building a horizontal scroll website using scrollTrigger plugin. It works fine on mousewheel & mousedrag. But I need to scroll to specific sectons using <a> links & update the same to scrollTrigger plugin. I managed to click & scroll to specific section, but for some reason scrollTrigger won't work with mousewheel after this. I also noted that default mousewheel uses % values instead of px.

Pls refer to the codpen demo to see the issue.

I found a GreenSock demo on Codepen which uses anchor links, but that didn't worked for me. I'm a javascript newbie so any help would be very much appreciated. 

Thanks

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

Link to comment
Share on other sites

Hey there @Sree

 

The way you're tryoing to do it here, is to simply just tween your sections to a specific point - that will throw everything out of position with the fake-horizontal-scrolling ScrollTrigger on your sections.

 

What you'll want to take a look at is GSAP's ScrollTo Plugin for this.

 

Have you taken a look at the post I linked you to the last time?

 

Here is the demo from the very end of that post showing how to use scrollTo in a scenario as yours as a starting point.

Although in your case you will also likely have to consider the 100px of the menubar you have on the left there.

 

Give it a shot.

 

See the Pen a82e21f8d9c7bce0059159ced099666d by akapowl (@akapowl) on CodePen

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hey @akapowl  Thanks for replying to my question.

 

2 hours ago, akapowl said:

Have you taken a look at the post I linked you to the last time?

 

Yes, I did but it didn't work at that time. But since you suggested, I decied to try again. That code throwed some errors & finally I found the real issue. It was gsap library causing the issue. I was using a version 3.4.2 & when I changed to verision 3.7.1 all codes seems to be working.

But I' not sure how to handle the menubar width. Adding +100 to scrollTop value seems working only for 1st section. Rest of the section scrolled to a diffrent postion each time.

See this CodePen

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


 

  • Like 1
Link to comment
Share on other sites

  • Solution

 

Ah yes, that's a bit tricky.

I guess since each of your sections is 100px narrower than the viewport, the 100px discrepancy would have to stack for each section.

 

This here works - multiplying the width of the navbar by the indexOf the targetElement within the sections array (not sure if there would be an easier way, though)

 

See the Pen 99a9bd60e87ad4b89ebb7baa00c14de7 by akapowl (@akapowl) on CodePen

 

Some notes on that:

  • I used a forEach loop here - just because I am more confident with it over simple for loops.
  • I took everything related to the scrollTo out of ScrollTrigger's .matchMedia - ScrollTrigger's matchMedia will respect everything related to the ScrollTriggers you set up within the .matchMedia. For everything else that is not related, you'll probably want to take a look at general window.matchMedia. I added that in my pen to show an example case of how to use it - here making a distinction for where to scroll to on wider viewports vs narrower vieports, where you don't have the fake-horizontal scroll going on with an if/else statement.
  • You'll likely want to add a distinction of a similar sort for enabling/disabling your Draggable - because as it stands now, your Draggable will still be active when resizing down to narrower viewports.

 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@akapowl Thanks a lot. That solved the issue.

I really appreciate the time & effort you spend to fix my code. I'm not much familiar with plain javascript so it was a little difficult to understand how to calculate the exact value. Though I have only 1 week of experience with GreenSock library, I learned a lot. This is an awesome forum.  Special thanks for cleaning up my code. 😍
 

Once again, thanks a lot. I am grateful for your help. It means a lot to me. Thank you.
 

Regards,
Sree 

  • 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...