<div id="timelineParameters">
  <div class="line">
    <div class="square el"></div>
  </div>
  <div class="line">
    <div class="circle el"></div>
  </div>
  <div class="line">
    <div class="triangle el"></div>
  </div>
</div>
.line {
  position: relative;
}

.square {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #0f97ea;
}

.circle {
  position: absolute;
  top: 60px;
  left: 0;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #0f97ea;
}

.triangle {
  position: absolute;
  top: 120px;
  left: 0;
  border-right: 25px solid transparent;
  border-bottom: 43.3012px solid #0f97ea;
  border-left: 25px solid transparent; 
}
        
          var timelineParameters = anime.timeline({
  direction: 'alternate',
  loop: true
});

timelineParameters
  .add({
    targets: '#timelineParameters .square.el',
    translateX: [ { value: 80 }, { value: 220 }, { value: 300 } ],
    translateY: [ { value: 60 }, { value: 120 }, { value: 120 } ],
    duration: 3000
  })
  .add({
    targets: '#timelineParameters .circle.el',
    translateX: [ { value: 80 }, { value: 220 }, { value: 300 } ],
    translateY: [ { value: 60 }, { value: -60 }, { value: -60 } ],
    duration: 3000,
    offset: 200
  })
  .add({
    targets: '#timelineParameters .triangle.el',
    translateX: [ { value: 80 }, { value: 300 } ],
    translateY: [ { value: -120 }, { value: -60 }, { value: -60 } ],
    duration: 3000,
    offset: 400
  });
        
      

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js