SnapPlugin

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.