Support your letters animation

How it works

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

<script>
  const 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>
  // Read-only properties
  obj.targets; // [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>
  const 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>
  // Read-only properties
  obj.targets; // [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>

  const 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>
  // Read-only properties
  obj.targets; // [div#letterizeMe]
  obj.list; // [[i.letter,i.letter, ... ]]
  obj.listAll; // [i.letter,i.letter, ... ]
  obj.wrapper; // "i"
  obj.className; // "letter"

</script>