Jump to content

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? 

Link to comment
Share on other sites

  • Solution


Hye @ladybytez


I guess you are referring to ScrollTrigger?


4 hours ago, ladybytez said:

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




4 hours ago, ladybytez said:

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?

  • Like 3
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.