DEV Community

HARSH VATS
HARSH VATS

Posted on

Typewriter text animation with just html, CSS and JavaScript?

https://codepen.io/HARSH_VATS/pen/oNbExwE

Saw the animation above? It’s cool. Right? Although you can directly use this animation in your website by just copy pasting the code but if you want to know how i made this then you should probably read this article till the end.
HTML

 <span id="text"></span>
 <span id="carrat"></span>
 <span id="underline"></span>
Enter fullscreen mode Exit fullscreen mode

A div with id ‘box’ will contain our animation. Two spans are required for text and carrat respectively. There is a second div inside the first one which contains another span. This is done to start the underline animation from right side instead of left.
CSS

    body {
        margin: 0;
        background: black;
        color: cyan;
         }
Enter fullscreen mode Exit fullscreen mode

This removes the default 8px margin of the body and make some color changes.

    #box {
        text-align: center;
        font-size: 32px;
        display: inline-block;
    }
Enter fullscreen mode Exit fullscreen mode

display is set to inline-block so that the div does not cover the whole width of the page. Hence the underline starts from the last word and not from the right wall of your device.

    @keyframes letter {
      0% {
        font-size: 20px;
      }
      100% {
        font-size: 30px;
      }
    }
Enter fullscreen mode Exit fullscreen mode

This animation makes changes the font-size of the last word. So let’s use this animation in text.

    #last-letter {
        animation: letter 0.5s cubic-bezier(0.08, 0.6,0.56,1.4);
    }
Enter fullscreen mode Exit fullscreen mode

You might be thinking which element has id as ‘last-letter’. Don’t worry! I will assign it using javascript. But first finish the carrat. For that I have made a blink animation. Take a look.

    @keyframes blink {
      0% { opacity: 0.0; }
      50% { opacity: 1.0; }
      100% { opacity: 0.0; }
    }
    #carrat {
        border: 1px solid cyan;
        opacity: 1.0;
        animation: blink 0.8s linear infinite;
        font-size: 31px;
        font-weight: 100;
        position: relative;
        top: -3px;
        right: -2px;
    }
Enter fullscreen mode Exit fullscreen mode

Blink animation is simple. It just changes the opacity from 0 to 1 to 0. The animation should repeat itself that’s why I have used ‘infinite’ in animation. The carrat is just a span with some border and width of 1px. Initial opacity is set to 1 which isn’t neccessary by the way. The position is set to relative so that you can change it’s position and make it touch the underline.

    #underline {
        height: 1px;
        background: cyan;
        margin-top: -4px;
        width: 0;
        float: right;
        transition: 2s;
    }
Enter fullscreen mode Exit fullscreen mode

Underline is just a div with some background color and 1px height. Initial width is 0 and we will change the width to 100% at the end of animation using js. Float right makes the animation start from right. Transition is the time for animation.

JAVASCRIPT

var word = "This animated text is made by Harsh Vats.";
var time_per_word = 100;
var arr = [];
var i = 0;
var length = word.length;
setInterval(() => {
if (i < length) {
arr.push(word[i]);
document.getElementById("text").innerHTML =
arr.slice(0, arr.length - 1).join("") +
&lt;span id="last-letter"&gt;${arr[arr.length - 1]}&lt;/span&gt;;
}
if (i == length) {
document.getElementById("carrat").style.animation = "stop_blinking";
document.getElementById("underline").style.width = "100%";
}
i++;
}, time_per_word);

The word is what we want to animate. We will use setInterval with time_per_word for our animation. This will change the innerHTML of span with id ‘text’ in some regular time interval. We will print every letter as it is except the last one. Every letter becomes a last letter for once starting from the first letter. Stop the carrat blinking animation if the ‘i’ becomes equal to ‘length’ and set the width to 100%.
That’s all for now. I hope you understood what tried to deliver you. I yes then don’t forget to clap. If you have any doubts, feel free to ask in the comments.

Top comments (2)

Collapse
 
vikashdriod profile image
vikash-driod

I just wanna know how much JavaScript is needed to learn reactjs

Collapse
 
harshvats2000 profile image
HARSH VATS

Interesting question.
However I would recommend you to start react even if you know just basics of javascript and then keep learning javascript. But always remember never skip any concept. But if you have time then finish w3schools tutorial on javascript.
Happy journey ahead :)