Fancy Text Animation In JavaScript – tacj

Preview:

Description:

tacj is a JavaScript library that splits text into pieces (lines, words, and letters) and animates them character by character.

See It In Action:

How to use it:

1. Install and import the tacj.

# NPM
$ npm i tacj

import tacj from 'tacj/tacj.js'
import 'tacj/tacj.css'

2. Or directly load the JavaScript and CSS files in the document.

<link rel="stylesheet" href="tacj.css" />
<script src="tacj.js"></script>

3. Split your text into lines, words, and letters.

<p>Any Text Here</p>

tacj.splitText("p");

4. The library doesn’t allow any HTML tags inside the paragraph element. You can use the following syntax to format your text.

[Bold Text]

{Italic Text}

_Text With Underline_

First Line^Second Line

5. Animate the text and specify the animation type.

tacj.animate(
  "p",
  {
    type: "typing", // or sendColors
  },
  () => alert("Fired when the animation is finished!")
);

6. Config the animation.

tacj.animate(
  "p",
  {
    type: "typing",
    // how many times to repeat the animation
    time: 7, 
    // duration of the animation
    duration: 0.5,
    // text color
    color: 'red',
    // make letters jump
    jump: -5,
    // any valid transform value
    transform: 'translateY(5px) rotate(-10deg)', 
    // apply shadows to the text
    textShadow: "2px 2px orange"
  },
);