A javascript front-end library for wrapping single letters into HTML nodes (i.e. <span></span>). Made to make text animations easier and simplify letter by letter animation with libraries like Anime.js.

Visit and checkout some animated examples.


Download /lib/letterize.min.js file into your project and include it in your HTML document:

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

or use cdn version:

<script src=""></script>


var example = new Letterize({targets: ".selector", options...});


targets: (String) required

A javascript selector. All letters inside these elements will be wrappet in HTML nodes (by default in <span></span>)


targets: "#sampleId",
targets: ".sampleClass",
targets: "h2",
targets: document.querySelector("h2"),
targets: document.getElementById("#sampleId")

wrapper: (String) (default: “span”)

A html tag name that we want to wrap elements into. Default value is “span”


wrapper: "div",

className: (String)

A class name that has to be set on all letters wrapper element.


className: "letter",

Object methods

Letterize.getTargets() (Array, NodeList, HTMLCollection, HTMLElement, String) – returns an array of targets

Letterize.getWrapper() (String) – returns a name of letters’ wrapper node. (i.e. “span”)

Letterize.getClassName() String – returns a class name set on letters’ wrappers

Letterize.list() Array – returns an array of arrays. Each of inner arrays corresponds to each target element and contains all wrapper elements with letters. It can be used to animate letters in each target simultaneously.

Letterize.listAll() Array – returns an array of all wrapper elements with letters without any division. Usefor for animating all targets one after another, or for other operations made on all letters.

Letterize.deletterize() – Removes all wrapper elements created in initialization and sets all properties to undefined.