Go to homepage

Projects /

Animated Headline

A collection of word transition effects.

View Demo

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>

Dynamic Content #

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);

Categories

Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.