<canvas width="600" height="300" id="view"></canvas>
<script src="https://unpkg.com/tween-animate@4.0.0/dist/tween-animate.umd.js"></script>

Animate.play();

const { Easing } = Animate;

const canvas = document.getElementById('view');
const ctx = canvas.getContext('2d');

const obj = {
  x: 100,
  y: 200,
  radius: 50,
  alpha: 1
};

Animate(obj).to({
    x: 500
  }, 1200, Easing.Cubic.InOut)
  .to({
    y: 120,
    radius: 20,
    alpha: 0
  }, 600, Easing.Quadratic.Out)
  // .transform('step', 10)
  .transform('wait', 100)
  .transform('yoyo')
  .transform('loop', Infinity)
  .on('update', () => renderObj());

function renderObj() {
  ctx.clearRect(0, 0, 600, 300);
  ctx.fillStyle = `rgba(235,105,103,${obj.alpha})`;
  ctx.beginPath();
  ctx.moveTo(obj.x, obj.y);
  ctx.arc(obj.x, obj.y, obj.radius, 0, 2 * Math.PI);
  ctx.fill();
}