JavaScript Library For Beautiful Smooth Text Animations – TxtAnime.js

Category: Animation , Javascript , Recommended | December 15, 2021
Author:mohamedfrindi
Views Total:160 views
Official Page:Go to website
Last Update:December 15, 2021
License:MIT

Preview:

JavaScript Library For Beautiful Smooth Text Animations – TxtAnime.js

Description:

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

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,

});

You Might Be Interested In:


One thought on “JavaScript Library For Beautiful Smooth Text Animations – TxtAnime.js

Leave a Reply