How to Create Animated Typing Effect using typed.js ?

21 Jul, 2020
Typed.js is a JavaScript library which is used to type a set of strings at the speed that you set, backspace what it’s typed and begin the typing with another string you have set.
Let us start by creating a project folder and name it as per your wish. Create two files and name them as “index.html” and “style.css”
Write the following code in “index.html”HTMLHTML<!DOCTYPE html><html lang="en">  <head>    <title>Typed.js</title>    <!-- Import style.css from root directory -->    <link rel="stylesheet" href="./style.css" /></head>  <body>    <div class="heading">        <h1>GeeksforGeeks</h1>        <h3>            <span class="text-slider-items">                A computer Science portal for geeks,                A place to pratice code            </span>              <strong class="text-slider"></strong>            <!-- classes "text-slider"             and "text-slider-items"            for typed.js script -->        </h3>    </div></body>  </html>Write the following CSS code into your “style.css” file.<style>    body {        background-color: white;        font-family: Roboto, Oxygen, Ubuntu, Cantarell,            'Open Sans', 'Helvetica Neue', sans-serif;      }      .text-slider-items {        display: none;    }      .heading {        margin-top: 200px;        text-align: center;    }      .heading h1 {        color: limegreen;        font-size: 70px;    }      .heading h3 {        color: black;        font-size: 20px;    }</style>Now you have to download “typed.js” scripts folder from the below link and unzip it and keep it in your project directory.Download Link: https://mattboldt.com/demos/typed-js/Also, you have to include jQuery library to use jQuery functions. There are two ways either by downloading and adding the “jquery.js” file or by adding its CDN file link. Here you will add jQuery by using CDN link.CDN link: https://developers.google.com/speed/libraries/devguide#jqueryWe have to import and add “typed.js” file from the “typed.js” folder. Add all JavaScript files just before the “body” tag. Also add the below script into your “index.html” file.HTMLHTML<script src="./typed.js-master/lib/typed.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/   jquery/3.5.1/jquery.min.js"></script><script>    if ($(".text-slider").length == 1) {        var typed_strings = $(".text-slider-items").text();        var typed = new Typed(".text-slider", {            strings: typed_strings.split(", "),            typeSpeed: 50,            loop: true,            backDelay: 900,            backSpeed: 30,        });    }</script>It should look like this.HTMLHTML<!DOCTYPE html><html lang="en">  <head>    <title>Typed.js</title>      <!-- Import style.css from root directory -->    <link rel="stylesheet" href="./style.css" /></head>  <body>    <div class="heading">        <h1>GeeksforGeeks</h1>        <h3>            <span class="text-slider-items">                A computer Science portal for                 geeks, A place to pratice code            </span>            <strong class="text-slider"></strong>          </h3>    </div>    <!-- Import typed.min.js file from typed.js folder -->    <script src=        "./typed.js-master/lib/typed.min.js">    </script>          <!-- Add jquery cdn -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>      <!-- Add this script for successful         implementation of typed.js  -->    <script>        if ($(".text-slider").length == 1) {                          var typed_strings =                 $(".text-slider-items").text();              var typed = new Typed(".text-slider", {                strings: typed_strings.split(", "),                typeSpeed: 50,                loop: true,                backDelay: 900,                backSpeed: 30,            });        }    </script></body>  </html>Start the “index.html” file and notice the output.
Write the following code in “index.html”HTMLHTML<!DOCTYPE html><html lang="en">  <head>    <title>Typed.js</title>    <!-- Import style.css from root directory -->    <link rel="stylesheet" href="./style.css" /></head>  <body>    <div class="heading">        <h1>GeeksforGeeks</h1>        <h3>            <span class="text-slider-items">                A computer Science portal for geeks,                A place to pratice code            </span>              <strong class="text-slider"></strong>            <!-- classes "text-slider"             and "text-slider-items"            for typed.js script -->        </h3>    </div></body>  </html>
Write the following code in “index.html”
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>Typed.js</title>    <!-- Import style.css from root directory -->    <link rel="stylesheet" href="./style.css" /></head>  <body>    <div class="heading">        <h1>GeeksforGeeks</h1>        <h3>            <span class="text-slider-items">                A computer Science portal for geeks,                A place to pratice code            </span>              <strong class="text-slider"></strong>            <!-- classes "text-slider"             and "text-slider-items"            for typed.js script -->        </h3>    </div></body>  </html>
Write the following CSS code into your “style.css” file.<style>    body {        background-color: white;        font-family: Roboto, Oxygen, Ubuntu, Cantarell,            'Open Sans', 'Helvetica Neue', sans-serif;      }      .text-slider-items {        display: none;    }      .heading {        margin-top: 200px;        text-align: center;    }      .heading h1 {        color: limegreen;        font-size: 70px;    }      .heading h3 {        color: black;        font-size: 20px;    }</style>
Write the following CSS code into your “style.css” file.
<style>    body {        background-color: white;        font-family: Roboto, Oxygen, Ubuntu, Cantarell,            'Open Sans', 'Helvetica Neue', sans-serif;      }      .text-slider-items {        display: none;    }      .heading {        margin-top: 200px;        text-align: center;    }      .heading h1 {        color: limegreen;        font-size: 70px;    }      .heading h3 {        color: black;        font-size: 20px;    }</style>
Now you have to download “typed.js” scripts folder from the below link and unzip it and keep it in your project directory.Download Link: https://mattboldt.com/demos/typed-js/Also, you have to include jQuery library to use jQuery functions. There are two ways either by downloading and adding the “jquery.js” file or by adding its CDN file link. Here you will add jQuery by using CDN link.CDN link: https://developers.google.com/speed/libraries/devguide#jquery
Now you have to download “typed.js” scripts folder from the below link and unzip it and keep it in your project directory.
Download Link: https://mattboldt.com/demos/typed-js/
Also, you have to include jQuery library to use jQuery functions. There are two ways either by downloading and adding the “jquery.js” file or by adding its CDN file link. Here you will add jQuery by using CDN link.
CDN link: https://developers.google.com/speed/libraries/devguide#jquery
We have to import and add “typed.js” file from the “typed.js” folder. Add all JavaScript files just before the “body” tag. Also add the below script into your “index.html” file.HTMLHTML<script src="./typed.js-master/lib/typed.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/   jquery/3.5.1/jquery.min.js"></script><script>    if ($(".text-slider").length == 1) {        var typed_strings = $(".text-slider-items").text();        var typed = new Typed(".text-slider", {            strings: typed_strings.split(", "),            typeSpeed: 50,            loop: true,            backDelay: 900,            backSpeed: 30,        });    }</script>It should look like this.HTMLHTML<!DOCTYPE html><html lang="en">  <head>    <title>Typed.js</title>      <!-- Import style.css from root directory -->    <link rel="stylesheet" href="./style.css" /></head>  <body>    <div class="heading">        <h1>GeeksforGeeks</h1>        <h3>            <span class="text-slider-items">                A computer Science portal for                 geeks, A place to pratice code            </span>            <strong class="text-slider"></strong>          </h3>    </div>    <!-- Import typed.min.js file from typed.js folder -->    <script src=        "./typed.js-master/lib/typed.min.js">    </script>          <!-- Add jquery cdn -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>      <!-- Add this script for successful         implementation of typed.js  -->    <script>        if ($(".text-slider").length == 1) {                          var typed_strings =                 $(".text-slider-items").text();              var typed = new Typed(".text-slider", {                strings: typed_strings.split(", "),                typeSpeed: 50,                loop: true,                backDelay: 900,                backSpeed: 30,            });        }    </script></body>  </html>Start the “index.html” file and notice the output.
We have to import and add “typed.js” file from the “typed.js” folder. Add all JavaScript files just before the “body” tag. Also add the below script into your “index.html” file.
HTML
<script src="./typed.js-master/lib/typed.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/   jquery/3.5.1/jquery.min.js"></script><script>    if ($(".text-slider").length == 1) {        var typed_strings = $(".text-slider-items").text();        var typed = new Typed(".text-slider", {            strings: typed_strings.split(", "),            typeSpeed: 50,            loop: true,            backDelay: 900,            backSpeed: 30,        });    }</script>
It should look like this.
HTML
<!DOCTYPE html><html lang="en">  <head>    <title>Typed.js</title>      <!-- Import style.css from root directory -->    <link rel="stylesheet" href="./style.css" /></head>  <body>    <div class="heading">        <h1>GeeksforGeeks</h1>        <h3>            <span class="text-slider-items">                A computer Science portal for                 geeks, A place to pratice code            </span>            <strong class="text-slider"></strong>          </h3>    </div>    <!-- Import typed.min.js file from typed.js folder -->    <script src=        "./typed.js-master/lib/typed.min.js">    </script>          <!-- Add jquery cdn -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>      <!-- Add this script for successful         implementation of typed.js  -->    <script>        if ($(".text-slider").length == 1) {                          var typed_strings =                 $(".text-slider-items").text();              var typed = new Typed(".text-slider", {                strings: typed_strings.split(", "),                typeSpeed: 50,                loop: true,                backDelay: 900,                backSpeed: 30,            });        }    </script></body>  </html>
Start the “index.html” file and notice the output.
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)