OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Animation works on Codepen, but not on Wordpress

  • Thread starter Thread starter Aidar Amrekulov
  • Start date Start date
A

Aidar Amrekulov

Guest
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.


Code:
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)
    }
}

Code:
.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);
}

Code:
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>

`

<p>The following animation works on Codepen, but not on Wordpress.</p>
<p>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.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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)
}
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>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></code></pre>
</div>
</div>
</p>
<p>`</p>
 

Latest posts

Top