Draggable modifiers and snap (solved)

[benoit]

I can't fork this pen from @OSUblake  but I found how to snap the draggable, so here is my trick :

 

var $overflow = $("#overflow");
var colors = ["#f38630","#6fb936", "#ccc", "#6fb936"];


var progress = 0;
var size = 500;

//initially colorize each box and position in a row
TweenMax.set(".box", {
  backgroundColor:function(i) {
    return colors[i % colors.length];
  },
  x: function(i) {
    return i * 50;
  }
});

var animation = TweenMax.to(".box", size, {  // size = time
  ease: Linear.easeNone,
  paused: true,
  x: "+=500", //move each box 500px to right
  modifiers: {
    x: function(x) {
      return x % 500; //force x value to be between 0 and 500 using modulus
    }
  },
  repeat: -1
});

Draggable.create('#proxy', {
  type: "x",
  trigger: document.documentElement,
  throwProps: true,
  onDrag: updateProgress,
  onThrowUpdate: updateProgress,
  onThrowComplete:updateProgress,
  snap: {x: function(value) {
    return Math.round(value / 50) * 50;
   }}
});



function updateProgress() {  
  animation.seek(this.x);
}

 

See the Pen c8723bcdba9df92bc11fcfe062e01de8 by osublake (@osublake) on CodePen