Ann June Posted February 11, 2022 Share Posted February 11, 2022 Hello, i tried out this scrollTrigger example, I wanted to implement Scroll Snapping into this. Can I get some help into this! thanks! Codesandbox link:https://codesandbox.io/s/jovial-wave-5o2pu?file=/src/index.js Link to comment Share on other sites More sharing options...
Cassie Posted February 11, 2022 Share Posted February 11, 2022 Hey there Ann! Welcome to the forums. Do you have a particular question about snapping? From the docs - Quote snap Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following: Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1). Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false). Function - snap: (value) => Math.round(value / 0.2) * 0.2 feeds the natural destination value (based on velocity) into the function and uses whatever is returned as the final progress value (in this case increments of 0.2), so you can run whatever logic you want. These values should always be between 0 and 1 indicating the progress of the animation, so 0.5 would be in the middle. "labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course) "labelsDirectional" - snap: "labelsDirectional" snaps to the closest label in the timeline that's in the direction of the most recent scroll. So if you scroll a little bit toward the next label (and stop), even if the current scroll position is technically closest to the current/last label, it'll snap to the next one in that direction instead. This can make it feel more intuitive for users. Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required): snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above) delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number) directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false. duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point. ease [String | Function] - the ease that the snapping animation should use. The default is "power3". inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false onStart [Function] - a function that should be called when snapping starts onInterrupt [Function] - a function that should be called when snapping gets interrupted (like if the user starts scrolling mid-snap) onComplete [Function] - a function that should be called when snapping completes scrollTrigger: { trigger: ".container", snap: 0.5 // snap halfway through the timeline } 1 Link to comment Share on other sites More sharing options...
Ann June Posted February 14, 2022 Author Share Posted February 14, 2022 @Cassie thanks for your reply. I tried the above mentioned approach, but there is a slight jerk in the scroll, it isn't smooth. Can you help me out with that? Sharing the link https://codesandbox.io/s/jovial-wave-5o2pu?file=/src/App.js Link to comment Share on other sites More sharing options...
GreenSock Posted February 14, 2022 Share Posted February 14, 2022 I noticed quite a few problems with that demo and frankly I don't really understand what you're trying to do so I can't really offer you a full solution... You set pin: true and pinSpacing: false, thus when one panel pins, the other continues to move BEHIND it. So when the pinned one becomes unpinned, the other one is already at the top. It also means that your final one gets lost because when you've scrolled all the way, down, your 2nd-to-last panel is still pinned and sitting on top of the last panel (and there's no more room to scroll). This is a logic issue in the way you've set things up. You've got 3 panels and you created a whole new timeline for each one with a snap of 0.5, so it'll try to snap to the start, halfway through, and the end (increments of 0.5) of EACH ONE. You're animating the "y" value of the trigger element which is also the pinned element - definitely don't do that. Pinning requires setting the y value, but you set up a tween that's messing with that. It's always better to create a container element that you pin and then you can animate a child element inside that container as much as you want. You're animating the zIndex in a way that's causing the elements to switch mid-animation and it looks a bit odd. I wish I understood your goal here with the effect so I could show you something "working". I'd strongly recommend looking at the demos page at https://greensock.com/st-demos and maybe you'll find something there that gives you a hint about how to set things up. Good luck! Link to comment Share on other sites More sharing options...
alisafa Posted February 10, 2023 Share Posted February 10, 2023 Hi I want to have snap behavior too. I add snap attribute to gsap but I didnt work. here is my project on code pen See the Pen ExprJMX by alisafaeyan (@alisafaeyan) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted February 10, 2023 Share Posted February 10, 2023 Hi there, this looks like an issue between locomotive scroll and GSAP We have our own smooth scroll plugin ScrollSmoother - which we recommend, it avoids compatibility mismatches like this. Your code is working a ok if we remove locomotive. See the Pen ExpqjNj?editors=0010 by GreenSock (@GreenSock) on CodePen Maybe you could reach out to the folks that at locomotive for help?https://github.com/locomotivemtl/locomotive-scroll 1 Link to comment Share on other sites More sharing options...
akapowl Posted February 10, 2023 Share Posted February 10, 2023 If I recall correctly, ScrollTrigger's snapping never worked with locomotive-scroll due to locomotive-scroll's method to 'set' its scroll-position - and that doesn't seem to have changed even with the latest version(s) of locomotive-scroll, although they changed that method a bit. Just another good reason for ScrollSmoother. [It works fine in the preview, since locomotive-scroll reverts back to native browser-scrolling at certain window widths, but once the smooth-scrolling is active (on wider windows), it won't work anymore] See the Pen mdjNeqo by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now