Jump to content
GreenSock

Mukhriddin

how to play with header links for scrolled sticky blocks

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

It sounds like you forgot to load ScrollToPlugin

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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. 

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