The following animation works on Codepen, but not on WordPress.
The event listener doesn’t detect that the first sentence animation has finished, to start the second sentence appearance.
It also doesn’t run here. Not sure what is the issue, but the animation stops after the first sentence has appeared.
const SENTENCE_DELAY = 1000;
const FIRST_SENTENCE_DELAY = 1000;
let sentencesForFading = document.querySelectorAll('.faded-sentence');
let timer = null;
//setup auto advance to next sentence after the transition completes
sentencesForFading.forEach(sentence=>{
sentence.addEventListener('transitionend', startNextSentenceAnimation);
});
function startSentence(sentenceElement){
console.log(sentenceElement);
if(!sentenceElement){
return;
}
sentenceElement.classList.add('faded-activated');
}
startSentence(document.querySelector('.faded-sentence'));
//either show the next sentence, or start the sequence from the start
function startNextSentenceAnimation(e){
const nextSentence = e.target.nextElementSibling;
if( nextSentence ){
timer = setTimeout(()=>{ e.target.removeEventListener('transitionend', startNextSentenceAnimation);
e.target.classList.remove('faded-activated');
nextSentence.classList.add('faded-activated');
}, SENTENCE_DELAY)
} else {
e.target.blur();
clearTimeout(timer);
console.log('last sentence complete');
document.querySelectorAll('.faded-sentence').forEach(sentence=>{
timer = setTimeout(()=>{
sentence.classList.remove('faded-activated');
sentence.addEventListener('transitionend', startNextSentenceAnimation);
}, SENTENCE_DELAY)
});
timer = setTimeout(()=>{
startSentence(document.querySelector('.faded-sentence'));
}, SENTENCE_DELAY)
}
}.anim-container{
display:grid;
}
.faded-sentence {
grid-column: 1;
grid-row: 1;
transform:translateY(40%);
opacity:0;
}
.faded-activated {
display:inline-block;
transition:opacity .2s, transform .3s;
opacity:1;
transform:translateY(0);
}We Work With IVD & Life Science Tools Companies Who
<div class="anim-container">
<span class="faded-sentence">Need to Elevate Their Strategic Plan.</span>
<span class="faded-sentence">Require a Comprehensive Business Development Roadmap.</span>
<span class="faded-sentence">Need to Decide What Market Applications to Focus On.</span>
<span class="faded-sentence">Aspire to Successfully Enter New Markets.</span>
<span class="faded-sentence">Want to Establish a Robust Partnership Business.</span>
<span class="faded-sentence">Want a Strategy to Increase Their Company Valuation.</span>
</div>`