LCP-Safe Editorial Headline Split Reveal (Zero Lighthouse Penalty)

You are a performance-obsessed frontend engineer. Write a line-by-line reveal for a hero H1 that keeps a 100 Lighthouse Performance score.

Why it usually fails: animations that start the headline at opacity: 0, visibility: hidden or fully masked out of view push Largest Contentful Paint to the END of the animation, because Chrome ignores invisible elements when it records LCP.

Requirements:
- Never hide the H1 in CSS or server HTML. The un-split headline must paint on first render.
- Split by lines (GSAP SplitText with autoSplit, or the platform equivalent) and re-split cleanly on font swap or resize without a jump.
- Animate FROM yPercent 35 and opacity 0.01 (not 0): 0.01 still counts as painted for LCP. Duration 0.8s, ease "expo.out", stagger 0.08s.
- Wait for document.fonts.ready before splitting so the line breaks match the final font.
- Keep the accessible name intact: screen readers must read one sentence, not fragments.
- Reduced motion: skip the animation entirely.
- Only run the entrance when the headline is in the first viewport on load; for headings further down, trigger once on scroll.
- No layout shift: each line keeps its natural height, nothing is absolutely positioned.

Deliver the markup, the minimal CSS and the script, then explain in two sentences how to verify LCP in Chrome DevTools (Performance panel, LCP marker).

Target platform: Webflow.
- Build the structure as native Webflow Designer elements with Client-First class names (section_[name], [name]_component, [name]_item). No div soup from an HTML embed unless I ask for one.
- Hook every behaviour to custom attributes (data-gsap="…"), never to class names, so designers can restyle without breaking the script.
- Load GSAP through Webflow's built-in GSAP integration (Site settings) or the jsDelivr CDN tags, and put the init script in Page settings → Before </body> tag, wrapped in Webflow.push(() => { … }).
- Say which parts go in Designer styles, which in a page-head <style>, and which in the body script.
- Add data-gsap="split-lines" to any heading in the Designer; one script handles every heading on the site, so it can live in Site settings custom code.
Motion timing: "Editorial". Use a base duration of 0.8s, ease "expo.out" (CSS: cubic-bezier(0.16, 1, 0.3, 1)), stagger 0.08s, scrub smoothing 0.8, and springs of stiffness 220 / damping 22, everywhere a duration, ease or spring appears.

<!-- Designer: add the attribute data-gsap="split-lines" to the H1 (or any heading). -->

<!-- Site settings > Custom code > Footer (or Page settings > Before </body>) -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/SplitText.min.js"></script>
<script>
  window.Webflow ||= [];
  window.Webflow.push(() => {
    gsap.registerPlugin(ScrollTrigger, SplitText);
    gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
      document.fonts.ready.then(() => {
        document.querySelectorAll('[data-gsap="split-lines"]').forEach((el) => {
          const onScreen = el.getBoundingClientRect().top < innerHeight;
          SplitText.create(el, {
            type: "lines",
            autoSplit: true,
            onSplit: (self) =>
              gsap.from(self.lines, {
                yPercent: 35,
                opacity: 0.01, // still "painted" for LCP; 0 is not
                duration: 0.8,
                ease: "expo.out",
                stagger: 0.08,
                scrollTrigger: onScreen ? undefined : { trigger: el, start: "top 85%", once: true },
              }),
          });
        });
      });
    });
  });
</script>