snap()

Returns : *

Returns the closest number (or object of x and y coordinates) to the number that you give it. Or returns a function that returns those things.

Snap to a certain increment or to the closest value in an array. You can even limit snapping to when the provided value is within a certain radius/distance of one of those in the array. This even works with 2-dimensional points (objects with x and y properties) and it factors both dimensions into the radius measurement. Note that if you don’t provide a value to snap (the 2nd parameter), gsap.utils.snap() returns a function that you can feed any number and it’ll perform the snapping accordingly.

//declare a snapping increment of 10, and snap 23.5 accordingly
let num = gsap.utils.snap(10, 23.5); //20
//or snap to the closest value in an array:
let num = gsap.utils.snap([0, 10, 30], 23.5); //30
//or define a radius so that snapping only occurs when the provided value is within that radius of one of the values in the array:
let num = gsap.utils.snap({values:[0, 100, 300], radius:20}, 30.5); //30.5 (because it's not within the radius)
//also works with points (objects with "x" and "y" properties):
let point = {x:8, y:8};
let snappedPoint = gsap.utils.snap({values:[{x:0, y:0}, {x:10, y:10}, {x:20, y:20}], radius:5}, point); //{x:10, y:10}
//if we don't provide a value to snap, we'll get a function back that's ready to perform snapping accordingly:
let snapper = gsap.utils.snap([0, 100, 500]); // <- function!
//now whatever value we feed that resulting function (from the line above) will be snapped accordingly:
let num = snapper(80); // 100