Cacher is the code snippet organizer for pro developers

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

#boxes {
  width: 80%;
  margin: auto;
  text-align: center;
}

#btns {
  padding: 20px;
  margin-bottom: 20px;
}

#btns button {
  background: #fff;
  padding: 5px 10px;
  border: 0;
}

#btns .fa {
  font-size: 60px;
}

#btns .fa-play-circle {
  color: green;
}

#btns .fa-pause-circle {
  color: red;
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 4px;
  display: inline-block;
}

.red{
  background-color: red;
}
.blue{
  background-color: blue;
}
.green{
  background-color: green;
}
.yellow{
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js"></script>

// 

var playPause = anime({
  targets: 'div.box',
  translateY: [
    {value: 200, duration: 500},
    {value: 0, duration: 800}
  ],
  rotate: {
  value: '1turn',
  easing: 'easeInOutSine',
},
  delay: function(el, i, l){ return i * 1000},
  autoplay: false,
  loop: true
});
 
('play');
var pauseButton = document.getElementByClassName('pause');

document.querySelector('#boxes .play').onclick = playPause.play;
document.querySelector('#boxes .pause').onclick = playPause.pause; 

<div id="boxes">
  <div id="btns">
    <button class="play"><i class="fa fa-play-circle"></i></button>
    <button class="pause"><i class="fa fa-pause-circle"></i></button>

  </div>
  <div class="box red"></div>
  <div class="box blue"></div>
  <div class="box green"></div>
  <div class="box yellow"></div>  
</div>