import

cdn links:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/tacj.css">
<script src="https://unpkg.com/[email protected]/tacj.js"></script>

or,

npm i tacj

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

First, SplitText

to start with any animation - you have to split your paragraph into lines, words and letters, to do that use the splitText() function

the functions first argument will be the selector of the paragraph (unique, im using document.querySelector()).

the second argument is not required,it's a callback function that will execute when the splitText() function is finished.

it will look something like this:

tacj.splitText("p", cb);

important notes

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

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 underline.

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 this signs - [{_^ just put ~ before, works for ~ also.

typing()

basic syntax:

tacj.animate("p", { type: "typing" });

functions first argument is the selector, then settings, and a callback function (not required). in settings, you can define a lot of variables,

type: 'typing', // the type of the animation
time: 7, // how long the it will take the javascript to add the right classes to the html
duration: 0.5, // duration for the css animation
color: 'red', // any valid css color
transform: 'translateY(5px) rotate(-10deg)', // any valid transform value
textShadow: "2px 2px orange" // any valid text-shadow value

the code for the gif above:

tacj.animate(
  "p",
  {
    type: "typing",
    time: 7,
    duration: 0.5,
    color: "red",
    transform: "translateY(5px) rotate(-10deg)",
    textShadow: "2px 2px orange",
  },
  () => alert("I will run when the animation is over!")
);

Note: everything is not required except type:

sendColors()

basic syntax:

tacj.animate("p", { type: "sendColors" });

functions first argument is the selector, then settings, and a callback function (not required). in settings, you can define a lot of variables,

type: 'sendColors', // the type of the animation
time: 7, // how long the it will take the javascript to add the right classes to the html
duration: 0.5, // duration for the css animation
color: 'red', // any valid css color
// instead of settings one color, you set 3 for gradient effect
color_1: 'red', color_2: 'blue', color_3: 'green', // any valid color accepted
jump: -15, // the letters can take a little jump, set to negative value for it to go up
textShadow: "2px 2px orange" // any valid text-shadow value

the gif above on action:

tacj.animate(
  "p",
  {
    type: "sendColors",
    time: 7,
    duration: 0.5,
    color: "red",
    jump: -5,
    color: "red",
    textShadow: "2px 2px orange",
  },
  () => console.log("I will run when the animation is over")
);

you can also do this:

tacj.animate(
  "p",
  {
    type: "sendColors",
    time: 7,
    duration: 0.5,
    color_1: "red",
    color_2: "blue",
    color_3: "yellow",
    jump: -5,
    color: "red",
    textShadow: "2px 2px orange",
  },
  () => console.log("I will run when the animation is over")
);

Note: everything is not required except type:

For safer usage put the animate function in the cb of splitText, like this:

tacj.splitText("p", () => {
  tacj.animate("p", { type: "sendColors" });
});

But, you can call the animate() function any time.

End

I created this library because every it was very hard for me to find a good library for this kind of animations,

if you have anything to say / ask / approve / complain -> Im on discord Post Malone#0376, or on twitter @yishayhaz.