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. https://codepen.io/z-0-the-builder/pen/KKrdxXB ultimately, i am trying to achieve the card functionality used on this website https://www.urbanvillageproject.com/

Thanks @Rodrigo!

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