Letterize.js

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 wojciechkrakowiak.github.io/letterize/ and checkout some animated examples.

Version 2.0 is out. Moved project to typescript, added types declaration file and added to npm repository. 😄

BREAKING CHANGES: majority of methods are now read-only properties

Installation

Install with npm or yarn

npm install letterizejs --save
yarn add letterizejs

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="https://cdn.jsdelivr.net/npm/letterizejs@2.0.1/lib/letterize.min.js"></script>

Usage

import Letterize from "letterizejs"
const example = new Letterize({targets: ".selector", options...});

Options

targets: (String) required

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

examples:

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"

example:

wrapper: "div",

className: (String)

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

example:

className: "letter",

Methods and properties

Letterize.targets [read-only] (Array, NodeList, HTMLCollection, HTMLElement, String) – returns an array of targets

Letterize.wrapper [read-only] (String) – returns a name of letters' wrapper node. (i.e. "span")

Letterize.className [read-only] String – returns a class name set on letters' wrappers

Letterize.list [read-only] 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 [read-only] 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.

TODOs

• Get feedback, improve, share 😉