🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

Animated Headline

A collection of word transition effects.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

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">
  <!-- ... -->

Project duplicated

Project created

Globals imported

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