<link href='//fonts.googleapis.com/css?family=Signika+Negative:300,400' rel='stylesheet' type='text/css'>

<div class="wrapper">
  <h3>tweened x value: <span id="tweenedX"</span></h3>
  <h3>modified x value: <span id="modifiedX"</span></h3>
  <div class="box green"></div>
</div>
<div class="brandBar">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GreenSock-logo-text-outlines.svg"></div>
/* Global styles come from external css https://codepen.io/GreenSock/pen/JGaKdQ*/

.wrapper {
  margin-top:16px;
}

h3 {
  color:#aaa;
}

h3 span {
  color:#fff;
}

.box {
  display:block;
  position:relative;
}
var tweenedX = document.getElementById("tweenedX"),
    modifiedX = document.getElementById("modifiedX")

gsap.to(".box", {
  duration: 5, 
  x: 500,
  modifiers: {
    x: function(x) {
      x = parseInt(x);
      tweenedX.textContent = x.toFixed(2);
      var newX = x % 100; 
      modifiedX.textContent = newX.toFixed(2) // value between 0 and 100
      return newX + 'px';
    }
  }, ease: "none"
})

External CSS

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

External JavaScript

  1. https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js