["snapping" functionality while using ScrollTrigger and smooth-scrollbar]

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/

 

["snapping" functionality while using ScrollTrigger and smooth-scrollbar]

Thanks @Rodrigo! 

["snapping" functionality while using ScrollTrigger and smooth-scrollbar]

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