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

Projects

Progress value is 30%

Animated Headline

A collection of word transition effects.

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only 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">
  <!-- ... -->
</h1>

✅ Project duplicated

✅ Project created

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