Horizontal site with ScrollTrigger and ScrollToPlugin - how to link to specific part of a page?

[RaniL]

Hi,

I have a horizontal website with ScrollTrigger and ScrollToPlugin, there is also a navigation menu that links to the relevant section with an anchor tag. Everything works perfectly there.

But, when sharing a link to a specific part of the site, i.e. to a section (as in www.mysiteurl/#section-5) - it gets directly there, so GSAP doesn't recognize any transform: translate changes, thus it's all messed up and the browser see it as the homepage (transform: translateX(0), instead of transform: translateX:(-500%); and all navigations (clicks or scroll) are relative to that wrong parameters.

 

My site structure is in the attached Codepen, but I don't see Codepen supprt for direct anchor links - I hope the problem is clear

 

What should I do?

 

Thanks 🙏

See the Pen eYbaWBK by rani-ran (@rani-ran) on CodePen

[Rodrigo]

Hi,

 

Indeed is hard to debug this without a demo and is totally understood why creating one is complex.

 

Keep in mind that codepens have a debug view without any iframes that would allow to kind of test something like that:

Just be sure to add an extra section in order to test.

 

One option also could be to add a window load event and run ScrollTrigger.refresh() after, or run all your ScrollTrigger code and the one that creates the anchor handlers after everything has been loaded.

 

Hopefully this helps.

Happy Tweening!

[RaniL]

Hi Rodrigo,

Thanks, but maybe I wasn't clear. I don't think it's a bug or a windows load issue. 

I've tried your solution but it doesn't work. ScrollTrigger is running after everything was loaded.

ScrollTrigger.refresh didn't help, also ScrollTrigger.update( ) .

I'll try to explain again.

 

In the attached Codepen, the first section has an id of #section-1.

Thus, www.mysiteurl.com is the same as www.mysiteurl.com/#section-1.

 

But, if I want to share another section, like www.mysiteurl.com/#section-3, the user gets directly to that section, but ScrollTrigger hasn't run at all, thus it thinks that we are at #section-1.

At this point, nothing will happen when clicking in the navigation to go to #section-1, although we are at #section-3.

 

I can't  demonstrate it exactly with Codepen, since over there I can't access the other sections directly by changing the url.

The actual website I'm developing is in progress and I can't really share it at the moment.

 

In general - I want to share links to specific sections of my horizontal website, and that ScrollTrigger and everything will work as expected

 

Thanks a lot!

Rani

 

 

[RaniL]

Hi, I managed to recreate to problem in a new CodePen 

See the Pen VwgZyRy by rani-ran (@rani-ran) on CodePen

You can link directly to this url https://cdpn.io/pen/debug/VwgZyRy?authentication_hash=XBrGRnmGxJRM#section-3

It gets to the correct spot, but then every navigation (click or scroll) is completely messed up.

 

Thanks!

 

p.s.

Earlier today I opened another thread on the same issue 

 

[Rodrigo]

Hi,

 

Please don't create duplicated threads. We are keeping track of this one, so updating this should be enough. Thanks!

 

I checked the other thread and I think it would be OK to delete it so we can focus just on this. Please confirm that the other thread doesn't have any information that is not present in this one in order to safely delete it without loosing any critical information about the issue.

 

Circling back to the issue, I see what you mention and I'll look into it, so please be a bit patience while I try to figure a way to make it work. I have pretty good idea of the issue: When the page loads with the particular hash, the browser looks for that element and sets the scroll position accordingly. The problem is that all your elements are in the same vertical position and the scroll position is set there. Granted there is some odd behaviour that I'll look into it but on page load there is no way ScrollTrigger knows exactly where the scroll position should be based on the URL hash.

 

Finally I think this is a far simpler setup for your demo, at least to create the horizontal layering:

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

 

Happy Tweening!

[RaniL]

Hi Rodrigo!

I really appreciate your help, and anticipate your solution!

 

Sure, you can delete the other thread. It has no additional info.

 

Your version of the demo indeed seems better and more correct. But, I added the navigation menu and it doesn't work at all.

I get a console error when clicking on links ("Cannot read properties of undefined reading 'scrollTrigger'").

You can see it here 

See the Pen GRzRRjg by rani-ran (@rani-ran) on CodePen

 

I hope your solution would fix the external link issue, and maintain internal links working with ScrollTo.

 

Many many thanks 🙏

 

[Rodrigo]

Hi,

 

I haven't had the time to check the external link stuff. For the ScrollTo links this seems to work with this setup:

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

 

Happy Tweening!

[RaniL]

Hi Rodrigo,

Thanks for the ScrollTo solution.

It's seems much better since it doesn't involve changes of hash/url, as was the case before.

It's also much more aesthetic without the hash 😀

 

But  unfortunately it leads to new difficulties...

 

The following CodePen represent the complete and correct structure of the project I'm working on.

These are the changes I made to your CodePen, that I don't manage to get to work correctly:

1. There is a fixed logo that should get you back to the home screen, with ScrollTo.

2. The nav bar also has a "home screen" link, should work with ScrollTo.

3. There is a second navigation (kind of cards) which appears only on the home screen.

4. The "green section" (panel 1) is 100vw, but all the rest to its right hand side (should be about 9 more panels) will be around 150vw, don't know yet the exact size of each.

5. There is a sticky section in the beginning of each section.

 

See the Pen BaMyQVb by rani-ran (@rani-ran) on CodePen

 

All of these worked in an earlier CodePen I shared before, but the internal links with hash had some serious side effects I couldn't solve (and couldn't represent yet in CodePen). And of course the external link issue.

 

