Description
The SnapPlugin allows tweens to “snap” to the closest value in a given array or increment. It basically adds a modifier to any property that implements one of the following snapping behaviors to every value DURING the tween (live, not just to the end value).
For example:
//snap to an increment:
gsap.to(".class", {
x: 1000,
snap: {
x: 20 //x snaps to the closest increment of 20 (0, 20, 40, 60, etc.)
}
});
//snap to the closest value in an array:
gsap.to(".class", {
x: 1000,
snap: {
x: [0, 50, 150, 500] //x snaps to the closest value in this array
}
});
//snap to a value in an array, but only when it's within a certain distance/radius of one of those values:
gsap.to(".class", {
x: 1000,
snap: {
x: {values: [0, 50, 150, 500], radius: 20} //x snaps to the closest value in the array but only when it's within 20 pixels of it.
}
});
You can define as many snap properties as you want.