Letters trekken samen New

A name or heading arrives with wide letter spacing and a soft blur and contracts to normal tracking in just over a second; the line below follows slightly later. Plays once on entering the viewport. For the name of a restaurant, hotel or salon in the hero; without JS or with reduced motion everything is shown in place.

Het Veerhuis

Brasserie aan de Lek in Schoonhoven. Keuken open van 12.00 tot 21.30 uur.

How to use it

Paste the HTML where the text animations should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Letters trekken samen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="lai">
  <h3 class="lai__h">Het Veerhuis</h3>
  <p class="lai__s">Brasserie aan de Lek in Schoonhoven. Keuken open van 12.00 tot 21.30 uur.</p>
  <button class="lai__knop" type="button">Opnieuw afspelen</button>
</div>
</div>

/* Letters trekken samen · NedDev · eigen werk. */
.lai{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 18px;overflow:hidden;font-family:'Switzer',system-ui,sans-serif;color:#fff;background:#0a0a0a;text-align:center}
.lai__h{margin:0;max-width:100%;white-space:nowrap;font-weight:700;font-size:clamp(34px,12cqw,54px);line-height:1;letter-spacing:-.025em}
.lai__s{margin:0;max-width:34ch;font-size:13px;line-height:1.45;color:#cfcfcf}
.lai__knop{margin-top:6px;min-height:28px;padding:5px 10px;border:1px solid rgba(255,255,255,.4);border-radius:4px;background:transparent;color:#fff;font:500 12px/1 'Switzer',system-ui,sans-serif;cursor:pointer}
.lai__knop:hover{border-color:#fff}
.lai__knop:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.lai.is-js .lai__h,.lai.is-js .lai__s{opacity:0}
.lai.is-js.is-in .lai__h{animation:lai-h 1.25s cubic-bezier(.2,.7,.2,1) both}
.lai.is-js.is-in .lai__s{animation:lai-s 1s cubic-bezier(.2,.7,.2,1) .4s both}
@keyframes lai-h{from{letter-spacing:.45em;opacity:0;filter:blur(8px)}55%{opacity:1}to{letter-spacing:-.025em;opacity:1;filter:blur(0)}}
@keyframes lai-s{from{letter-spacing:.3em;opacity:0}to{letter-spacing:0;opacity:1}}
@media (prefers-reduced-motion:reduce){.lai .lai__h,.lai .lai__s{opacity:1!important;animation:none!important}.lai__knop{display:none}}

// Letters trekken samen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.lai'); if (!w) return;
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    w.classList.add('is-js');
    const speel = () => { w.classList.remove('is-in'); void w.offsetWidth; w.classList.add('is-in'); };
    if ('IntersectionObserver' in window) {
      const io = new IntersectionObserver(e => { if (e[0].isIntersecting) { speel(); io.disconnect(); } }, { threshold: .5 });
      io.observe(w);
    } else w.classList.add('is-in');
    w.querySelector('.lai__knop').addEventListener('click', speel);
}
init(document.querySelector('.jouw-container'));

More text animations

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →