JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.greensock.com/js/src/TweenMax.min.js"></script>
<div class="box red"></div>
CSS
.box{
position:absolute;
width:16px;
height:16px;
}
.red{
background-color:red;
}
JavaScript
//tween left in 16px increments
//snapTo function derived from: http://www.flashandmath.com/basic/dragdroptour/dd_tour4.html
//thanks Carl Schooff for the technique
var redValue = {left:0,
elem:$(".box")
}
;
TweenLite.to(redValue, 6, { left:500, onUpdate:snapTo, onUpdateParams:["{self}", 16], ease:Strong.easeOut});
function snapTo(tween, spacing) {
snappedValue = Math.round(tween.target.left/spacing) * spacing;
tween.target.elem.css('left', snappedValue);
console.log(snappedValue);
}