Horizontal Scroll Trigger Section breaks Anchor links to content afterwards

[tobimori]

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

[GreenSock]

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

[tobimori]

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?

[Rodrigo]

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!

[tobimori]

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?

 

 

[Rodrigo]

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!

[GreenSock]

Here's the helper function being used in your original demo: 

See the Pen JjvVxVV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I just added the pinnedContainer as a parameter. 

 

I hope that helps. 

[tobimori]

On 10/18/2022 at 1:26 AM, GreenSock said:

Here's the helper function being used in your original demo: 

 

 

 

I just added the pinnedContainer as a parameter. 

 

I hope that helps. 

 

Thanks. This finally worked.

[lagalga]

I've got a similar issue… I have scroll trigger activated to show and hide a fixed header... but also, in the middle of a page I have some anchor links that don't lead to where they should. If I enter the url directly, they do work, but not from an "a".
I have the scrolltrigger code in the header template of all pages... do I have to make a gsap code to make a link to anchor?
https://develop.soulsight.es/thoughts/#menuPostsAreas

 

[Rodrigo]

Hi @lagalga,

 

While I'm able to understand your question, please make an extra effort and post in english so everyone can check your question.

 

Unfortunately without a minimal demo there is not a lot we can do to help. You can look in our ScrollTrigger How-To  and Showcase collections and see if you find something there that helps:

 

https://codepen.io/collection/AEbkkJ

https://codepen.io/collection/DkvGzg

 

Happy Tweening!

[lagalga]

i've set a codepen but the scrolltrigger doesn't work  and the anchor links yes

See the Pen BaeRzzy by lagalga (@lagalga) on CodePen

[Rodrigo]

Hi,

 

Your demo is not loading neither the GSAP core file nor ScrollTrigger, that's why is not working.

 

I forked and made some changes to it:

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

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

I forgot we recommend using GSAP MatchMedia instead of ScrollTrigger's MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

While ScrollTrigger's MatchMedia method still works, it has been deprecated in favor of the one on GSAP's Core

 

Happy Tweening!

[lagalga]

i can't reproduce the bug on codepen… i've built the fullscreen menu, thinking its fullheight is interferring with the anchor links target, but not… i only know that disabling the gsap code on that page the anchor links work.

Other thing i'm struggling with is that when i load more post with ajax, the height of the document changes, and below those news loaded posts the gsap function is not working… How do i load the gsap js when the ajax is triggered?

https://develop.soulsight.es/thoughts/articulos/

 

 

 

[lagalga]

9 hours ago, lagalga said:

Other thing i'm struggling with is that when i load more post with ajax, the height of the document changes, and below those news loaded posts the gsap function is not working… How do i load the gsap js when the ajax is triggered?

https://develop.soulsight.es/thoughts/articulos/

 

 

 

i've added this to the JS module right after the tween, but it doesn't work

$( document ).on( "ajaxComplete", function() {
	ScrollTrigger.refresh();  	
});

Just like that:
 

jQuery(document).ready(function() {
console.clear(); // Start with a clean console on refesh

gsap.registerPlugin(ScrollTrigger);

const showAnim1 = gsap.to("#menuSticky", {
        yPercent: -100
      })
      .reverse();
    ScrollTrigger.create({
      id: "max",
      start: () => "600px top",
      end: "max",
      markers: false,
      onUpdate: (self) => {
        showAnim1.reversed(self.direction < 0);
      }
    });
  
  
  $( document ).on( "ajaxComplete", function() {
  	ScrollTrigger.refresh();	
	});
  
});

 

[Rodrigo]

Hi,

 

I wouldn't rely on a global ajax complete callback but on the complete callback from a specific ajax/fetch request instead.

 

Calling ScrollTrigger.refresh() after an ajax call is the right thing to do FYI.

 

Happy Tweening!

[lagalga]

I've (kinda) found it!

 
Instead of searching for the specific ajax call (that i'm not finding), like this:

jQuery(document).ajaxComplete(function(event, xhr, settings) {
    if (settings.url === 'filter_ajax_object.ajax_url') {
  		ScrollTrigger.refresh();	
		console.log('bravo!');
	}
});

without the conditional it works:

jQuery(document).ajaxComplete(function(event, xhr, settings) {
  		ScrollTrigger.refresh();	
});

 

Edited June 5 by lagalga
solution founded