how to play with header links for scrolled sticky blocks

[Mukhriddin 1 Likes (Newbie)]

Here I have faced an interesting issue. When I click header links, there exist two outputs: positive and not working.

And I guess I know what's the problem, but cannot fix it. I'd really appreciate your help.
So here is my conclusion: 
1. Working: when you're on first block, you can go to the second, third and fourth blocks by clicking header menu links. And if you're on second block, you can go the third and fourth only(not to the first)
2. Not working: As I partially mentioned, when you are blocks below, clicking header menu links doesn't lead to blocks above. For example, from 4th block you cannot go the first block.

And it is, I guess, because of sticky blocks. They are going up to one page height, i.e, they are not moving up from top screen as they are sticky. And this causes them to stay their place even after header links are clicked. On the other hand, they working when blocks are below as they are really down from bottom screen view. 

 

See the Pen vYRNOVp by mshakhriyorov (@mshakhriyorov) on CodePen

[GreenSock 17,854 Likes (Superhero)]

You can't use the browser's native anchor link behavior because the browser can't figure out the scaling you're doing and where each section will actually line up with the top. You need to tap into ScrollTrigger's magic. Also, be very careful about using scroll-behavior: smooth. It can interfere with things. 

 

I assume you wanted something more like this?: 

See the Pen KKodWGo?editors=1010 by GreenSock (@GreenSock) on CodePen

 

7 hours ago, Mukhriddin said:

And it is, I guess, because of sticky blocks. They are going up to one page height, i.e, they are not moving up from top screen as they are sticky. And this causes them to stay their place even after header links are clicked. On the other hand, they working when blocks are below as they are really down from bottom screen view. 

I read that a few times and I'm still fuzzy on what you mean. Hopefully my demo above gets you going in the right direction, though.

[Mukhriddin 1 Likes (Newbie)]

13 hours ago, GreenSock said:

You can't use the browser's native anchor link behavior because the browser can't figure out the scaling you're doing and where each section will actually line up with the top. You need to tap into ScrollTrigger's magic. Also, be very careful about using scroll-behavior: smooth. It can interfere with things. 

 

I assume you wanted something more like this?: 

 

 

 

I read that a few times and I'm still fuzzy on what you mean. Hopefully my demo above gets you going in the right direction, though.

Yes, that's the thing I wanted. And I tested this on my real project. But I got somehow errors like this. 

gsap-core.js:3622 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': The provided value is not of type 'ScrollToOptions'.
    at PropTween._setterFunc [as set] (gsap-core.js:3622:1)
    at PropTween._renderComplexString [as r] (gsap-core.js:3659:1)
    at Tween.render (gsap-core.js:3388:1)
    at _lazyRender (gsap-core.js:173:1)
    at _lazySafeRender (gsap-core.js:179:1)
    at Array.updateRoot (gsap-core.js:2634:1)
    at _tick (gsap-core.js:1282:1)

What'd be the reason for that? P.s: I use React as a JS framework

[GreenSock 17,854 Likes (Superhero)]

It sounds like you forgot to load ScrollToPlugin. 

[Mukhriddin 1 Likes (Newbie)]

27 minutes ago, GreenSock said:

It sounds like you forgot to load ScrollToPlugin. 

Yes, it started to work. Thanks, Jack!
And one more thing, if I have two the same block(for ex. I have two third blocks), clicking order is broken. I mean I cannot go to the fourth though. You can see what I mean on this code: 

See the Pen poLjLVy by mshakhriyorov (@mshakhriyorov) on CodePen

[GreenSock 17,854 Likes (Superhero)]

Then you need to identify which element exactly you want to go to. Here's an example that uses an id: 

See the Pen WNzQJMO?editors=1010 by GreenSock (@GreenSock) on CodePen

[Mukhriddin 1 Likes (Newbie)]

16 minutes ago, GreenSock said:

Then you need to identify which element exactly you want to go to. Here's an example that uses an id: 

 

 

Yes, it is! 
Soo... everything is working perfectly on this Pen. However, when I try to test this code on my real project. some errors come out. I am using React as a JS framework. And header links and blocks are located in different components. When I click a link it either doesn't work at all(doesn't move block as before) or  executes error below : 

Uncaught TypeError: Cannot read properties of undefined (reading 'end')
    at HTMLAnchorElement.<anonymous> (App.jsx:135:1)

 

[GSAP Helper 72 Likes (Contributor)]

It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.