GSAP ScrollTrigger snapTo

[Ted Moso]

Hi,

 

I'm loving GSAP so far, but I'm fairly new. Can someone explain to me how snapTo works? And how would I use it to only snap to a section when most of the section is shown versus prior, or the nearest section. I'm assuming that it takes more than just manipulating the value of snapTo.

 

I'm following this example (below):


This part of the example, confuses me a bit:
snapTo: 1 / (sections.length - 1),

See the Pen 5bbc8a970b867ded2a331a6ecf088821 by akapowl (@akapowl) on CodePen

[Cassie]

Hey there Ted! Welcome to the GSAP forums.

Just so we're starting off on the same page - have you read the documentation on it from the ScrollTrigger docs?

If not - here it is.

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). additional values (not related to your question)   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.

If you have or if you're still a bit baffled I'm happy to elaborate or demonstrate any part of this you're still confused about! Just let me know what you need more info on.
 

[Ted Moso]

Thank you for the reply Cassie!

 

If I was to change the codepen example above to snap to the closest section, would snapTo play a huge roll on that? I'm just stuck on how to go about it at the moment. What would you advise? Is there a good example that I could base it off?

[GreenSock]

On 7/25/2022 at 11:43 AM, Ted Moso said:

how would I use it to only snap to a section when most of the section is shown versus prior, or the nearest section

By default, it is "directional", meaning that if the user scrolls down even a little bit, it'll go to the next snapping point in that direction. If they scroll up, it'll always go up to the next one. But you can easily disable that so that it just goes to whatever the closest one is regardless of direction: 

snap: {
  snapTo: 1 / (sections.length - 1),
  directional: false
}

Is that what you're looking for? 

[Ted Moso]

Hey GreenSock,

 

Thank you so much! That is exactly what I'm looking for.

[prav420]

@GreenSock @Cassie  - I tried the same logic for tablet but it's not working properly not sure why. can you please guide me on this ?

This worked for desktop though.

[GreenSock]

3 hours ago, prav420 said:

 - I tried the same logic for tablet but it's not working properly not sure why. can you please guide me on this ?

Can you please be more specific? What exactly are you struggling with? What doesn't work for you? How can we replicate? Seems to work fine on my tablet. 

[prav420]

const sections = gsap.utils.toArray('section')

ScrollTrigger.create({
  
  trigger: '.first',
  start: 'top top',
  endTrigger: '.last',
  end: 'bottom bottom',
  
  //snap: 1 / (sections.length - 1)
  
  snap: {
    snapTo: 1 / (sections.length - 1),
    duration: {min: 0.25, max: 0.75}, // the snap animation should be at least 0.25 seconds, but no more than 0.75 seconds (determined by velocity)
    delay: 0.125, // wait 0.125 seconds from the last scroll event before doing the snapping
    ease: "power1.inOut" // the ease of the snap animation ("power3" by default)



this code specifically I tried it in my tablet version of code using react, but the same worked fine for desktop.

[prav420]

@GreenSock the portion of code I tried for javascript is pasted above , I made same kind of html structure for tablet also, but doesn't work in tablet. and I'm using it in react application.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.