"snapping" functionality while using ScrollTrigger and smooth-scrollbar

[ftnko]

Hi, so i'm building this website with a section that emulates stacked cards. I have been able to successfully implement that using ScrollTigger. However, I would also like to add "snapping" functionally. That is, if a card is scrolled just a little above or below the top of the viewport, i would like it to snap to the top. 

 

For additional context, I am also using smooth-scrollbar, implemented as follows (I wasn't able to get this working in codepen, but think the config might be useful in helping debug):

// Setup scroll behavior for Smooth Scrollbar

const scroller = document.querySelector(".scroller");

const bodyScrollBar = Scrollbar.init(scroller, {

damping: 1,

delegateTo: document,

alwaysShowTracks: true,

});

 

// Adjust scroll-snap behavior for Smooth Scrollbar

bodyScrollBar.track.xAxis.element.remove(); // Remove horizontal scrollbar

bodyScrollBar.track.yAxis.element.remove(); // Remove vertical scrollbar

 

// proxy ScrollTrigger to handle Smooth Scrollbar

ScrollTrigger.scrollerProxy(".scroller", {

scrollTop(value) {

if (arguments.length) {

bodyScrollBar.scrollTop = value;

}

return bodyScrollBar.scrollTop;

},

});

 

bodyScrollBar.addListener(ScrollTrigger.update);

 

ScrollTrigger.defaults({ scroller: scroller });

 

// Ensure scroll snapping behavior for child elements

ScrollTrigger.addEventListener("refresh", () => bodyScrollBar.update());

ScrollTrigger.addEventListener("resize", () => bodyScrollBar.update());

 

 

I'd really appreciate any pointers in the right direction. i've been lurking in forum for a while and y'all rock. thanks

See the Pen zYMvxYb by z-0-the-builder (@z-0-the-builder) on CodePen

[Rodrigo]

Hi  @ftnko and welcome to the GreenSock forums!

 

Smooth Scrollbar is not a GSAP product so we can't really support it in these forums. We have to use the limited time resources we have focusing on GSAP related issues.

 

On top of that GSAP has it's own Smooth Scroll solution called ScrollSmoother, which is 100% compatible with ScrollTrigger:

https://greensock.com/scrollsmoother/

 

On top of that I don't see any snapping on neither the code you posted nor the codepen example, so no snapping is going to happen. I'm not 100% sure what you're trying to do, but I took a guess and came up with this:

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

 

Hopefully this helps.

Happy Tweening!

[ftnko]

Thanks @Rodrigo! 

[ftnko]

Hi @Rodrigo thanks again for your help. I have managed to get the desired behaviour for the section containers (with the class ".sx" in the updated codepen). The changes allow the section containers to emulate the 'scroll-snap-align' behaviour of standard css.  However, as you can experience in the demo, this appears to be overriding the desired behaviour of the individual cards. I believe this might be because ScrollTrigger.create({..}) is being applied globally to all elements. Is there a way I can keep this 'scroll-snap-align' behaviour on the section containers, but have the custom behaviour you implemented above working on the cards alone? I hope this makes sense. I really appreciate your help. thanks again.

 

See the Pen KKrdxXB by z-0-the-builder (@z-0-the-builder) on CodePen

 

ultimately, i am trying to achieve the card functionality used on this website https://www.urbanvillageproject.com/

 

[Rodrigo]

Hi,

 

So basically you want to snap the sections but also snap the cards within each the sections? That is something that the link you provided is not actually doing by the way. That site is just pinning each section while snapping the cards.

 

The main problem I see here, unless my approach to solving this is wrong, is that snapping depends on the scroll position. So each section's ScrollTrigger should start when the top of the section hits the top of the viewport, but you want to snap the next section in as soon as you scroll a bit past the previous section which will still be visible. To illustrate that I made this simple example that creates ScrollTriggers instances just for each section:

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

 

You can see that there is no snapping between sections, just within each section so to speak. To add issues, check what happens as soon as you pin the second section. It goes right to the end of that section which will prompt to move all the cards up, because the animations for the cards moving up also depends on the scroll position. See how this starts to get complicated?

 

One option I can think of is to use the ScrollTo Plugin to move to the start of the next section using the onLeave and onLeaveBack callbacks to move to those specific points. Something like this:

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

 

Hopefully this helps.

Happy Tweening!