<div id="elems">
  <div data-x="160" class="box elem"></div>
  <div data-x="80" class="box elem"></div>
  <div data-x="250" class="box elem"></div>
</div>
.box{
  background-color: #ea0f9b;
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
}
var functionBasedPropVal = anime({
  targets: '#elems .elem',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  duration: function() { return anime.random(1200, 1800); },
  duration: function() { return anime.random(800, 1600); },
  delay: function() { return anime.random(0, 1000); },
  direction: 'alternate',
  loop: true
});

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