Beautiful and Free Smooth Text Effects JavaScript Library

TxtAnime.js is a javascript library that contains many beautiful and free text effects. The JavaScript library in TxtAnime helps you create beautiful text animations without the hassle of coding everything from scratch or reinventing the wheel.

text animation examples, 2d text animation after effects, text animation free, text animation template, elegant text animation, typewriter text animation effect library

How to make use of it:

1. Install and import TxtAnime as an ES Module.

# NPM
$ npm i txtanime.js

import { TxtAnime } from "txtanime.js";

2. Download the package and download the thumbnail of the TxtAnime.js library from the dist folder.

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

3. Create a new instance of TxtAnime.

let demo = new TxtAnime();

4. Apply the animation 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 a Scale animation to the target element.

demo.scale('element',{

  // words to transition between
  text : ['' , '' , ''],

  // 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 motions to the target item.

txt.typed('element',{

  // words to transition between
  text : ['' , '' , ''],

  // 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,

});

Beautiful Smooth Text Animations, TxtAnime.js Plugin/Github, text animation css library