CODEWITHSUNDEEP
javascripthtmlcssanime.js
The Dead Man
The Dead Man

Reputation: 5566

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 demo in css.

Here is what I have so far HTML

<div class="text-box">
            <span class="my-text">2020 is a horror movie</span>
              
 </div>

js

                    anime.timeline({loop: true})
                    .add({
                        
                        targets: ".text-box .my-text",
                        translateY: [-100,0],
                        easing: "easeOutExpo",
                        duration: 1400,
                        delay: (el, i) => 30 * i
                    }).add({
                        targets: ".content-box",
                        opacity: 1,
                        duration: 1000,
                        easing: "easeOutExpo",
                        delay: 1000
                    });

what do I need to do to get this working ?

Upvotes: 0

Views: 1867

Answers (1)

yurzui
yurzui

Reputation: 214175

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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
<div class="text-box">
  <span class="my-text">2020 is a horror movie</span>
</div>

Upvotes: 2

Related Questions