JavaScript library to Split an element by Words & Characters : Splitting.js


Splitting.js

Splitting.js is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!

Some of the splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.

Basic Usage of Splitting.js

Splitting can be called without parameters, automatically splitting all elements with data-splitting attributes by the default of chars which wraps the element’s text in <span>s with relevant CSS vars.

Splitting is a JavaScript microlibrary with a collection of small built-in plugins designed to split (section off)

The Splitting library does not handle any animation, but it gives you the elements and tools needed to create animations & transitions with JavaScript animation libraries or only CSS!. Most plugins utilize a series of <span>s populated with CSS variables and data attributes that empower you to build all kinds of animations, transitions and interactions.

The general flow is:

  1. Splitting() is called on a target (see: Basic Usage)
  2. Create <span>s to inject into target, or query children of target
  3. Index with CSS variables ( <span class="word" style="--word-index: 0"> )
  4. Add the total to the target ( <div data-splitting style="--word-total: 3"> )
  5. Return an array of the splits (see: Returns)
  6. Animate those elements with CSS or JavaScript!

Initial DOM

<div data-splitting>ABC</div>
<script> Splitting(); </script>

DOM Output

<div data-splitting class="words chars splitting" style="--word-total:1; --char-total:3;"><span class="word" data-word="ABC" style="--word-index:0;"><span class="char" data-char="A" style="--char-index:0;">A</span><span class="char" data-char="B" style="--char-index:1;">B</span><span class="char" data-char="C" style="--char-index:2;">C</span></span></div>

The aftermath may seem verbose, but this won’t be visible to the end user. They’ll still just see “ABC”, but now you can style, animate and transition all of those characters individually!

Splitting will automatically add a splitting class to the targeted element after it’s been run. Each plugin will add their own classes to splits/parent as needed ( char for charsword for words, etc. )

Also Check Flashing Animations: Animations Latest 2019

This Flashing Library can be used for business or personal purposes, here you can check other animated plugins just click here

 


———————–

Leave a Reply

Your email address will not be published. Required fields are marked *