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.

<script src="https://www.unpkg.com/spltjs@1.1.0"></script>

Demo splt on Codepen

A pre-fabricated sandbox for functionality testing.

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)'
});

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)'
});

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)'
});

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();
  },
});

Index

A dictionary of sorts.

Options

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.