Word Rotate

<!-- Word Rotate · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="wrot-root"><span class="wrot-pre">Bouw&nbsp;</span><span class="wrot" data-words="sneller,bolder,slimmer,beter">sneller</span></div>
</div>

/* Word Rotate · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.wrot-root{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10;font:800 24px 'Boldonse','Switzer',sans-serif;color:#fff}
.wrot{display:inline-block;color:#F5480F;will-change:transform,opacity}
.wrot.is-out{animation:wrot-out .4s ease forwards}.wrot.is-in{animation:wrot-in .4s ease forwards}
@keyframes wrot-out{to{transform:translateY(-100%);opacity:0}}@keyframes wrot-in{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}

// Word Rotate · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var el=root.querySelector('.wrot');var words=(el.dataset.words||'').split(',').map(function(s){return s.trim();}).filter(Boolean);if(words.length<2)return;var i=0;
setInterval(function(){el.classList.add('is-out');el.addEventListener('animationend',function done(){el.removeEventListener('animationend',done);i=(i+1)%words.length;el.textContent=words[i];el.classList.remove('is-out');el.classList.add('is-in');el.addEventListener('animationend',function(){el.classList.remove('is-in');},{once:true});},{once:true});},2200);
}
init(document.querySelector('.jouw-container'));