Jump to content
Search Community

Horizontal Scroll Trigger Section breaks Anchor links to content afterwards

tobimori test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

When using a ScrollTrigger to create a horizontally scrolling section and linking to a section afterwards with an anchor link, the browser isn't scrolling correctly and stops at a section before the actual section. I recreated this bug in the Codepen.

 

The interesting thing here is that when behind the horizontal section, the Anchor link stops correctly. So it must be something with the browser not getting the correct "length" to scroll because the horizontal section expands it. 

 

What could I do to fix this?

See the Pen MWGRybO by tobimori (@tobimori) on CodePen

Link to comment
Share on other sites

4 hours ago, GreenSock said:

Yep, that's because you're using a regular link and the browser has no way to correctly calculate the position when pinning is involved. But don't worry - we made a helper function for this: 

https://greensock.com/docs/v3/HelperFunctions#getScrollPosition

Am I understanding correctly that this helper function would just give me the position of the animation at specific progress?

I'm looking to scroll to a section outside the animation, that's afterwards in content (as you can see in the codepen I made). How would I go about getting that position?

Link to comment
Share on other sites

Hi,

 

There are a few things that are complicating this a bit more than expected.

 

One of them is the fact that the section you want to scroll to using the link resides inside the element being pinned by ScrollTrigger, if possible move it outside that element.

 

Another issue is that the getScrollPosition helper is doing exactly what is supposed to do, is giving you back the end position of the ScrollTrigger instance, but the problem is that you have an extra element after the ScrollTrigger target and before the section you want to scroll to, so you have to take that into account as well when getting the position of that particular section.

 

I  tried a few things and so far moving the target section outside the pinned parent element and using offsetTop to get the position seems to be the only one that is working all the time:

See the Pen YzLMeqM by GreenSock (@GreenSock) on CodePen

 

I'd recommend you to keep only the elements that will be targeted by ScrollTrigger inside the section that will be pinned in order to keep calculations simple and easy.

 

Let us know if you have any other question.

 

Happy Tweening!

Link to comment
Share on other sites

1 minute ago, Rodrigo said:

Hi,

 

There are a few things that are complicating this a bit more than expected.

 

One of them is the fact that the section you want to scroll to using the link resides inside the element being pinned by ScrollTrigger, if possible move it outside that element.

 

Another issue is that the getScrollPosition helper is doing exactly what is supposed to do, is giving you back the end position of the ScrollTrigger instance, but the problem is that you have an extra element after the ScrollTrigger target and before the section you want to scroll to, so you have to take that into account as well when getting the position of that particular section.

 

I  tried a few things and so far moving the target section outside the pinned parent element and using offsetTop to get the position seems to be the only one that is working all the time:

 

 

 

I'd recommend you to keep only the elements that will be targeted by ScrollTrigger inside the section that will be pinned in order to keep calculations simple and easy.

 

Let us know if you have any other question.

 

Happy Tweening!

 

The reason I'm pinning the whole page is to make the page look good on large screens without changing the design that much. I could make the horizontal container at least 100vh, but that wouldn't look as good as pinning the whole page. I made a small screen recording to show what I'm meaning: https://share.cleanshot.com/6huou3

 

Is there a way to have the section still centered with its own height, while keeping correct scroll links?

 

 

Link to comment
Share on other sites

Hi,

 

Yeah I see what you mean, that's quite a pickle to solve. You could try to give the horizontal section a relative position and add a completely empty div with height 100vh, width 100% and an absolute position in order to use that as the trigger so the horizontal section is always in the center. Something like this:

 

See the Pen oNdOqwx by GreenSock (@GreenSock) on CodePen

 

Unfortunately we don't have the resources to provide fully working solutions, but hopefully this provides a good starting point for this.

 

Let us know if you  have any other questions.

 

Happy Tweening!

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