My website features a typewriter effect, but I want the animation to match the length of the words exactly. I attempted using JavaScript variables in CSS, but unfortunately, it's not functioning properly. Could someone please advise me on how to remedy this issue?
const text = document.getElementById("second-text");
const textLoad = () => {
setTimeout(() => {
text.textContent = "Freelancer";
let Steps = 10;
0); setTimeout(() => {
text.textContent = "Editor";
let Steps = 6;
4000); setTimeout(() => {
text.textContent = "Coder";
let Steps = 5;
8000);
}
textLoad(); setInterval(textLoad, 12000);>body {
background: black;
margin: 0;
padding: 0;
font-family: "Poppins";
display: grid;
place-items: center;
height: 100vh;
width: 100%;
}
.container {
width: 300px;
overflow: hidden;
}
.container .text {
position: relative;
color: white;
font-size: 30px;
font-weight: 600;
align-items: start;
}
.container .first-text {
color: white;
}
.container .second-text::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
border-left: 2px solid #4070f4;
animation: animate 4s steps(var(--Steps)) infinite;
}
@keyframes animate {
0% {
left: 0%;
}
40%,
60% {
left: calc(100% + 4px);
}
100% {
left: 0%;
}
}<div class="container">
<span class="text first-text">Hi! I am </span>
<span class="text second-text" id="second-text">Freelancer</span>
</div>