Jump to content
GreenSock

Pixizz85

Scroll to different page with a horizontal section

Recommended Posts

Hello everybody,

 

I have been using GSAP since the beginning of the year and a member of the club since April. It is really a pleasure to use this plugin :)

 

I created a page with a scroll smoother, an horizontal scrolling part after header and also anchor links that lead to the various sections of the page. I had problems creating anchored links in the page. I managed to solve the problem by differentiating the links that lead to the horizontal scrolling part from the links that lead to the vertical part. I don't know if I coded it the best way but it works.

 

On the other hand, I can't get out of it concerning anchor link that lead to external page horizontal scrolling section. External links to vertical part working but when the link sends to an area of the horizontal scrolling part it bugs.

 

Here is a demo that highlights the problem: https://codesandbox.io/s/gsap-scrollsmoother-bureau-w-2fkuee

 

I feel like I'm not far but I can't find the solution. Anyone got an idea ?

 

Thanks a lot

Link to comment
Share on other sites

Thanks for joining Club GreenSock, @Pixizz85💚

 

It looks like that's just a logic issue in your code - you should only route things to the internal function if it's valid. Like

let hash = getSamePageAnchor(a);
if (hash) {
  scrollToHash(hash, e);
}

https://codesandbox.io/s/gsap-scrollsmoother-bureau-w-forked-iut8bg?file=/main.js

  • Like 1
Link to comment
Share on other sites

After a few changes it works. I use query strings for anchor link that lead to external page horizontal scrolling section. This helps to differentiate normal anchor links from links to the horizontal scrolling section. Then finally during the refresh I check if there is a query strings in the url.  I'm sure it's possible to optimize the code but it works.

 

https://codesandbox.io/s/gsap-scrollsmoother-bureau-w-2fkuee

 

Thanks for the help !

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