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.
Visit this page to see a live demo.
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>
To use typify.js as an ES module, install it via npm:
npm install typify.js
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
});
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.
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%2Fgithub.com%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>
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>
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;
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>
Kindly report the issues here