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>
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;
}
This removes the default 8px margin of the body and make some color changes.
#box {
text-align: center;
font-size: 32px;
display: inline-block;
}
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;
}
}
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);
}
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;
}
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;
}
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("") +
<span id="last-letter">${arr[arr.length - 1]}</span>;
}
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)
I just wanna know how much JavaScript is needed to learn reactjs
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 :)