Jamesh Posted December 14, 2020 Share Posted December 14, 2020 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... Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 14, 2020 Share Posted December 14, 2020 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. 1 Link to comment Share on other sites More sharing options...
Jamesh Posted December 14, 2020 Author Share Posted December 14, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 14, 2020 Share Posted December 14, 2020 Here are some old threads about the subject found by a quick search. They use the old syntax but the concept is the same: 1 Link to comment Share on other sites More sharing options...
Jamesh Posted December 14, 2020 Author Share Posted December 14, 2020 Thank you so much.... 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