Anyway, I would be so grateful if you can help 🙏

 

[Rodrigo]

Hi,

 

I'm afraid that the whole setup with different widths for each section with the sticky vertical bar on the left is a bit more complex and could be beyond the help we can provide in these free forums. I should add that the solution in place in your original codepen is not fully responsive either. Keep in mind that horizontal pinning with vertical scroll is not really supported, so you have to stop the horizontal motion somehow in order to mimic horizontal pinning. On top of that you have the direct link to a section stuff that I haven't had the time to look into yet, but I'm 100% sure is not related to GSAP at all but more a custom logic thing.

 

Of the top of my head one of the ideas that I have is to make every horizontal section 100% width with a position relative and move the content that is wider than the screen width. Something like this:

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

 

This is just a proof of concept, so I'll leave it to you to study and understand how it works in order to replicate it with more sections and make it more dynamic and responsive.

 

Finally I strongly recommend you to get the animation working without ScrollTrigger first and then add ScrollTrigger to make it work.

 

Hopefully this helps.

Happy Tweening!

[RaniL]

Hi Rodrigo,

I'm grateful and really appreciate your help!

This thread has become too complicated, and I think my questions are simpler. I'll try to clarify.

 

I have a perfectly working demo, I shared it in the beginning of this thread.

It does have an issue with screen resizing, but beside it, It's fully responsive.

Sticky elements, none-sticky elements, internal anchor links, ScrollTrigger, Horizontal scrolling, ScrollTo, different section width - all are working.

This is the CodePen after some minor changes 

See the Pen XWObBoV by rani-ran (@rani-ran) on CodePen

 

Would be wonderful if you can just clarify on 2 issues, that related to the capabilities/functionalities of ScrollTrigger.

 

1. I want to access horizontal sections directly from external link with anchor hash, and ScrollTrigger to "know" where we are.

If I understand you correctly - it's not possible?

I understand you have this option for vertical scrolling club members plugin ScrollSmoother.

Is it even possible to replicate this behavior with ScrollTrigger horizontal?

Does ScrollSmoother also support horizontal sections external links navigation?

 

2. After adding a "home" section which is on top of everything (i.e. vertical scroll to the second row, and than everything is horizontal), there is a problem that ScrollTriggers "losses track" of position after clicking on internal anchor navigation links - it reaches the desires spot, but when scrolling again it losses orientation.

Unfortunately I couldn't replicate it yet with CodePen - but this is the case.

I believe it's because of the hash changing with anchor links. I'm still making an effort to recreate it in CodePen.

It doesn't happen if I have only one "row" of sections.

Do you have an idea for the cause of this issue?

Do you think is it a problem with my code, or ScrollTrigger doesn't support this functionality?

 

I want to conclude by saying that GSAP has dramatically enhanced the functionalities and quality of my project!

What I have in the demo is great by itself, and the project has many more beautiful GSAP animations!

 

Thanks a lot!

R.

[Rodrigo]

Hi,

3 hours ago, RaniL said:

1. I want to access horizontal sections directly from external link with anchor hash, and ScrollTrigger to "know" where we are.

