AW-Flow — Split StaggerAW-Flow — Split Stagger

<!-- AW-Flow — Split Stagger · класс элемента: awf-text-split -->
<style>
.awf-text-split {
  --awf-distance: 40px;
  --awf-rotate: 8deg;
  --awf-duration: 700ms;
  --awf-stagger: 22ms;
  --awf-delay: 0ms;
  --awf-ease: cubic-bezier(0.33, 1, 0.68, 1);
}
.awf-text-split:not(.awf-ready) { opacity: 0; }
.awf-text-split .awf-w { display: inline-block; white-space: nowrap; }
.awf-text-split .awf-p {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, calc(var(--awf-distance) * 1), 0) rotate(calc(var(--awf-rotate) * 1));
  transform-origin: 0 100%;
  transition: opacity calc(var(--awf-duration) * 0.6) linear, transform var(--awf-duration) var(--awf-ease);
  transition-delay: calc(var(--awf-delay) + var(--i, 0) * var(--awf-stagger));
}
.awf-text-split.awf-in .awf-p { opacity: 1; transform: none; }
.awf-text-split.awf-off,
.awf-text-split.awf-off * { transition: none !important; }
/* уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .awf-text-split, .awf-text-split .awf-p { opacity: 1 !important; transform: none !important; transition: none !important; }
}
</style>
<script>
(function () {
  var CLS = 'awf-text-split';
  var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
  function split(el, mode) {
    var root = el.querySelector('.tn-atom') || el;
    var parts = [];
    (function walk(node) {
      [].slice.call(node.childNodes).forEach(function (n) {
        if (n.nodeType === 1) { if (n.tagName !== 'BR') walk(n); return; }
        if (n.nodeType !== 3 || !n.textContent.trim()) return;
        var frag = document.createDocumentFragment();
        n.textContent.split(/(\s+)/).forEach(function (chunk) {
          if (!chunk) return;
          if (/^\s+$/.test(chunk)) { frag.appendChild(document.createTextNode(chunk)); return; }
          var w = document.createElement('span');
          w.className = 'awf-w';
          if (mode === 'chars') {
            Array.from(chunk).forEach(function (ch) {
              var c = document.createElement('span');
              c.className = 'awf-p'; c.textContent = ch; c._ch = ch;
              w.appendChild(c); parts.push(c);
            });
          } else if (mode === 'mask') {
            var inner = document.createElement('span');
            inner.className = 'awf-p'; inner.textContent = chunk;
            w.appendChild(inner); parts.push(inner);
          } else {
            w.className += ' awf-p'; w.textContent = chunk; parts.push(w);
          }
          frag.appendChild(w);
        });
        node.replaceChild(frag, n);
      });
    })(root);
    parts.forEach(function (p, i) { p.style.setProperty('--i', i); });
    return parts;
  }
  function prepare(el) {
    split(el, 'chars');
  }
  function play(el) {
    el.classList.add('awf-in');
  }
  function stop(el) {
    // мгновенный сброс в начальное состояние, без обратной анимации
    el.classList.add('awf-off');
    el.classList.remove('awf-in');
    void el.offsetWidth;
    el.classList.remove('awf-off');
  }
  function init() {
    var els = [].slice.call(document.querySelectorAll('.' + CLS)).filter(function (el) {
      if (el.getAttribute('data-awf')) return false;
      el.setAttribute('data-awf', '1');
      prepare(el);
      el.classList.add('awf-ready');
      return true;
    });
    if (reduce) { els.forEach(play); return; }
    if (!('IntersectionObserver' in window)) { els.forEach(play); return; }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) { play(e.target); io.unobserve(e.target); }
      });
    }, { threshold: 0.2 });
    els.forEach(function (el) { io.observe(el); });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
  else init();
})();
</script>