Typing Animation With Character Shuffle Effect – Textion

Preview:

Description:

Textion is a JavaScript library for a configurable text typing animation with a character shuffle effect.

How to use it:

1. Download and import the Textion library.

<script src="dist/textion.js"></script>

2. Add the CSS class ‘textion’ to the container whose text content should be animated. That’s it.

<h1 class="textion">CSSScript</h1>

3. Determine the number of characters to shuffle while typing. Default: 2.

<h1 class="textion repeat-5">CSSScript</h1>

4. Set the time in ms to wait before starting the typing animation. Default: 0.

<h1 class="textion timeout-1500">CSSScript</h1>

5. Set the typing speed in ms. Default: 65.

<h1 class="textion interval-15">CSSScript</h1>

6. Set speed of opacity changing in lerp function. Default: 4.

<h1 class="textion lerpSpeed-8">CSSScript</h1>