Shutter Reveal

The text is cut into thin horizontal strips that slide together from alternate sides, like a shutter closing into the finished words. Loop it and the strips carry on out the other side.

Now showing

How to use it

Paste the snippet just before </head>.
Add data-shutter-reveal to a heading or short line of text.

Options

Add any of these attributes to the same element.

`data-strips`	How many strips to cut the text into. Default 8.
`data-loop`	Slide together, hold, slide on out and in again.
`data-hold`	How long the text stays before leaving, when looping. Default 1800 ms.
`data-duration`	How long each strip takes to slide in. Default 900 ms.
`data-stagger`	Gap between strips, top to bottom. Default 55 ms.
`data-delay`	Wait before the first strip. Default 0 ms.

The strips appear from the edges of the text itself, so nothing slides across the rest of the page.

1 · Snippet

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/anime.umd.min.js"></script>
<script>
  (function () {
    // Shutter Reveal: the text is cut into thin horizontal strips that slide
    // together from alternate sides, like a venetian shutter closing into the
    // finished words.
    // Usage: <h1 data-shutter-reveal>Shutter</h1>
    // Optional: data-strips (how many strips; default 8), data-loop (strips
    // carry on out the other side and slide in again), data-hold (ms to stay
    // before leaving), data-duration (ms per strip), data-stagger (ms between
    // strips), data-delay (ms before starting).
    var DEFAULTS = { strips: 8, duration: 900, stagger: 55, delay: 0, hold: 1800 };

    var css =
      // The box clips the strips to the text, so they appear from its edges.
      '.shr-box{display:inline-block;position:relative;vertical-align:top;max-width:100%;' +
      'clip-path:inset(-0.3em -0.12em)}' +
      '.shr-ghost{visibility:hidden}' +
      '.shr-strip{position:absolute;left:0;top:0;width:100%;will-change:transform}';
    var style = document.createElement('style');
    style.textContent = css;
    document.head.appendChild(style);

    function reduced() {
      return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    }

    function split(el) {
      var text = el.textContent.replace(/\s+/g, ' ').trim();
      var n = Math.max(2, Math.min(40, Math.round(+el.dataset.strips || DEFAULTS.strips)));
      el.setAttribute('aria-label', text);
      el.textContent = '';
      var box = document.createElement('span');
      box.className = 'shr-box';
      box.setAttribute('aria-hidden', 'true');
      var ghost = document.createElement('span');
      ghost.className = 'shr-ghost';
      ghost.textContent = text;
      box.appendChild(ghost);
      var strips = [];
      for (var i = 0; i < n; i++) {
        var s = document.createElement('span');
        s.className = 'shr-strip';
        s.textContent = text;
        // Each strip shows one slice of the text; neighbours overlap by half a
        // pixel so no seams show, and the outer ones reach past the line box
        // for ascenders and descenders.
        var top = i === 0 ? '-0.3em' : 'calc(' + (i * 100 / n) + '% - 0.5px)';
        var bottom = i === n - 1 ? '-0.3em' : 'calc(' + ((n - i - 1) * 100 / n) + '% - 0.5px)';
        s.style.clipPath = 'inset(' + top + ' -0.12em ' + bottom + ' -0.12em)';
        box.appendChild(s);
        strips.push(s);
      }
      el.appendChild(box);
      return strips;
    }

    function side(i) { return i % 2 ? 1 : -1; }

    function play(el, strips) {
      var d = el.dataset;
      var loop = d.loop !== undefined && d.loop !== 'false';
      var duration = +d.duration || DEFAULTS.duration;
      var stagger = d.stagger !== undefined ? +d.stagger : DEFAULTS.stagger;

      var tl = anime.createTimeline({ loop: loop, loopDelay: 300, delay: +d.delay || DEFAULTS.delay });
      tl.add(strips, {
        x: { from: function (t, i) { return side(i) * 110 + '%'; }, to: '0%' },
        duration: duration,
        ease: 'outExpo',
        delay: anime.stagger(stagger)
      });
      if (loop) {
        // Carry on through and out the opposite side.
        tl.add(strips, {
          x: function (t, i) { return -side(i) * 110 + '%'; },
          duration: duration * 0.6,
          ease: 'in(3)',
          delay: anime.stagger(stagger * 0.6)
        }, '+=' + (+d.hold || DEFAULTS.hold));
      }
    }

    function init() {
      var io = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
          if (!e.isIntersecting) return;
          io.unobserve(e.target);
          play(e.target, e.target._shrStrips);
        });
      }, { threshold: 0.2 });
      document.querySelectorAll('[data-shutter-reveal]').forEach(function (el) {
        if (el._shrStrips) return;
        var strips = split(el);
        el._shrStrips = strips;
        if (reduced()) return;
        strips.forEach(function (s, i) { anime.utils.set(s, { x: side(i) * 110 + '%' }); });
        io.observe(el);
      });
    }

    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init);
    else init();
  })();
</script>

2 · Your HTML

<h1 data-shutter-reveal>Now showing</h1>

<!-- or, with more, thinner strips: -->
<h1 data-shutter-reveal data-strips="14">Now showing</h1>