Animate Letters In Text Using CSS – animate_letters.js

Preview:

Description:

animate_letters.js is a lightweight and configurable text animation library for animating individual letters within a text block.

It helps you create natural, high-performance text animations by adding and removing CSS classes to individual letters wrapper in a <span> tag over time.

Great for attention-grabbing headlines, dynamic presentations, interactive storytelling, promotional content, and much more.

How to use it:

1. Download and import the animate_letters.js into the HTML document.

<script src="/path/to/animate_letters.min.js" defer></script>

2. Initialize the animate_letters.

<p class="text_to_animate">
  Hello World !
</p>

var letters = animate_letters('.text_to_animate', {
    // hide element before run animation
    hide_element_before : false,
    // add class(es) list 'class_1 class_2' or ''
    prepare : 'letters_in_top',
    // classes to add by phases
    // set : []  |  ['class_a']  |  ['class_a','class_b']
    add : [
      // phase 1
      [],
      // phase 2
      ['rotate_letters'],
      // phase 3
      ['space_letters','color_letters'],
      // phase 4
      []
    ],
    // classes to remove by phases arrays of classes
    // set : []  |  ['class_a']  |  ['class_a','class_b']
    remove : [
      // phase 1
      ['letters_in_top'],
      // phase 2
      [],
      // phase 3
      [],
      // phase 4
      ['space_letters','color_letters']
    ],
    // timers by phases -> array of objects
    // set : {  delay : [integer in milliseconds],
    //          increment_delay : [integer in milliseconds]  }
    timers : [
      { delay : 0, increment_delay : 60 },  // phase 1
      { delay : 100, increment_delay : 40 },  // phase 2
      { delay : 80, increment_delay : 30 },  // phase 3
      { delay : 0, increment_delay : 20 }   // phase 4
    ],
    // remove spans who wrapped letters at the end of last phase
    // set : true / false
    clean_after : true,
    // function to launch at the end of the last phase
    // set : your_function() or null
    end_callBack : function(){
      // sibling text container
      var container_text = document.querySelector('.text_to_animate');
      // add a class
      container_text.classList.add('callback_anim');
      // remove after n seconds
      var Timer = setTimeout(()=>{
          container_text.classList.remove('callback_anim');
          clearTimeout( Timer );
      }, 800 );
    }
});

3. Apply your own CSS animations to the letters.

.text_to_animate {
  margin: 0;
  padding: 0;
  font-size: 3.5em;
  line-height: 1.5em;
  letter-spacing: 4px;
  text-align: center;
  color: #9fc95f;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.text_to_animate span {
  display: inline-block;
  z-index: 100;
  position: relative;
  top: 0;
  opacity: 1;
  letter-spacing: 4px;
  transform: rotateY(0deg);
  transition: top 1s cubic-bezier(0.64, -0.16, 0.15, 1.64), opacity 1s linear, letter-spacing 0.6s linear, transform 1s ease;
}
.text_to_animate span.letters_in_top {
  top: -100vh;
  opacity: 0;
}
.text_to_animate span.rotate_letters {
  transform: rotateY(1080deg);
  transition: transform 2s ease-in-out, letter-spacing 1s linear;
}
.text_to_animate span.space_letters {
  letter-spacing: 12px;
  transition: letter-spacing 1s linear, transform 2s ease-in-out;
}
.text_to_animate span.color_letters {
    color: #bdd656;
    text-shadow: 0 0 30px #cbe852;
}
.callback_anim {
  transform: rotateZ(-10deg) scale(1.2);
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

4. Run the text animation.

letters.run();

Changelog:

11/11/2023

• v2.0.0