If I understand you correctly - it's not possible?

I understand you have this option for vertical scrolling club members plugin ScrollSmoother.

Is it even possible to replicate this behavior with ScrollTrigger horizontal?

Does ScrollSmoother also support horizontal sections external links navigation?

This is a logic issue nothing more. If you completely remove GSAP from your code and keep the horizontal sections and use a direct link to one of those sections, the browser will get you to the same scroll position because the position of all those elements relative to the top of the document is the same. The problem you're facing most likely stems from the fact that when ScrollTrigger is ran (which is when the calculations are made in order to add the pinning space and everything else) the browser already sent you to that particular location (the same you get without GSAP and ScrollTrigger, this is why I've been adamant to saying that this is not an issue with ScrollTrigger, but a custom logic stuff). ScrollTrigger just doesn't care about the URL and any hashes in it, it will run and execute it's logic according to what you're giving to it when the page loads. The one idea I have (that I haven't been able to test) is to store your hash sections/links in an array. Since you are running some custom logic to know exactly the scroll position of each section, so you can store that in an array (could be the same array for the hashes). Then after ScrollTrigger is completed check if the URL has a hash and based on that tell ScrollTrigger to take the scroll position to that point or even use the ScrollTo Plugin for that based on the point you already calculated when looping through the links. See how this is more a custom logic thing than a GSAP related one?

 

3 hours ago, RaniL said:

2. After adding a "home" section which is on top of everything (i.e. vertical scroll to the second row, and than everything is horizontal), there is a problem that ScrollTriggers "losses track" of position after clicking on internal anchor navigation links - it reaches the desires spot, but when scrolling again it losses orientation.

Unfortunately I couldn't replicate it yet with CodePen - but this is the case.

I believe it's because of the hash changing with anchor links. I'm still making an effort to recreate it in CodePen.

It doesn't happen if I have only one "row" of sections.

Do you have an idea for the cause of this issue?

As you mention I can't see that issue in your demo, so my best guess is that something else in your setup is causing this. If you can't replicate it we simply can't even guess what could be, sorry 🤷‍♂️

 

Finally this is what I mean when I mention that your current setup is not responsive, I don't know if you have noticed it:

https://i.imgur.com/Dt9fERW.mp4

 

Happy Tweening!

[RaniL]

Hi,

 

Responsiveness - as you pointed out, indeed it has a problem when resizing the screen. I couldn't figure out a way to fix it yet.

But, in any screen size and after any screen resize - if you refresh the page it's completely fine again. 

So the issue will be only with users that tend to resize screen... it's not perfect but I'd stick with this solution for now..

 

Regarding your custom logic idea about the URL and hash in external links - seems great, I'll try it later and update you 🙂

 

Thanks!

R.

[Rodrigo]

4 hours ago, RaniL said:

So the issue will be only with users that tend to resize screen... it's not perfect but I'd stick with this solution for now..

Yeah, that's why I made this suggestion, that is route I'd take:

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

 

Happy Tweening!

[RaniL]

Hi,

Some positive updates 🙂

Your advice on accessing panels/section from external pages with the same calculations I do with the nav menu - worked fantastic. Thanks so much!

An important addition - I had to disable the browser's behavior of going directly to the hash, so the calculation to which panel to go to is based on html data attribute, not ID.

 

Regarding that mysterious behavior I had with internal navigation, it was just because in my development environment I somehow forgot to add  e.preventDefault(); after click on menu item.

 

So the important things are working great!

I recreated it in CodePen so other people from the community can use it too 

See the Pen LYqGwpd by rani-ran (@rani-ran) on CodePen

 

I'm still trying to figure out a way to work with your tip regarding the sticky element and responsiveness. If it's ok I might have a follow up question on that 🙂

 

Cheers,

R.

[Rodrigo]

Hi,

 

Is great to hear that you were able to solve it, that is working and that somehow the advice was helpful.

 

Finally thanks for sharing the solution, looks great!

 

Happy Tweening!

[RaniL]

Hi,

Just an update.

I've fixed the issue with the responsiveness of the sticky element.

I put the calculation of window.innerWidth inside a function, so it's calculated on every resize.

It works perfectly if the first section is 100vw and the rest are 150vw, in other configuration a more complex function is needed.

Final CodePen:

See the Pen XWOpLvy by rani-ran (@rani-ran) on CodePen