<div id="anime-demo">
    <div><span>Quad:</span> <div class="square"></div></div>
    <div><span>Cubic:</span> <div class="square"></div></div>
    <div><span>Quart:</span> <div class="square"></div></div>
    <div><span>Quint:</span> <div class="square"></div></div>
    <div><span>Sine:</span> <div class="square"></div></div>
    <div><span>Expo:</span> <div class="square"></div></div>
    <div><span>Circ:</span> <div class="square"></div></div>
    <div><span>Back:</span> <div class="square"></div></div>
    <div><span>Elastic:</span> <div class="square"></div></div>
</div>
<div class="controls">
<button class="play-easein">EaseIn Animations</button>
<button class="play-easeout">EaseOut Animations</button>
<button class="play-easeinout">EaseInOut Animations</button>
</div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

#anime-demo span {
  width: 60px;
  display: inline-block;
}

#anime-demo .square {
  vertical-align: middle;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}

.square {
  pointer-events: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: black;
  margin: 4px;
  display: inline-block;
}

.controls {
  margin-top: 20px;
  text-align: center;
}
var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeOutValues = ['easeOutQuad', 'easeOutCubic', 'easeOutQuart', 'easeOutQuint', 'easeOutSine', 'easeOutExpo', 'easeOutCirc', 'easeOutBack', 'easeOutElastic'];

var easeInOutValues = ['easeInOutQuad', 'easeInOutCubic', 'easeInOutQuart', 'easeInOutQuint', 'easeInOutSine', 'easeInOutExpo', 'easeInOutCirc', 'easeInOutBack', 'easeInOutElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateX: '75vw',
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

var easeOutSequence = anime({
  targets: '.square',
  translateX: '75vw',
  duration: 2000,
  easing: function(target, index) {
    return easeOutValues[index];
  },
  autoplay: false
});

var easeInOutSequence = anime({
  targets: '.square',
  translateX: '60vw',
  duration: 2000,
  easing: function(target, index) {
    return easeInOutValues[index];
  },
  autoplay: false
});

document.querySelector('.play-easein').onclick = easeInSequence.restart;
document.querySelector('.play-easeout').onclick = easeOutSequence.restart;
document.querySelector('.play-easeinout').onclick = easeInOutSequence.restart;

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

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