3
classes to learn - split, repeat and delay. Yep, that's a few.
2kb
of Vanilla Js.
5kb
of CSS. Fast as heck!
Animate word by word...
...or letter by letter.
Use a CDN
recommanded
Easiest way to dive in. Copy and paste two lines of code into your file, add your first class to your text and see the magic happen.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gc-guillaume/textanim/animations.min.css">
<script src="https://cdn.jsdelivr.net/gh/gc-guillaume/textanim/animations.min.js"></script>
Download a zip
Get the source code and play with the demo file included. Create your own css animations or modify the functions at your convenience.
Download on githubConfiguration
Once textAnim.js is set on your document, you can pass the following class with three optional and combinable parameters : delay (in ms), split and repeat. Yep, it's just that easy.
| Class | Requirement | Description | Example |
|---|---|---|---|
| textanim-{animation} | Required | This element triggers the scroll animation. You can choose from 31 different animations in the demo. Help yourself! | <p class="textanim-slide-up">Exemple</p> |
| textanim-animation-{value in milliseconds} | Optional must be placed right after {animation} if used | Adds an animation delay in milliseconds. Useful for sequential animations. | <p class="textanim-slide-up-400">This text will appear after 400ms</p> |
| textanim-animation-split | Optional | Animates text letter by letter, wrapping each letter in a span to avoid line break issues. | <p class="textanim-slide-up-400-split">This text will appear letter by letter!</p> |
| textanim-animation-repeat | Optional | Repeats the animation each time the text is visible in the viewport. | <p class="textanim-slide-up-400-split-repeat">This text will animate every time it comes into view.</p> |