Jump to content
Search Community

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

ladybytez test
Moderator Tag

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.
×
×
  • Create New...