Scramble on Scroll

<!-- Scramble on Scroll · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<div class="jouw-container">
<div class="tss-wrap"><div class="tss-line" data-t="DECODING">DECODING</div><div class="tss-line" data-t="THE FUTURE">THE FUTURE</div><div class="tss-line" data-t="OF MOTION">OF MOTION</div></div>
</div>

/* Scramble on Scroll · NedDev · eigen werk. */
.tss-wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.05em;padding:0 8%;background:#0a0a0a;font-family:'JetBrains Mono',monospace}
.tss-line{color:#fff;font-weight:800;font-size:clamp(22px,6.5vw,52px);letter-spacing:.02em;line-height:1.05}.tss-line span.on{color:#F5480F}

// Scramble on Scroll · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var lines=root.querySelectorAll('.tss-line');var chars='ABCDEFGHIJKLMNOPQRSTUVWXYZ#%&@';var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
function scramble(el,p){var t=el.dataset.t;var out='';for(var i=0;i<t.length;i++){var rev=i/t.length;if(p>=rev){out+='<span class=on>'+t[i]+'</span>';}else if(t[i]===' ')out+=' ';else out+=chars[Math.floor(Math.random()*chars.length)];}el.innerHTML=out;}
if(rm){lines.forEach(function(l){l.textContent=l.dataset.t;});return;}
function run(p){lines.forEach(function(l){scramble(l,p);});}
if(window.ScrollTrigger&&window.gsap){window.ScrollTrigger.create({trigger:root,start:'top 85%',end:'bottom 40%',scrub:true,onUpdate:function(self){run(self.progress);}});}else{var i=0;var iv=setInterval(function(){i+=.04;run(Math.min(i,1));if(i>=1)clearInterval(iv);},40);}
}
init(document.querySelector('.jouw-container'));