Tutorial Intro

Let's discover typewriter.js in less than 5 minutes.

Getting Started

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

Implemention

For better explanation, see the full guide

Include a script tag inside the head tag:

<script src="https://unpkg.com/@nicesapien0/typewriter.js/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 and class to text.

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

Please avoid adding css yourself to these elements.

Now the final, add another script tag and configure typewriter.

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