Elliott W

Ah okay, so the delay is basically the debounce timeout. Yeah I'll just use 0.1 then. Yeah ScrollTrigger's built-in snap function does do directional snapping, but the custom one I provided didn't. I managed to find the ScrollTrigger.snapDirectional() function which does what I'm looking for: https://codepen.io/elliott-w/pen/MWQzwYa Thank you very much for your help.

You are simply a god amongst men. Thank you sooooo much! I realised the snap behaviour is more flexible than I thought. I ended up setting the delay after user stops scrolling to 0 and making the transitions a bit smoother. Also I added a custom snapTo function, so that when a user scrolls down to this component for the first time, it doesn't immediately send them to box 2: https://codepen.io/elliott-w/pen/abqQbQr Edit: Hmm actually this custom snapTo function doesn't take into account the direction of scroll. Are there any gsap util functions that do the same as if you had given the snap property an array?

Hi Jack, Thanks for the quick and detailed reply I should clarify the biggest issue I was facing was the scroll snapping, I tried my best for many hours, looking through every tidbit of gsap documentation and pretty much every related codepen I could get my hands on, but to no avail. I should also say I don't expect anybody to code the solution for me (thank you for the codepen though, helps a lot), just hoping for any pointers in the right direction. The sort of snapping functionality I'm looking for is as follows: 1. User starts scrolling 2. User stops scrolling 3. Top of nearest red box starts snapping/aligning to top of text But so far it seems gsap's builtin snapping can only do the following: 1. User starts scrolling 2. User stops scrolling 2.1. Red box must keep tweening to it's final position based on the inertia of scroll 3. Top of nearest red box starts snapping/aligning to top of text It's the delay caused by step 2.1 that I'm trying to avoid. I've also just realised that the very first codepen I posted behaves very differently when scrolling using apple trackpad/magic mouse vs a mechanical scroll wheel. Transitions are way smoother using the former. So I'm going to abandon the idea of using native css scroll snapping. After doing some more digging, I think I may try something like this: Except make the start and end point for each section inset so it doesn't immediately snap, but lets you scroll a little bit before snapping. I will post an updated codepen if I manage to get it working.

How do I replicate the smooth css snapping as demonstrated in this codepen: https://codepen.io/GreenSock/pen/YzyaKrq But on the red boxes in my codepen, so that the top of a red box is always aligned with the top of the #text element. Also how do I "unpin" #text after the top of the last red box is aligned with top of #text? I will also need to attach scroll triggers to each red box, so that I can change the #text content on the right based on which box is currently in view. I think this restricts what I can specify as the "scroller".