<div id="anime-demo">
  <p>tanCube: <code>Math.pow(Math.tan(t*Math.PI/4), 3)</code></p>
    <div class="square tan-cube"></div>
  <p>tanSqr: <code>Math.pow(Math.tan(t*Math.PI/4), 2)</code></p>
    <div class="square tan-sqr"></div>
  <p>tanSqrt: <code>Math.sqrt(Math.tan(t*Math.PI/4))</code></p>
    <div class="square tan-sqrt"></div>
</div>
<div class="controls">
<button class="play-tancube">tanCube Easing</button>
<button class="play-tansqr">tanSqr Easing</button>
<button class="play-tansqrt">tanSqrt Easing</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;
}
anime.easings['tanCube'] = function(t) {
  return Math.pow(Math.tan(t*Math.PI/4), 3);
}

anime.easings['tanSqr'] = function(t) {
  return Math.pow(Math.tan(t*Math.PI/4), 2);
}

anime.easings['tanSqrt'] = function(t) {
  return Math.sqrt(Math.tan(t*Math.PI/4));
}

var tanCubeSequence = anime({
  targets: '.tan-cube',
  translateX: '75vw',
  duration: 2000,
  easing: 'tanCube',
  autoplay: false
});

var tanSqrSequence = anime({
  targets: '.tan-sqr',
  translateX: '75vw',
  duration: 2000,
  easing: 'tanSqr',
  autoplay: false
});

var tanSqrtSequence = anime({
  targets: '.tan-sqrt',
  translateX: '75vw',
  duration: 2000,
  easing: 'tanSqrt',
  autoplay: false
});

document.querySelector('.play-tancube').onclick = tanCubeSequence.restart;
document.querySelector('.play-tansqr').onclick = tanSqrSequence.restart;
document.querySelector('.play-tansqrt').onclick = tanSqrtSequence.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