splt.js • A lightweight text splitter

Features

Guides

Support

View source

Created by Logan Liffick

Like new features? Support splt's creator.

A text splitter that just f*cking works

npm i spltjs

Straightforward

One import, no additional stylesheets required.

Versatile

Works with plain CSS and Javascript libraries.

Miniscule

564B. Pretty much all there is to say about that.

Features

Explore the easiest text-splitting library around.

Split text

Zero learning curve. Up and running with one function.

Reveal text

Easily perform advanced text splitting techniques.

Target text

Pinpoint specific characters to create unique animations.

Revert text

Recompose text to its original state.

Our eyes to the sky with feet tethered vision clear

Guides

Everything you need to get started using splt.

Installation

Various methods for getting up-and-running.

Using NPM

For production-quality projects.

npm i spltjs

Using a CDN

For testing and small experiments.

&ltscript src="https://www.unpkg.com/spltjs@1.1.0"&gt&lt/script&gt

Demo splt on Codepen

A pre-fabricated sandbox for functionality testing.

Codepen template

Usage

To help with visualization, animations have been created with anime.js.

Text splitting

Text splitting will affect any HTML elements with the .splt class applied.

splt({});
          
anime({
  targets: '.char',
  translateY: [0, -20],
  direction: 'alternate',
  loop: 1,
  delay: anime.stagger(25),
  easing: 'cubicBezier(.71,-0.77,.43,1.67)'
});

we looked above

Run demo

Text revealing

Edit splt’s default options to enable text reveals. Simply target the .reveal class to animate.

splt({
  reveal: true
});

anime({
  targets: '.reveal',
  translateY: [0, 20],
  direction: 'alternate',
  loop: 1,
  delay: anime.stagger(25),
  easing: 'cubicBezier(.71,-0.77,.43,1.67)'
});

we saw stars

Run demo

Text targeting

By default, splt allows you to target specific characters. The parent child relationship begins with instances, drills down further to characters, and once further to reveals if applicable. 

splt({
  reveal: true
});

anime({
  targets: '#i1 #c1, #i1 #c2 #r',
  translateY: [0, -20],
  delay: anime.stagger(50),
  easing: 'cubicBezier(.71,-0.77,.43,1.67)'
});

we ventured

Run demo

Text reverting

Easily revert text back to its initial state.

anime({
  begin: splt({}),
  targets: '.char',
  opacity: [0,1],
  scale: [1, 1.5],
  delay: anime.stagger(50),
  easing: 'cubicBezier(.71,-0.77,.43,1.67)',
  complete: () => {
    splt.revert();
  },
});

and grew lost

Run demo

Index

A dictionary of sorts.

Options

Name
Type
Default value

reveal

boolean

false

target

string

'.splt'

Functions

splt.revert() Reverts text to its original state.

Universal selector

.splt The initial target selector.

General text selectors

.char The class applied to each individual character in a splt selection.

.reveal If the reveal option is true, this class is added to each character.

Targeted text selectors

#i1 The id applied to each instance of a splt selection, also known as the parent element. The numeric value increases per instance to keep each unique and individually animatable.

#c1 The id applied to each character of an instance, also known as the child element. The numeric value increases per character.

#r If the reveal option is true, this id is applied to each character, it is also known as the grandchild element.