A CSS & Javascript Library for Fancy Text Animations | tacj

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

important notes

inside the paragraph, you cannot use any tags, signs, or emojis.

The formatting syntax:
use [my awesome paragraph..] to make the text inside bold.
use {my awesome paragraph..} to make the text italic.
use _awesome paragraph.._ for underlining.

for every line, you should use, and no spaces around.
like this: my first line^my second line.

and of course, you can do something like {[_my paragraph is too cool_]}

and if you want to use one of these signs – [{_^ just put ~ before, working for ~ also.

Must Read – Cool 3D Typography Animations Made with CSS & Javascript | ztext.js

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

javascript text animation library


See Demo And Download

Official Website(Yishay666): Click Here

This superior jQuery/javascript plugin is developed by Yishay666. For extra Advanced Usage, please go to the official website.

Share