<h3>round to nearest 10</h3>
<h1></h1>
<h3>move in increments of 100px</h3>
<div class="box green"></div>
<h3>move in increments of 200px</h3>
<div class="box orange"></div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

body {
  margin:10px;
}
.box {
  display:block;
}
TweenLite.defaultEase = Linear.easeNone;

var header = document.querySelector("h1");

var obj = {
  value:0
}

//round to increments of 10
TweenLite.to(obj, 5, {value:600,
  roundProps:{
    value:10
  },
  onUpdate:function() {
    header.innerHTML = obj.value;
  }
})

//round to increments of 100
TweenLite.to(".green", 5, {x:600, 
  roundProps:{
    x:100
  }, onUpdate:function() {
    this.target[0].innerText = this.target[0]._gsTransform.x;
  }
});

//round to increments of 200
TweenLite.to(".orange", 5, { x:600, 
  roundProps:{
    x:200
  }, onUpdate:function() {
    this.target[0].innerText = this.target[0]._gsTransform.x;
  }
});

External CSS

  1. https://codepen.io/GreenSock/pen/JGaKdQ.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js