JavaScript Library For Beautiful Smooth Text Animations – TxtAnime.js

Preview:

Description:

The world of text animations is a wonderful one. There are many different ways to make an animation, but very few libraries can be used in production environments.

The TxtAnime.js JavaScript library helps you create beautiful text animations without the hassle of coding everything from scratch or reinventing the wheel. You don’t need to know JavaScript to use it, either!

How to use it:

1. Install and import the TxtAnime as an ES module.

# NPM
$ npm i txtanime.js

import { TxtAnime } from "txtanime.js";

2. Or download the package and load the minified version of the TxtAnime.js library from the dist folder.

<script src="TxtAnime-min.js"></script>

3. Create a new instance of the TxtAnime.

let demo = new TxtAnime();

4. Apply animations to the target text.

<div class="element">
  Element To Animate
</div>

txt.animate('element',{
  // tx-an-1 - tx-an-10
  effect : 'tx-an-1',
  
  // start time in seconds
  delayStart: 0,
  
  // delay in seconds
  delay : 0.05,
  // duration in seconds
  duration: 0.7,
  
  // repeat the animation or not
  loop : true,
  
  // replay the effect after... in seconds
  loopTime : 2,
  // make masking effect inside parent element
  overflow: true,
});

5. Apply Scale animations to the target element.

demo.scale('element',{
  // words to transition between
  text : ['CSS' , 'Script' , 'Com'],
  // scale-1 or scale-2
  effect : 'scale-1',
  
  // start time in seconds
  delayStart: 0,
  
  // delay in seconds
  delay : 1.5,
  // duration in seconds
  duration: 2,
  
  // repeat the animation or not
  loop : true,
});

6. Apply Overlay animations to the target element.

txt.overlay('element',{
  // overlay-1 - overlay-3
  effect : 'overlay-1',
  
  // start time in seconds
  delayStart: 0,
  
  // repeat the animation or not
  loop : true,
  
  // replay the effect after... in seconds
  loopTime : 5,
  // background color
  overlayColor: '#03a9f4',
  // text color
  textColor : '#161414',
  // waiting time in seconds
  outTime: 3,
});

7. Apply Typing animations to the target element.

txt.typed('element',{
  // words to transition between
  text : ['CSS' , 'Script' , 'Com'],
  // typed-1 - typed-3
  effect : 'typed-1',
  
  // start time in seconds
  typedStart: 0,
  
  // replay the effect after... in seconds
  loopTime : 3,
  // typing speed in seconds
  typedSpeed : 0.05,
  // waiting time in seconds
  outTime: 1,
});

Changelog:

v1.7.0 (02/07/2024)

• update

v1.6.0 (05/21/2023)

• update

v1.5.3 (11/30/2022)

• Code improvement and bug fixes

v1.5.0 (10/06/2022)

• Code improvement and bug fixes

v1.4.0 (09/01/2022)

• fix parent of Null

v1.1.0 (08/31/2022)

• fix entry file

v1.0.8 (08/28/2022)

• added emoji