Wrap Each Character From Your Text In An HTML Element – Letterize.js

Letterize.js is a JavaScript library to wrap each letter from your text in a given HTML element (defaults to span) for further use (e.g. character by character animations).

How to use it:

1. Download and load the minified version of the Letterize.js library in the document.

<script src="/path/to/lib/letterize.min.js"></script>

2. Create a new Letterize instance and determine the target element containing the text you’d like to ‘Letterize’.

<div class="demo">CSSScript.Com</div>

var example = new Letterize({
    targets: ".demo"
});

3. Override the default HTML element in which you want to wrap the letters. Default: <span>.

var example = new Letterize({
    wrapper: "div"
});

4. Specify the CSS class applied to the letters. Default: .letter.

var example = new Letterize({
    className: "letter"
});

5. Get an array of arrays containing all wrapper elements with letters.

example.list();

6. Or without any division.

example.listAll();

7. More API methods.

// returns an array of targets
example.getTargets();
// returns the wrapper node
example.getWrapper();
// returns the classname
example.getClassName();
// destroy the instance
example.deletterize();

More Examples:

See the Pen
Letterize.js + Anime.js example #2 by Wojciech Krakowiak (@WojciechWKROPCE)
on CodePen.

See the Pen
Letterize.js + Anime.js example #3 by Wojciech Krakowiak (@WojciechWKROPCE)
on CodePen.

Changelog:

v2.0.1 (04/20/2022)

• Update

v2 (01/12/2021)

• Introduced Typescript with types declarations. Replaced majority of methods with read-only parameters