In this blog post, we're going to create a text animation using JavaScript. The text will change automatically, one text or word at a time, using a sliding animation effect. There are two parts to the text: one static part and another that changes dynamically (automatically) with the animation.
JavaScript method used:
Settimeinterval()
Settimeout()
Video Tutorial on Text Animation Using HTML CSS & JavaScript.
Sliding Text Animation Using JavaScript.
How are we going to create this sliding text animation ?
Step 1: Create the HTML and CSS for Text.
Let's first create the HTML to understand the difference between static and dynamic text.
HTML
<div class="container">
<div class="box">
<div class="text">
<p class="static_text">Learn</p>
<p class="dynamic_text"></p>
</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: 450px;
}
.box {
background-color: blue;
color: #fff;
padding: 16px 20px;
border-radius: 5px;
box-shadow: 0px 2px 15px -10px #000;
overflow: hidden;
}
.text {
width: fit-content;
display: flex;
align-items: center;
font-size: 40px;
position: relative;
}
.text .static_text {
margin-right: 12px;
}
Output:
After creating the HTML, let's add JavaScript for dynamic sliding and changing text functionality.
Step 2: Create Variables for Sliding and Text Change.
First, we create an array to store the sentences or words that we want to slide one by one. We also create a variable named i with an initial value of 0. This variable will be used as an index for the array.
JavaScript
let dynamic_text = document.querySelector(".dynamic_text");
// Storing the words or sentences for displaying inside the dynamic text element one by one with animation.
let text_array = ["HTML", "CSS", "JavaScript", "PHP"];
// For extracting the values from array by the using this value as a index.
let i = 0;
Step 3: Implement Automatic Text Change Function.
Create a function that is responsible for changing the text at a specific time interval (automatic).
This function should run every 2 seconds. Inside the function, we increment the value of the i variable by one.
We use this i variable as an index to extract elements from the array we created earlier.
Then, we update the inner HTML of the HTML element where we want to display the text with the corresponding value from the array (dynamic_text class).
By doing this, we show a new item, sentence, or word from the array every 2 seconds.
Additionally, we add an if-condition to reset the i variable back to 0 if its value reaches the length of the array.
JavaScript
// changing the text every 2 second.
setInterval(() => {
change_text();
}, 2000);
function change_text() {
// Increment the i variable value by 1. We'll use as a index to get the array element.
i++;
// Adding the text or array element inside the element with class "dynamic_text" according to i variable value.
dynamic_text.innerHTML = text_array[i - 1];
// To repeat the array element when its reaches the last one.
if (i == text_array.length) {
i = 0;
}
}
So now the text text is automatically changes. But their is no animation to it. So let's add animation.
Step 4: Add Sliding Animation to Text Change.
Currently, the text changes without animation. To add a sliding animation, we need to style the dynamic_text class by setting the opacity to 0 and its left position to 90%. This will hide the element initially.
Since the element is positioned absolutely relative to the static text wrapped element (which is class="text"), setting the left position to 90% places it near the end of the static text.
When we want to show the text we make opacity 1 and left position to 100%. (position at the end of the static text by setting the left position to 100%). However, to create some space between the static and dynamic text, we add a right margin (see code for details).
The left position differenc is to slide the text while changing. For smooth animation we also add transition property.
CSS
.dynamic_text {
position: absolute;
font-weight: bold;
left: 90%;
opacity: 0;
transition: 0.5s;
}
After hiding the dynamic text, we need to make it visible when displaying a new text element in dynamic_text class. To achieve this, after updating the inner HTML of the dynamic_text element with the array element (based on the i variable), we change its styling. We set the opacity to 1 and the left position from 90% to 100%. This makes the text visible with a sliding animation.
JavaScript
// changing the text every 2 second.
setInterval(() => {
change_text();
}, 2000);
function change_text() {
// Increment the i variable value by 1. We'll use as a index to get the array element.
i++;
// Adding the text or array element inside the element with class "dynamic_text" according to i variable value.
dynamic_text.innerHTML = text_array[i - 1];
// Styling the dynamic text for sliding animation and displaying the text.
dynamic_text.style.opacity = "1";
dynamic_text.style.left = "100%";
// To repeat the array element when its reaches the last one.
if (i == text_array.length) {
i = 0;
}
}
However, this animation will not occur again for next or further text changes (every 2 seconds). To address this, we need to reset the styles back to opacity 0 and left position 90% for the dynamic_text element after a shorter duration with settimeout method (remember to set the timeout time less than the interval time) after 1 second. This way, the sliding animation will play for every text change.
See the code below for a complete implementation.
JavaScript
// changing the text every 2 second.
setInterval(() => {
change_text();
}, 2000);
function change_text() {
// Increment the i variable value by 1. We'll use as a index to get the array element.
i++;
// Adding the text or array element inside the element with class "dynamic_text" according to i variable value.
dynamic_text.innerHTML = text_array[i - 1];
// Styling the dynamic text for sliding animation and displaying the text.
dynamic_text.style.opacity = "1";
dynamic_text.style.left = "100%";
// Hiding the text after 1 second.
setTimeout(() => {
dynamic_text.style.opacity = "0";
dynamic_text.style.left = "90%";
}, 1000);
// To repeat the array element when its reaches the last one.
if (i == text_array.length) {
i = 0;
}
}
Output:
Final code:
This is how you can create a dynamically changing text animation using HTML, CSS, and JavaScript. If you have any questions or suggestions, feel free to write them in the comments section.
You may like:
- Text typing effect using JavaScript.
- How to display texts words one by one with floats up animation using JavaScript.
- How to display text or string characters one by one with float up animation (wave effect) using JavaScript.
- How to create the input field with dynaimc placeholder using HTML, CSS and JavaScript.
Share your thoughts.