In this blog post, you'll learn how to create a text reveal animation using HTML, CSS, and JavaScript.
The animation reveals each word one by one and make whole text. The words starting from the bottom and moving upwards. Each word floats up individually, forming the complete text in the specified sequence.
JavaScript method used:
split()
array.map()
join()
JavaScript Loop used:
For loop.
Video Tutorial on Text Reveal Animation (word by word) Using JavaScript.
Text Reveals Animation.
How we are going to make this text reveal animation ?. Which shows whole texts by revealing each word one by one.
- We'll use JavaScript's split method to separate the text into individual words.
- Wrap Each Word in a Span Tag: We'll then use JavaScript's map method to iterate over each word and wrap it in a <span> tag. This creates a distinct HTML element for every word, allowing us to manipulate them individually.
- Position Spans at the Bottom: Initially, we'll set the position of each <span> tag to be at the bottom using CSS. This ensures they're hidden from view.
- Animate Spans Sequentially: We'll use a for loop to iterate through all the <span> tags. Inside the loop, we'll use JavaScript's setTimeout method to gradually change the top position of each <span> tag, making them appear one by one.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder with name index.html and index.css.
Lets create the text reveal animation using HTML, CSS and JavaScript.
Step 1: Create the basic structure.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Reveal Animation using JavaScript. | Maketechstuff.com</title>
</head>
<body>
</body>
<script>
</script>
</html>
Step 2: Add Text for Animation.
First, we'll add the text we want to animate.
HTML
<div class="container">
<div class="box">
<div class="text">Hello welcome to maketechstuff.com</div>
</div>
</div>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
text-align: center;
}
.box {
overflow: hidden;
/* border: 2px solid #000; */
}
.text {
color: blue;
font-weight: bold;
font-size: 30px;
}
Output:
Step 3: Splitting Text into Words and wrap the each words with HTML Element.
In this step, we'll split the text into individual words and wrap each word in a separate HTML element. We can achieve this using JavaScript. First, we'll split the text or string into an array of words. Then, we can use the map method to iterate through the array and wrap each word in a <span> tag.
JavaScript
// Defining the variables.
let box = document.querySelector(".box");
let text = document.querySelector(".text");
// Split the text into words array. Then wrap the each element or words with seperate html element.
text.innerHTML = text.innerHTML.split(" ").map((letter, index) => `<span>` + letter + `</span>`).join(" ");
Now the words are in the span tag.
See the console.
Output:
Step 4: Hide Text initially.
In this step, we'll hide the text initially and then reveal it by animating the individual words.
We'll hide all <span> tags by adjusting their top position (make it top position 35px).
Since the text is wrapped within a class named "box", we'll set the overflow property of the "box" class to be hidden. This will clip any content that overflows the box's boundaries.
CSS
.text span{
position: relative;
top: 35px;
transition: 0.8s cubic-bezier(0.400, -0.500, 0.500, 1.500);
}
To Animate the Text Reveal, we'll use a for loop in with the setTimeout method to gradually adjust the top position of each <span> tag back to 0, one by one. This will create the words floating up to reveal themselves one by one.
Step 5: Animate Text Reveal One by One with a Float Up Effect.
Here's how to achieve the animation:
We'll first select all the span elements in your HTML using JavaScript.
We'll use a loop to iterate through each span element. Inside the loop, we'll use the setTimeout method to create a timed animation for each element.
Within the setTimeout function, we'll adjust the top property of the current span element using CSS style. We'll change it from top: 35px to top: 0px, creating a floating up animation.
JavaScript
// Select all elements that is wrapped above.
let span = document.querySelectorAll(".text span");
console.log(span);
for (let i = 0; i < span.length; i++) {
const element = span[i];
// Delaying the words by its index value.
setTimeout(() => {
element.style.top = "0px";
}, 300 * i);
}
Output:
Here's how to create a text reveal animation (where text appears one letter or word at a time) using HTML, CSS, and JavaScript. If you have any questions or suggestions, feel free to write in the comment section.
You may like:
- How to blink the text using JavaScript.
- How to display the texts with automatic typing effect using JavaScript.
- How to make the text or string character's to appears one by one: Text animation using HTML, CSS and JavaScript.
- How to create a input field with dynamic placeholder using HTML, CSS and JavaScript.
- How to change button text on hover with sliding animation using JavaScript.
- Read more and read less button functionality using JavaScript.
- Copy text using JavaScript.
Share your thoughts.