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.
<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:
Splitting()is called on a
target(see: Basic Usage)
<span>s to inject into
target, or query children of
- Index with CSS variables (
<span class="word" style="--word-index: 0">)
- Add the total to the target (
<div data-splitting style="--word-total: 3">)
- Return an array of the splits (see: Returns)
<div data-splitting>ABC</div> <script> Splitting(); </script>
<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 (
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