A CSS & Javascript Library for Fancy Text Animations

SplitText tacj is a JavaScript library that splits text into parts such as lines, words, and characters and animates them character by character.

javascript text animation, simple javascript text animation, javascript text animation library, text animation javascript, anime js text animation, cool javascript effects codes

How to make use of it:

1. Install and import tacj.

# NPM
$ npm i tacj

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

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

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

3. Divide the text into lines, words, and letters.

<p>Any Text Here</p>

tacj.splitText("p");

4. The library does not 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. Move the text and select the type of movement.

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

6. Animation composition.

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"

  },
);

Fancy Text Animation In JavaScript, SplitText Plugin/Github, text animation css, floating text animation css