I wrote a function that breaks down each letter in a paragraph to create a typing effect. However, after taking a break for a few days, I noticed that the effect was now the opposite – the letters were disappearing. To solve this, I decided to animate the paragraph letter by letter to achieve a typewriting effect. Initially, everything worked perfectly, but then I updated the bootstrap version and the function started behaving incorrectly. Now, when I load the web page, the paragraph gradually fades away. What could be causing this issue? I have included the code below. Thank you in advance!
<pre>
index.html
</pre>
<div class="id">
<h1 class="title">
Hot Beans Coffee Shop
</h1>
<p class="subtitle">
"Born out of unique appreciation for coffee"
</p>
<script src="./app.js"></script>
</div>
<pre>
app.js
</pre>
const text= document.querySelector(".id.subtitle");
const strText=text.textContent;
const splitText= strText.split("");
text.textContent = "";
for ( let i=0 ; i<splitText.length; i++){
text.innerHTML+="<span>" + splitText[i] + "</span>";
}
let char=0;
let timer=setInterval(onTick, 50);
function onTick(){
const span=text.querySelectorAll("span")[char];
span.classList.add("fade");
char++;
if(char === splitText.length){
complete();
return;
}
}
function complete(){
clearInterval(timer);
timer=null;
}
<pre>
app.js
</pre>
span{
opacity: 0;
transition: all 0.3 s ease;
}
span.fade{
opacity: 1;
}