.container {
  position: relative;
}

.target {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px #eee solid;
  background: orange;
  border-radius: 50%;
}

#start {
  position: absolute;
  top: 70px;
}

const { interval, animationFrameScheduler, fromEvent, defer, merge } = rxjs;
const { map, takeWhile, tap, flatMap } = rxjs.operators;

const targetDiv = document.querySelector(".target");
const startBtn = document.querySelector("#start");

const startClick$ = fromEvent(startBtn, "click");

const easeInQuad = t => t * t;

const easeInQuint = t => t * t * t * t * t * t;

function duration(ms) {
  return defer(() => {
    const start = Date.now();
    return interval(0, animationFrameScheduler).pipe(
      map(() => (Date.now() - start) / ms),
      takeWhile(n => n <= 1)
    );
  });
}

const distance = d => t => d * t;

const moveDown$ = duration(900).pipe(
  map(easeInQuint),
  map(distance(700)),
  tap(y => (targetDiv.style.top = y + "px"))
);

const moveRight$ = duration(1500).pipe(
  map(easeInQuad),
  map(distance(1000)),
  tap(x => (targetDiv.style.left = x + "px"))
);

startClick$.pipe(flatMap(() => merge(moveRight$, moveDown$))).subscribe();