Animated List

<!-- Animated List · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="anl-root"><ul class="anl-stack"></ul></div>
</div>

/* Animated List · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.anl-root{position:absolute;inset:0;background:#0a0a10;padding:14px;overflow:hidden}
.anl-stack{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.anl-item{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:#15151d;border:1px solid #26262f;color:#e7e7ef;transform-origin:top;animation:anl-pop .45s cubic-bezier(.22,1,.36,1) both}
.anl-item b{font:600 14px 'Switzer',sans-serif}.anl-item p{margin:2px 0 0;font:12px 'Switzer',sans-serif;color:#9b9ba8}.anl-ico{font-size:20px}
@keyframes anl-pop{from{transform:translateY(120%) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

// Animated List · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var stack=root.querySelector('.anl-stack');var data=[['\uD83D\uDCAC','Nieuw bericht','Iemand reageerde'],['\u2B50','Nieuwe ster','Repo gestard'],['\uD83D\uDCB8','Betaling','\u20AC129 ontvangen'],['\uD83D\uDE80','Deploy','Build geslaagd']];var i=0;
function add(){var d=data[i%data.length];var li=document.createElement('li');li.className='anl-item';li.innerHTML='<span class="anl-ico">'+d[0]+'</span><div><b>'+d[1]+'</b><p>'+d[2]+'</p></div>';stack.prepend(li);while(stack.children.length>4)stack.lastElementChild.remove();i++;}
add();setInterval(add,1800);
}
init(document.querySelector('.jouw-container'));