Anime JS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<div class='el1'>ELEMENT 1</div>
<div class='el2'>ELEMENT 2</div>
<div class='el3'>ELEMENT 3</div>

CSS

body {
  background: black;
  padding: 0;
  margin: 0;
}

.el1 {
  position: absolute;
  background: red;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el2 {
  position: absolute;
  background: green;
  top: 70%;
  left: 15%;
  transform: translate(-50%, -50%);
}

.el3 {
  position: absolute;
  background: blue;
  top: 70%;
  left: 85%;
  transform: translate(-50%, -50%);
  }

JavaScript

const el1 = document.querySelector('.el1').getBoundingClientRect()
const el2 = document.querySelector('.el2').getBoundingClientRect()
const el3 = document.querySelector('.el3').getBoundingClientRect()

anime({
		  targets: '.el1',
      top: el2.top,
      left: el1.left - el2.left,
      delay: () => 1000,
      loop: false,
      easing: 'linear',
});