ScrollTrigger with immediate snap

[scavaliere 7 Likes (Newbie)]

Hello everyone! 
I'm using GSAP ScrollTo and ScrollTrigger plugins. 
What I am trying to achieve is the immediate snap from section to section. Now, I need to scroll almost at the end of the section to make the next snap. 
I have already tried some solutions found on the forum like 

without results unfortunately. 

I attach my Codepen. 

Can someone help me to find a solution? 

Thank you in advance!

See the Pen xxqaPgd by scavaliere (@scavaliere) on CodePen

[akapowl 4,684 Likes (Superhero)]

 

Hello @scavaliere

 

1 hour ago, scavaliere said:

What I am trying to achieve is the immediate snap from section to section. Now, I need to scroll almost at the end of the section to make the next snap. I have already tried some solutions found on the forum like without results unfortunately. 

 

I just copy pasted the js-code from this example...

 

 

 

...into your codepen and it works just as in the other example 🤔

 

Maybe I'm not understanding correctly though. Is this not working for you? Do you expect it to work differently?

 

See the Pen 8ffbf19a8ebf6903a991e5cdc4d7f45a by akapowl (@akapowl) on CodePen

[scavaliere 7 Likes (Newbie)]

Hello @akapowl ! 
Thank you for the reply. 
The snapping is working well, but when I use an anchor link (in a menu for example) it doesn't work correctly.
It goes section by section without anchoring or the anchor is wrong in first instance.
I updated the codepen.

[akapowl 4,684 Likes (Superhero)]

 

There is a suggested solution for preventing the instant snapping inside the ScrollTriggers' callbacks when wanting to use some navigation via a menu in this thread here;

 

 

 

What it basically does is toggle a boolean variable to true on click of an anchor-link  - the ScrollTriggers callbacks are set up so the instant-snapping-scrollTo will only fire if that variable is false - so it won't get triggered when you click that anchor-link. The variable gets set back to false when the anchor-link-scrollTo is complete then, so the instant snapping will work again.

 

Give it a shot and let us know if it works for you.

[scavaliere 7 Likes (Newbie)]

Hello @akapowl! 
I've checked the other post you linked. In my case the link is triggering a section scroll once the menu item is clicked but it doesn't reach the correct anchor. One click, one scroll. 
I would need a scroll to the right anchor. In that case I think every button works for every section but I have a single menu item that needs to anchor to the end of the page.

[akapowl 4,684 Likes (Superhero)]

 

I see you updated your codepen demo above.

 

It would actually be great if you could leave your posted codepen examples as they were when you first posted them and when you want to make changes, use codepen's fork button and make those changes to the fork instead, so for future readers who might need the same as you / have the same problem as you, the context remains intact.

 

38 minutes ago, scavaliere said:

I've checked the other post you linked. In my case the link is triggering a section scroll once the menu item is clicked but it doesn't reach the correct anchor. One click, one scroll. 
I would need a scroll to the right anchor. In that case I think every button works for every section but I have a single menu item that needs to anchor to the end of the page.

 

I've read this 5 times now and I still don't think I understand what it is you're asking - sorry.

 

In your updated codepen demo everything seems to work as expected now, doesn't it?

 

Could you try rephrasing your question?

 

 

 

Edit: 

 

Okay, I think now I understood @scavaliere.

 

You'd have to incorporate some logic of your own to make it scroll to a specific panel instead of cycling through the panels for each button available. Maybe something like this.

 

See the Pen 5292a7fb6d2323f24d169bee760a2945 by akapowl (@akapowl) on CodePen

 

 

[scavaliere 7 Likes (Newbie)]

Hello @akapowl,
sorry for updating the original codepen, I thought it would be easier to track the changes. 
I'll revert to initial pen. 
About the question: sorry again, maybe I wasn't clear enough. What I mean is that when I click on the anchor on my website with the snap script you suggested, the scroll STARTS but SNAPS continuously section by section. It doesn't go directly to the anchor I need. 
I attach a little video to make it clearer. As you can see from the video, when I click on the link on top, the scroll first snap (slowly) to next section, then it anchors to the right one. It seems the anchor goes section by section while scrolling. 

Hope you can help

 

[akapowl 4,684 Likes (Superhero)]

 

Okay, obviously what I understood and added in my post above is not what you asked, sorry.

 

I'm not sure how I can help you with this because I don't know what's going on on your website (and we don't do website debugging in this forum).

It appears to be working properly in the codepen demos above though - so if you could recreate the issue in a minimal demo that would be very helpful for trying to help you any further with this.

 

Please note the following though (what @ZachSaucier mentioned in the original thread linked to)

 

It should be said that ScrollTrigger is not built to scroll-jack like what this approach does. The approach above is a hack and I don't really recommend using it. If you really need this sort of functionality then you'll need to either build the functionality yourself or use an existing tool like fullpage.js. But even then, depending on your needs, there are likely to be issues because web browsers are simply not built to work in this sort of way.