Animated Headline in CSS and JavaScript

How to

The Animated Headline component is a collection of word replacement effects for titles.

The animated words can either be in the middle of a sentence, or at the end; they can have a different amount of letters.

You can pick one of the following effects:

You can control the animation timing using the following CSS custom properties:

.js .text-anim--slide {
  --text-anim-duration: 0.5s;
  --text-anim-pause: 2.5s;
}

Set data-loop="off" if you want to iterate through the words only once:

<h1 class="text-anim text-anim--loader js-text-anim" data-loop="off">
  <!-- ... -->
</h1>

If your headline content is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the TextAnim object:

var headline = document.getElementsByClassName('text-anim')[0]; // 👈 your headline element
new TextAnim(headline);