Text scramble

<!-- Page settings → Before </body> tag --> <script> document.addEventListener("DOMContentLoaded", () => { gsap.registerPlugin(ScrollTrigger); const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&$@/\\"; const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches; function scramble(el, duration = 1.1, delay = 0) { // Cache the real string ONCE. After the first frame textContent is noise, // so reading it again would scramble the scramble. const text = el.dataset.text ?? el.textContent; el.dataset.text = text; if (!el.getAttribute("aria-label")) el.setAttribute("aria-label", text); if (reduced) { el.textContent = text; return; } const n = text.length; const state = { p: 0 }; return gsap.to(state, { p: 1, duration, delay, ease: "none", // a linear decode; easing makes it feel broken overwrite: true, // a second hover replaces, never stacks onUpdate() { let out = ""; for (let i = 0; i < n; i++) { // Each character settles a little later than the one before it, // which is what makes it read left-to-right instead of as static. const settleAt = (i / n) * 0.65; if (state.p >= settleAt + 0.35) out += text[i]; else if (text[i] === " ") out += " "; // keep word shape else out += CHARS[(Math.random() * CHARS.length) | 0]; } el.textContent = out; }, onComplete() { el.textContent = text; } // never end on a random frame }); } document.querySelectorAll('[data-scramble="load"]').forEach((el, i) => scramble(el, 1.3, 0.15 + i * 0.12)); document.querySelectorAll('[data-scramble="scroll"]').forEach(el => ScrollTrigger.create({ trigger: el, start: "top 85%", once: true, onEnter: () => scramble(el, 0.9) })); document.querySelectorAll('[data-scramble="hover"]').forEach(el => { const row = el.closest(".service_row") || el; row.addEventListener("mouseenter", () => scramble(el, 0.55)); }); }); </script>