Typify.js NPM | npm.io

typify.js - Auto Typing Animation Library

typify.js is a powerful and lightweight auto typing animation library that makes it easy to create dynamic text animations on your website. Enhance your user experience with typewriter-like effects.

Demo

Visit this page to see a live demo.

Installation

Using CDN

To use typify.js directly in the browser, include the following script tag in the <head> or <body> section of your HTML file:

<script src="https://unpkg.com/typify.js@1.1.9/dist/typify.min.js"></script>

Download

To setup typify.js locally: visit

Usage

To create a typewriter effect for an HTML element, call the Typify function with the required CSS selector and configuration options.

Place the below code in your html file

<h1 id="typify-text"></h1>

Place the below code in your javascript file

const typingText = Typify('#typify-text', {
  text: ['Hello!', 'Welcome to Typify Library!', 'Enjoy the typing effect!'],
  delay: 100,
  loop: true,
  cursor: true,
  stringDelay: 1000 
});

Options

The Typify function accepts the following options as the second argument:

text (required): An array of strings to be typed and erased in sequence.
delay (optional): The delay in milliseconds between typing each character (default: 100ms).
loop (optional): Whether to loop through the 'text' array continuously or stop after one iteration (default: true).
cursor (optional): Whether to display the cursor (default: true).
stringDelay (optional): Time in milliseconds to pause before typing each string (default: 1000ms).

Examples

Using in browser

The following example demonstrates how to use typify.js in browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typify Example</title>
</head>
<body>
  <h1 id="typify-text"></h1>
  <script src="./typify.min.js"></script>
  <script>
    const typingText = Typify('#typify-text', {
      text: ['Hello!', 'Welcome to Typify Library!', 'Enjoy the typing effect!'],
      delay: 100,
      loop: true,
      cursor: true,
      stringDelay: 1000
    });
  </script>
</body>
</html>