How To Create Text Reveal Animation With Anime Js?

I know its simple to create text reveal animation with CSS alone, but I need to use animejs to create this animation. I need to create something like this: text reveal animation de

Solution 1:

You need to add some extra css to text-box and change display property of <span/> element(inline by default) in order it to recognize translateY changes:

 anime.timeline({loop: true})
    .add({
      targets: '.text-box .my-text',
      translateY: [100, 0],
      easing: 'easeOutExpo',
      duration: 1400,
    })
    .add({
      targets: '.text-box',
      opacity: 0,
      duration: 1000,
      easing: 'easeOutExpo',
      delay: 1000
    });

.text-box {
  text-align: center;
  overflow: hidden;
  font-size: 4em;
}

.my-text {
  display: inline-block;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script><divclass="text-box"><spanclass="my-text">2020 is a horror movie</span></div>