How to Create Animated Typing Effect using typed.js?

Last Updated : 24 Jul, 2024

Typed.js is a JavaScript library that 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"

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

CSS

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;
}

Now you have to download the "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 a 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 the CDN link.

CDN link: https://developers.google.com/speed/libraries/devguide#jquery

We have to import and add the "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.