Fancy Text Animation In JavaScript – tacj

Category: Animation , Javascript , Text | November 30, 2021
Author:Yishay666
Views Total:74 views
Official Page:Go to website
Last Update:November 30, 2021
License:MIT

Preview:

Fancy Text Animation In JavaScript – tacj

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"
  },
);

You Might Be Interested In:


Leave a Reply