Full implementation guide

Typewriter allows you to animate HTML elements that contain text. Preview

Implemention

Include a script tag inside the head tag:

<script src="https://cdn.jsdelivr.net/npm/@nicesapien0/typewriter.js/typewriter.js"></script>

(More CDN Providers)

or download the typewriter.js file, add it in the root folder of your site and include a script tag inside the head tag:

<script src="typewriter.js"></script>

Now, add a div element before the element you want to animate and set classes for both of them, make sure the class of first div is typewriter-effect and second div is text. You also have to set id of second div to typewriter-text.

<div class="typewriter-effect">
<div id="typewriter-text" class="text"></div>
</div>

And now the final, add another script tag and insert a line of code in it.

<script>
typewriterConfig = ["Your Text", true]
  typewriter();
</script>

After doing this, make sure to replace Your Text with text you want to display. In the second Array, you can set true or false as a boolean. If the value of second array is set to true, then the text will display in center.

And yeah, you're done! Enjoy amazing typewriter effect in your website.