Smooth Scrolling (Not Anchor-Jumping!)

[granularclouds]

I've been playing around with ScrollTrigger - what an amazing tool!

 

I've managed to get horizontal scroll working in a variety of contexts, but still very much struggling with vertical momentum scroll for some reason. 

 

Here is a codesandbox that hews pretty close to Blake's codepen that was embedded on the first page of this thread (codesandbox because I'm working in React - hopefully it's a pared down enough example to be clear to read). 

 

 Ultimately my aim is to build a scrollTrigger + momentum version of this - I understand I'll have to remove the position stickies on each individual box and instead make use of pinning and pin spacing - I'll cross that bridge when it comes, though; till then, I'd just like to better understand how to get momentum scroll working like in Blakes codepen above, but in React, and roughly with the HTML in my codesandbox. I'd very much appreciate any help.

Edited April 3, 2021 by granularclouds
De-linked Blake's codepen because the link kept embedding instead of hyperlinking

[GreenSock]

I'm not a React guy so I can't really help there, but I wonder if this might help you: 

 

[DexteRs Code]

I tried to use this method on my project where I've a pinned element, using GSAP.

The thing is it worked on every animations , except the element I've pinned. It plays the animation but also scrolls down without getting pinned and creates the extra black spacing until the animation is over.

Any Suggestions !!

[GreenSock]

Welcome to the forums, @DexteRs Code. 

 

It's pretty tough to troubleshoot blind - can you please provide a minimal demo so we can see what's going on?