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.

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:

<!-- jsdelivr (recommended) -->
<script src="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Ftypify.js%40latest%2Fdist%2Ftypify.min.js"></script>

<!-- unpkg -->
<script src="proxy.php?url=https%3A%2F%2Funpkg.com%2Ftypify.js%40latest%2Fdist%2Ftypify.min.js"></script>

Using npm

To use typify.js as an ES module, install it via npm:

npm install typify.js

Usage

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

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

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

Returns: An object with a stop() method to cancel the typing effect and reset the element to the first string in the text array.

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="proxy.php?url=https%3A%2F%2Fdevsk18.github.io%2F.%2Ftypify.min.js"></script> <!-- or use CDN -->
  <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>

Using with npm (ES Module)

The following example demonstrates how to use typify.js after installing via npm in a vanilla HTML/JS project.

<!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 type="module">
    import Typify from 'typify.js';

    Typify('#typify-text', {
      text: ['Hello!', 'Welcome to Typify Library!', 'Enjoy the typing effect!'],
      delay: 100,
      loop: true,
      cursor: true,
      stringDelay: 1000
    });
  </script>
</body>
</html>

Using in React

The following example demonstrates how to use typify.js in a React project.

import { useEffect } from 'react';
import Typify from 'typify.js';

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

    return () => typify.stop();
  }, []);

  return <h1 id="typify-text"></h1>;
}

export default App;

Using in Vue

The following example demonstrates how to use typify.js in a Vue project.

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

<script setup>
import { onMounted, onUnmounted } from 'vue';
import Typify from 'typify.js';

let typify;

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

onUnmounted(() => typify.stop());
</script>