Letterize.js

Prepare your text for animation with a single line of code.

How it works

<!-- Source -->
        
<div id="letterizeMe">Sample text</div>

<script>
var obj = new Letterize({targets: "#letterizeMe"});
</script>
<!-- Result -->
        
<div id="letterizeMe">
  <span>S</span>
  <span>a</span>
  <span>m</span>
  <span>p</span>
  <span>l</span>
  <span>e</span>
  <span>&nbsp;</span>
  <span>t</span>
  <span>e</span>
  <span>x</span>
  <span>t</span>
</div>


<script>
// Some methods obj.getTargets(); // [div#letterizeMe] obj.list(); // [[span,span,span, ... ]] obj.listAll(); // [span,span,span, ... ]
</script>

Multiple targets

<!-- Source -->
        
<h2>This one</h2>

<p>Not this one</p>

<h2>And this</h2>

<script>
var obj = new Letterize({targets: "h2"});
</script>
<!-- Result -->
        
<h2>
  <span>T</span><span>h</span><span>i</span><span>s</span><span>&nbsp;</span><span>o</span><span>n</span><span>e</span>
</h2>

<p>Not this one</p>

<h2>
  <span>A</span><span>n</span><span>d</span><span>&nbsp;</span><span>t</span><span>h</span><span>i</span><span>s</span>
</h2>


<script>
// Some methods obj.getTargets(); // [h2,h2] obj.list(); // [[span,span,...],[span,span,...]] // One array for each h2 obj.listAll(); // [span,span,span, ... ] // All spans from all h2
</script>

Custom wrappers with classes

<!-- Source -->
        
<div id="letterizeMe">Sample text</div>

<script>
var obj = new Letterize({ targets: document.getElementById("letterizeMe"), wrapper: "i", className: "letter" });
</script>
<!-- Result -->
        
<div id="letterizeMe">
  <i class="letter">S</i>
  <i class="letter">a</i>
  <i class="letter">m</i>
  <i class="letter">p</i>
  <i class="letter">l</i>
  <i class="letter">e</i>
  <i class="letter">&nbsp;</i>
  <i class="letter">t</i>
  <i class="letter">e</i>
  <i class="letter">x</i>
  <i class="letter">t</i>
</div>


<script>
// Some methods obj.getTargets(); // [div#letterizeMe] obj.list(); // [[i.letter,i.letter, ... ]] obj.listAll(); // [i.letter,i.letter, ... ] obj.getWrapper(); // "i" obj.getClassName(); // "letter"
</script>
See animation examples with anime.js!