Search In
• More options...
Find results that contain...
Find results in...

# Can someone explain to me how snapping to a "1/5" integer works?

Go to solution Solved by akapowl,

## Recommended Posts

I've read the documentation and understand how to integrate snapping to my code but I am not quite 100% sure how to use it with integers and division operator.

if snap = 1/[array.length]-1

if array.length is say 5

so snap = 1/5 ...

will this not return a decimal point?

##### Share on other sites

• Solution

I guess you are referring to ScrollTrigger?

will this not return a decimal point?

Yes, it will return a number with a decimal point - and as you can see in the explanation below (which is from the ScrollTrigger docs), when you feed the snap a number between 0 and 1, it will snap to increments of that amount along the total progress (which is returned between 0 and 1) of the scroll-duration of that ScrollTrigger.

• 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)`.

Since it will automatically snap to 0, too, you will have to shorten the length of the array by 1 though, since that 0 is not an increment of the value you will be feeding it - well, at least that is how I try to understand it.

Let's say you have 4 (equal height) sections and want to snap to each section - so you'll want 4 snapping points, right?

But would you say snap: 1/4, it would then snap to 0.0 / 0.25 / 0.5 / 0.75 and 1.0 - which would be a total of 5 snapping points along the total scroll-duration. So you substract 1 from the array's length to get the correct amount of snapping points which would then snap to 0.0 / 0.333... / 0.666... and 1.0.

See the Pen 1ca4316a9b7129557bfd2836b07f075d by akapowl (@akapowl) on CodePen

if snap = 1/[array.length]-1

I'd suggest taking a look at the math/syntax again, because your example will not give you the correct values.

You probably meant `1 / (array.length - 1)`

Also, your array would have to have 6 elements for it to be 1/5 then.

Does that clear things up a bit?

• 3
##### Share on other sites

Yes it does! thank you

• 1