// Wrap every letter in a span
$('.ml16').each(function() {
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({
    loop: true
  })
  .add({
    targets: '.ml16 .letter',
    translateY: [100, 0],
    easing: "easeOutExpo",
    duration: 1400,
    delay: function(el, i) {
      return 30 * i;
    }
  }).add({
    targets: '.ml16',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

.wrap {
  width: 700px;
  margin: 100px auto;
}

.ml16 {
  color: #402d2d;
  padding: 40px 0;
  font-weight: 800;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  overflow: hidden;
  text-transform: uppercase;
  font-family: sans-serif;
}

.ml16 .letter {
  display: inline-block;
  line-height: 2em;
}

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

<div class="wrap">
  <h1 class="ml16"><span>Made with love for a testing purpose</span></h1>
</div>

// Wrap every word in a span
$('.ml16').each(function() {
  let text = $(this).text();
  let words = text.split(' ');
  
  // Clear current element
  this.innerHTML = '';
  
  // Loop through each word, wrap each letter in a span
  for(let word of words) {
    let word_split = word.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");
    
    // Wrap another span around each word, add word to header
    this.innerHTML += '<span class="word">' + word_split + '</span>';
  }
});

anime.timeline({
    loop: true
  })
  .add({
    targets: '.ml16 .letter',
    translateY: [100, 0],
    easing: "easeOutExpo",
    duration: 1400,
    delay: function(el, i) {
      return 30 * i;
    }
  }).add({
    targets: '.ml16',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

.wrap {
  width: 700px;
  margin: 100px auto;
}

.ml16 {
  color: #402d2d;
  padding: 40px 0;
  font-weight: 800;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  overflow: hidden;
  text-transform: uppercase;
  font-family: sans-serif;
}

.ml16 .word {
  display: inline-block;
  overflow: hidden;
  height: 2em;
  margin: 0 0.4em;
}

.ml16 .letter {
  display: inline-block;
  line-height: 2em;
}

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

<div class="wrap">
  <h1 class="ml16">Made with love for a testing purpose</h1>
</div>

/**
 * Create new class for sliding text
 *
 * @params {Element} wrapper - HTML element with text content
 */
class TextSliderUpper {
  constructor(wrapper) {
    this.wrapper = wrapper;

    // Set delay between characters (in ms)
    this.delay = 40;

    // Wrap content in relevant wrappers
    this._wrapContent();
  }

  _wrapContent() {
    let words = this.wrapper.textContent.split(' ');
    let delay = 0;
    let content = '';

    // Loop through each word, wrap each character in a span
    words.forEach((word, multiplier) => {
      let word_split = word.split(/([^\x00-\x80]|\w)/g);
      let word_content = '';

      // Look through each letter, add a delay (incremented)
      word_split.forEach((char, index) => {
        delay += this.delay;

        word_content += `<span style="animation-delay: ${delay}ms">${char}</span>`;
      });

      // Add spacing between words
      if (content !== '') content += ' ';

      // Add wrapped words to content
      content += `<span>${word_content}</span>`;
    })

    // Add content to wrapper
    this.wrapper.innerHTML = content;
  }

  init() {
    this.wrapper.classList.add('show');
  }
}

// Get a list of all headers
let headers = document.querySelectorAll('[data-animate]');

// Loop through, add relevant class
Array.from(headers).forEach(header => {
  let slideHeader = new TextSliderUpper(header);

  // Allow for delays? Sure!
  let delay = header.dataset.delay || 0;

  // Delay class (if necessary)
  setTimeout(() => {
    slideHeader.init();
  }, delay)
})

body {
  font-family: sans-serif;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.1em;
}

[data-animate] {
  line-height: 1.2em;
}
[data-animate] > span {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
}
[data-animate] > span > span {
  display: none;
  animation: 3s cubic-bezier(0, 1.2, 0.1, 0.9);
  animation-fill-mode: backwards;
}
[data-animate].show > span > span {
  display: inline-block;
}

[data-animate=slideup] > span > span {
  animation-name: slideUp;
}

[data-animate=zoomin] > span > span {
  animation-name: zoomIn;
}

[data-animate=slidedown] > span > span {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(0, 1.2em);
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(0, -1.2em);
  }
}

<h1 data-animate="slideup">This is some text. Hello there!</h1>

<hr />

<h1 data-animate="zoomin" data-delay="2000">I am delayed!</h1>

<hr />

<h1 data-animate="slidedown" data-delay="7000">I am late to the party!</h1>