<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 40">
  <rect class="purple" x="0" y="15" width="10" height="10" rx="2" fill="#8d3dae" />
</svg>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

svg {
  width: 90vw;
  border: solid 2px white;
}

var transformer = gsap.utils.pipe(
  // clamp between 2000 and 1500
  gsap.utils.clamp(200, 1500),
  // then map the screen size to a duration
  gsap.utils.mapRange(200, 1500, 0.5, 4)
);

let tween;

function tweenElement() {
  let progress = typeof tween === "undefined" ? 0 : tween.progress();

  tween = gsap
    .to(".purple", {
      keyframes: {
        x: [0, 100, 0],
        xPercent: [0, -100, 0],
        easeEach: "power1.inOut"
      },
      repeat: -1,
      duration: transformer(window.innerWidth)
    })
    .progress(progress);
}
tweenElement();

function callAfterResize(func, delay) {
  let dc = gsap.delayedCall(delay || 0.2, func).pause(),
    handler = () => dc.restart(true);
  window.addEventListener("resize", handler);
  return handler; // in case you want to window.removeEventListener() later
}

callAfterResize(tweenElement);