Text Typing Animation Effect using Javascript

Text Typing Animation Effect is better known as a typewriter. This type of text typing effect you can easily create with the help of JavaScript.

In this tutorial, you will learn how to create text typing animation effects using JavaScript. If you are a beginner then you can watch the typing animation tutorial made using CSS only. Here I have used type.Js to type multiple texts.

Text typing is mainly used in different types of websites where multiple texts need to be typed one after the other. This type of JavaScript animation is used to share skills, professions, etc. on different types of portfolio websites.

This is what I designed for multiple text typing, which means you can use multiple tests at once. Some parts of this text line are completely fixed and some parts are being typed repeatedly. Of course, I took help at type.Js to make it work. type.Js is a JavaScript library.

If you want to know how it works, you can use the demo section below. Here you will find the required source code.

See the Pen
Typing text by Raj Template (@RajTemplate)
on CodePen.

Text Typing Animation Effect using Javascript, HTML & CSS

If you are a beginner then of course you can follow the tutorial below. To create it, you first need to create an HTML and CSS file. Even if you do not create a separate JavaScript file here. Full JavaScript You can add script tags to HTML files.

Step 1: Design the web page

 I designed the web page using a small amount of CSS code below. Here we have used black as the background color of the webpage and min-height: 100vh.

Step 2: Add and design the fixed text 

Here I have used two lines of HTML code. The first line is used to add fixed text and the second line is used to add typed text. Now I have designed that fixed text using the HTML and CSS code below.
 The color of the text is white, font-size: 55px and font-family: sans-serif.

Step 3: Activate typed text using JavaScript 

Now I have added the following typing tests using HTML and JavaScript. I did not add any text in the HTML here. I added text to the quotation (” “) using strings in JavaScript.

typeSpeed: I have used 100, which means that when each word is typed, its speed will be 100. Here I have used backSpeed: 40, which means that when each word is backed up again, its speed will be 40. Here loop: true means this typing process will continue till infinity.

  <div class=”text”></div>

var typing=new Typed(“.text”, {

   strings: [ “Web Designer”, “Freelancer”, “Graphics Designer”, “Web Developer”],

   typeSpeed: 100,

   backSpeed: 40,

   loop: true,

 });

To make this work more effective you need to add a CDN link of type.Js.

Step 4: Design the type text using CSS

Above we have implemented the animation. Now I have designed this typing text with the help of CSS. Here I have used the color blue of the text, I have used the font-size 50px. I did not use any separate code to create the cursor here. I just made a blue cursor using border-right. 

.text{

  color: white;

    border-right: 2px solid rgb(62, 216, 255);

    font-size: 55px;

    font-family: sans-serif;

    color: rgb(62, 216, 255);

}

 Hopefully from the tutorial above you have learned how to create typing animations using type.Js. I have already shown this type of typing animation using only pure CSS for beginners.