<script src="https://unpkg.com/tween-animate@1.0.4/dist/tween.umd.js"></script>

const { Animate, update, Easing, Transform, List } = tween;

function createZone(x, y, color) {
  const el = document.createElement('div');
  el.style.cssText = `
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: ${color};
    left: ${x}px;
    top: ${y}px;
  `;
  document.body.appendChild(el);
  return el;
}
const greenBox = createZone(0, 0, '#008800');
const redBox = createZone(400, 100, 'red');

let time = performance.now();
function ticker(timestamp) {
  update(timestamp - time);
  time = timestamp;
  requestAnimationFrame(ticker);
}
requestAnimationFrame(ticker);

const move = Animate({
  from(v) {
    return (el) => {
      return {
        x: parseInt(el.style.left) || 0,
        y: parseInt(el.style.top) || 0,
      };
    };
  },
  to(v) {
    return {
      x: v.x,
      y: v.y,
    };
  },
  easing: Easing.Quadratic.In,
  time: 1000,
  update(el, v) {
    el.style.left = `${v.x}px`;
    el.style.top = `${v.y}px`;
  },
  assign: false,
});
const moveYoyo = move.extend(Transform.yoyo(), Transform.loop(Infinity));
moveYoyo
  .render({
    x: 300,
    y: 150,
  })
  .apply(greenBox, redBox);