ScrollTrigger Adjustments

[Spenquatch]

Hello,

 

New to GreenSock and ScrollTrigger, so I am looking for a little help!

 

Here are the issues I am running into:

1) When going from vertical to horizontal scroll, it immediately scrolls and snaps to slide 2 when you scroll into slide 1. Is there a way to delay this and require another scroll before continuing to scroll horizontally?

2) Can the snap be adjusted to only snap when 75% of the slide has been revealed?

3) If you scroll just a little bit past a slide it automatically jumps all the way to the next slide, is there any way to prevent that.

 

Any help is much appreciated! Thanks!

See the Pen PoRvEVJ by SurrealStudio (@SurrealStudio) on CodePen

[GreenSock]

Welcome, @Spenquatch. 

 

By default, ScrollTrigger applies directional snapping because that's usually what people prefer. So if the user scrolls forward, instead of snapping to the CLOSEST section (even if it's backwards), it'll force it to go to the next one in the forward direction. But you can easily disable that by setting directional: false in the snap:{} object: 

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

 

Is that more like what you wanted? 

[Spenquatch]

@GreenSock Yes that worked for me! Now have another issue. I need to add a navigation that will stick to the side of the screen and link to different slides. I have seen some demos, the problem is the slides are dynamically created, and the examples I have seen are setup to manualy link to a preset number of slides. Could you please point me in the correct direction? Thanks!!

[GreenSock]

I'm not aware of any demos that have the numbers hard-coded. They're all dynamic. I'd recommend browsing through the demos in CodePen or at https://greensock.com/st-demos. And there are some helper functions in the docs that allow you to jump to certain ScrollTrigger-based spots.

 

For example: 

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

 

If you get stuck, just provide a minimal demo with your attempt and a very specific GSAP question and we'll do our best to help out. 

 

Good luck! 

[Spenquatch]

Thanks for your help!

 

I am using the code you provided above and it worked great until I added snapping. Now when I click on a link it jumps to desired panel for a split second and then jumps ahead a random number of slides. It seems to be random and I cannot get it figured out. Here is a link to the page I am working on: https://dev-atri-multisite.pantheonsite.io/studies-3 and here is a codepen of a close version of the code I am using.

See the Pen poVrpbZ by Spen_UN (@Spen_UN) on CodePen

 

Thanks!!

[GreenSock]

By default, it uses inertia to project where the scrolling would naturally end based on momentum. Just set inertia: false in your snap: 

See the Pen vYjJdOp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[Spenquatch]

Thanks for the quick reply, unfortunately that did not work. When I select a nav option it still jumps past the selected anchor. 

 

Please refference the link I provided, as it is displaying the issues, the codepen is primarily to see the code easier. 

 

Any other ideas for me to try? It is odd because it will scroll right to the correct slide if Snap is turned off.

[GreenSock]

Sorry, I misunderstood your question. 

 

You set up your snapping to be based on equally-sized sections. You also didn't have your function-based x-value set up to re-calculate on refresh (set invalidateOnRefresh: true on that ScrollTrigger). I assume this is what you were looking for: 

See the Pen vYjJdOp?editors=0010 by GreenSock (@GreenSock) on CodePen