letterit

LetterIt

I created this as a simple and easy way to add staggering delays to CSS transition effects to sentences.

It takes a sentence such as "Hello World" and will wrap each character in a div

<div>H</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>

<!-- Etc -->

Usage

Install the script npm install letterit --save

Once installed use it like this

import LetterIt from 'letterit'
LetterIt.init();

You also need to add some data attributes to your HTML elements

<h1 class="letterIt" data-transition-delay="0.01" data-letterit="letter">
Quiet and secluded
</h1>

You can change the data-transition-delay attribute to any duration. Leaving this out will provide no delayed transition.

You then need to add your own CSS transitions in your style sheet.

eg

.letterIt .letter{
  transition:all 1s ease-in-out;
  opacity:0;
}
.letterIt.active .letter{
    opacity:1;
}

In the above example the text will not display until the letterIt class has had the active class applied to it. Once applied each character should show with a nice staggering delay.