Webflow text reveal on scroll (blinds effect)

What you receive in Webflow

• 11 native elements and 7 classes.
• Breakpoints: mobile landscape (767px).
• 2 Embed elements keep the CSS or script that Webflow cannot express. To edit an Embed, you must have a paid Webflow site plan.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="bl">
  <div class="bl-inner">
    <p class="bl-eyebrow">Our approach</p>
    <h2 class="bl-title">
      <span class="bl-line">Fewer meetings.</span>
      <span class="bl-line">Clearer decisions.</span>
      <span class="bl-line bl-accent">Better work.</span>
    </h2>
    <p class="bl-text">Each line opens like a window blind as it scrolls into view. Scroll back up and down to replay it.</p>
  </div>
</section>
<style>
@property --bl-open { syntax: "<length>"; inherits: false; initial-value: 14px; }
.bl { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #f5f3ee; color: #1c1917; padding: 128px 24px; }
.bl-inner { max-width: 980px; margin: 0 auto; }
.bl-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #78716c; margin: 0 0 24px; }
.bl-title { font-size: 84px; font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; margin: 0; }
.bl-line { display: block; }
.bl-accent { color: #c2410c; }
.bl-text { max-width: 520px; font-size: 18px; line-height: 1.6; color: #57534e; margin: 40px 0 0; }
.bl-js .bl-line { --bl-open: 0px; -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0, #000 var(--bl-open), transparent var(--bl-open), transparent 14px); mask-image: repeating-linear-gradient(to bottom, #000 0, #000 var(--bl-open), transparent var(--bl-open), transparent 14px); transition: --bl-open 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
.bl-js .bl-line.is-in { --bl-open: 14px; }
.bl-js .bl-line:nth-child(2) { transition-delay: 0.12s; }
.bl-js .bl-line:nth-child(3) { transition-delay: 0.24s; }
@media (max-width: 767px) { .bl { padding: 88px 20px; } .bl-title { font-size: 48px; } }
@media (prefers-reduced-motion: reduce) { .bl-js .bl-line { --bl-open: 14px; transition: none; } }
</style>
<script>
(function () {
  var roots = document.querySelectorAll(".bl");
  if (!roots.length || !("IntersectionObserver" in window)) return;
  document.documentElement.classList.add("bl-js");
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) { e.target.classList.toggle("is-in", e.isIntersecting); });
  }, { threshold: 0.4 });
  roots.forEach(function (r) { r.querySelectorAll(".bl-line").forEach(function (l) { io.observe(l); }); });
})();
</script>