Vertical Timeline

<!-- Vertical Timeline · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vtl"><div class="vtl-item"><span class="vtl-node"></span><div class="vtl-card"><b>Kickoff</b><p>Project gestart en scope bepaald.</p></div></div><div class="vtl-item"><span class="vtl-node"></span><div class="vtl-card"><b>Design</b><p>UI-richtingen uitgewerkt.</p></div></div><div class="vtl-item"><span class="vtl-node"></span><div class="vtl-card"><b>Build</b><p>Componenten gebouwd en getest.</p></div></div><div class="vtl-item"><span class="vtl-node"></span><div class="vtl-card"><b>Launch</b><p>Live gezet voor klanten.</p></div></div></div>
</div>

/* Vertical Timeline · NedDev · eigen werk. */
.vtl{position:relative;width:340px;padding-left:26px;font-family:'Switzer',sans-serif}
.vtl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:rgba(10,10,10,.12)}
.vtl-item{position:relative;margin-bottom:14px;opacity:0;transform:translateX(12px);transition:.5s}
.vtl-item.in{opacity:1;transform:none}
.vtl-node{position:absolute;left:-26px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #F5480F}
.vtl-card{background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:12px;padding:11px 14px}
.vtl-card b{font-size:13px;color:#0a0a0a}.vtl-card p{margin:3px 0 0;font-size:12px;color:rgba(10,10,10,.6)}

// Vertical Timeline · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.vtl')||root;var items=[].slice.call(root.querySelectorAll('.vtl-item'));var io=new IntersectionObserver(function(es){es.forEach(function(en){if(en.isIntersecting){var i=items.indexOf(en.target);setTimeout(function(){en.target.classList.add('in');},i*120);io.unobserve(en.target);}});},{threshold:.3});items.forEach(function(i){io.observe(i);});
}
init(document.querySelector('.jouw-container'));