ScrollTrigger & ScrollToPlugin

[Jamesh]

Unfortunately I cant replicate on a CodePen (I don't think) as this involves using the scrollToPlugin to scroll to an anchor # on a different page. 

 

Essentially I have a horizontal scrollTrigger animation on my homepage. I have a number of sections that can be scrolled to using the scrollToPlugin which are triggered by clicking on menu items in an off-canvas menu. This works as it should on the homepage, and the scrollToPlugin deals with adjusting/calculating the height of the horizontal scrollTrigger. However, if I want to access the sections from the menu on any other page, the scrollToPlugin does not function. Is this sort of functionality possible and if so what are the next steps?

 

This is my code so far: 

 

function initScroll() {
	document.querySelectorAll('.anchor').forEach((a, index) => {
		a.addEventListener('click', () => {
			gsap.to(window, {
				duration: 1,
				scrollTo: { y: '#section' + (index + 1), offsetY: 70 },
			});
		});
	});

Thanks in advance for any thoughts...

[ZachSaucier]

Hey Jamesh. I'm a bit confused. Are you expecting the click listener that you provided to animate to sections on a different page? JavaScript doesn't work that way. It doesn't retain its context across page changes. 

 

With that being said, what you should do in circumstances like this is when the page loads, parse the URL for any relevant #section. If you have an element on the page that matches that ID, then use GSAP/ScrollToPlugin to scroll to that element. 

[Jamesh]

Hi Zach

 

Thanks for your quick response, as always. I just wanted to clear up whether ScrollTo would do the gruntwork of animating to sections on a different page, as you suggested, which I've taken from your message that it doesn't. So now I just to work out how to parse the URL for when the page loads. If you have any suggestion on how to do that, that would be gratefully received! 

 

Thanks again

 

James

[ZachSaucier]

Here are some old threads about the subject found by a quick search. They use the old syntax but the concept is the same:

 

[Jamesh]

Thank you so much....