Dependency
This module uses the SplitType library.
Install SplitType
npm install split-type
Basic usage
Add the attribute
data-anim-splittype
to any text element you want to animate.
Basic example
<p data-anim-splittype>
Lorem ipsum dolor sit amet consectetur adipisicing elit
</p>
Generated structure
After initialization, the text is automatically wrapped into elements representing lines, words and characters.
Generated HTML structure
<div class="line">
<span class="word">
<span class="char">H</span>
<span class="char">e</span>
<span class="char">l</span>
<span class="char">l</span>
<span class="char">o</span>
</span>
</div>
Generated classes
- .line — container for a text line
- .word — container for a word
- .char — container for a character
Common use cases
- GSAP stagger animations
- Scroll triggered text reveals
- Character-based text effects
- Advanced typography animations
Animation tip
Combine SplitType with GSAP stagger animations
for powerful text reveal effects.
Download
Use SplitType to create modern text animations with minimal setup and full control over lines, words and characters.