Schakelaar met tekstmorph Nieuw

<!-- Schakelaar met tekstmorph · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ttm"><div class="ttm__card"><div class="ttm__hd"><span class="ttm__kk">Website-onderhoud · Basis</span><span class="ttm__badge">2 maanden gratis</span></div>
<div class="ttm__row"><button class="ttm__sw" type="button" role="switch" aria-checked="false" aria-label="Jaarlijks betalen"><span class="ttm__kn"></span></button><span class="ttm__lbl">Betaal <span class="ttm__m">maandelijks</span></span></div>
<div class="ttm__price"><span class="ttm__eur">€</span><span class="ttm__m ttm__num">49</span><span class="ttm__m ttm__per">per maand</span></div>
<p class="ttm__fine">Updates, back-ups en elke maand 1 uur wijzigingen. Bedragen excl. btw.</p></div></div>
</div>

/* Schakelaar met tekstmorph · NedDev · eigen werk. */
.ttm{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;display:grid;place-items:center;padding:14px}
.ttm__card{width:min(300px,100%);background:#fff;border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:11px}
.ttm__hd{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ttm__kk{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6762}
.ttm__badge{font:600 9.5px 'JetBrains Mono',monospace;background:#F5480F;color:#fff;padding:3px 7px;border-radius:999px;white-space:nowrap;opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .2s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.ttm.is-year .ttm__badge{opacity:1;transform:none}
.ttm__row{display:flex;align-items:center;gap:10px}
.ttm__sw{appearance:none;position:relative;width:44px;height:24px;border:0;border-radius:999px;background:#dcd8d2;cursor:pointer;transition:background .3s;flex:none}
.ttm__sw[aria-checked="true"]{background:#0a0a0a}.ttm__sw:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.ttm__kn{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:999px;background:#fff;transition:transform .4s cubic-bezier(.5,1.4,.5,1)}
.ttm__sw[aria-checked="true"] .ttm__kn{transform:translateX(20px);background:#F5480F}
.ttm__sw.is-squish .ttm__kn{animation:ttm-sq .4s ease}
@keyframes ttm-sq{40%{width:26px}}
.ttm__sw[aria-checked="true"].is-squish .ttm__kn{animation:ttm-sq2 .4s ease}
@keyframes ttm-sq2{40%{width:26px;margin-left:-8px}}
.ttm__lbl{font-size:13px;font-weight:500;color:#57534e}
.ttm__m{position:relative;display:inline-flex;white-space:pre}
.ttm__lbl .ttm__m{color:#0a0a0a;font-weight:700}
.ttm__ch{display:inline-block}
.ttm__in{animation:ttm-in .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes ttm-in{from{opacity:0;transform:translateY(45%);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.ttm__price{display:flex;align-items:baseline;gap:4px}
.ttm__eur{font-size:18px;font-weight:600}
.ttm__num{font:800 40px/1 'Switzer',sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ttm__per{font-size:12.5px;color:#6b6762;margin-left:2px}
.ttm__fine{margin:0;font-size:11px;line-height:1.45;color:#6b6762;border-top:1px solid #eeebe7;padding-top:9px}
@media (prefers-reduced-motion:reduce){.ttm__in{animation:none}.ttm__kn,.ttm__badge{transition:none}}

// Schakelaar met tekstmorph · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.ttm')||root;
var sw=root.querySelector('.ttm__sw'),ms=[].slice.call(root.querySelectorAll('.ttm__m'));
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,year=false,touched=false;
var V={m:['maandelijks','49','per maand'],y:['jaarlijks','490','per jaar']};
function sp(c,cls){var s=document.createElement('span');s.className='ttm__ch'+(cls?' '+cls:'');s.textContent=c===' '?'\u00a0':c;return s;}
ms.forEach(function(el){var v=el.textContent;el.textContent='';for(var i=0;i<v.length;i++)el.appendChild(sp(v[i]));el.setAttribute('data-v',v);});
function morph(el,to){var from=el.getAttribute('data-v');if(from===to)return;[].slice.call(el.querySelectorAll('.ttm__gone')).forEach(function(c){c.remove();});[].slice.call(el.children).forEach(function(c){c.getAnimations().forEach(function(x){x.finish();});c.classList.remove('ttm__in');});var a=[].slice.call(el.children);
var p=0;while(p<from.length&&p<to.length&&from[p]===to[p])p++;var s=0;while(s<from.length-p&&s<to.length-p&&from[from.length-1-s]===to[to.length-1-s])s++;
var first=a.map(function(c){return c.offsetLeft;});var olds=a.slice(p,from.length-s),kept=a.slice(0,p).concat(a.slice(from.length-s));
if(rm){olds.forEach(function(c){c.remove();});}else olds.forEach(function(c){var l=c.offsetLeft;c.classList.add('ttm__gone');c.style.position='absolute';c.style.left=l+'px';c.animate([{opacity:1,transform:'none'},{opacity:0,transform:'translateY(-45%)',filter:'blur(2px)'}],{duration:240,easing:'ease-in',fill:'forwards'}).onfinish=function(){c.remove();};});
var ref=a[from.length-s]||null;for(var i=p;i<to.length-s;i++){var n=sp(to[i],rm?'':'ttm__in');n.style.animationDelay=(80+(i-p)*28)+'ms';el.insertBefore(n,ref);}
if(!rm)kept.forEach(function(c){var dx=first[a.indexOf(c)]-c.offsetLeft;if(dx)c.animate([{transform:'translateX('+dx+'px)'},{transform:'none'}],{duration:420,easing:'cubic-bezier(.3,.7,.2,1)'});});
el.setAttribute('data-v',to);}
function set(y){year=y;sw.setAttribute('aria-checked',y?'true':'false');root.classList.toggle('is-year',y);sw.classList.remove('is-squish');void sw.offsetWidth;sw.classList.add('is-squish');var v=y?V.y:V.m;ms.forEach(function(el,i){morph(el,v[i]);});}
sw.addEventListener('click',function(){touched=true;set(!year);});
if(!rm)(function loop(){setTimeout(function(){if(touched)return;set(!year);loop();},year?2800:1100);})();
}
init(document.querySelector('.jouw-container'));