Jump to content
Search Community

Scroll Snapping

Ann June test
Moderator Tag

Recommended Posts

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
}

 

  • Like 1
Link to comment
Share on other sites

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...

  1. 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. 
  2. 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
  3. 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. 
  4. 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

  • 11 months later...

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...