The heading that isn't there yet

Nearly every text reveal animation works the same way. Split the heading into lines, move each line out of view, then slide them back in on a stagger. It looks good, it takes about fifteen lines of code, and there is a version of it in every animation library.

It also has a first step people skim past: the heading starts hidden.

It has to. If the text painted first and the script split it a moment later, you would see the finished heading, then a flicker as it got torn into lines and thrown offscreen, then the animation. So the markup ships with visibility: hidden and the script turns it back on once it has the lines ready.

That one line changes what your page is.

What you actually shipped

Before: a heading in the HTML that paints as soon as the HTML arrives.

After: a heading that paints once the bundle has downloaded, parsed, hydrated, and — if you split by line — once the webfont has loaded, because line breaks depend on glyph widths. Four things in sequence, any of which can be slow, and one of which can fail outright.

If that heading is the biggest text on the page, it is probably your Largest Contentful Paint element. Hidden text is not an LCP candidate; the browser doesn't start the clock until something renders. So LCP now waits on your animation framework. You didn't make the page slower to load, but you made it slower to appear, which is the part a person experiences.

The failure mode is worse than the slowness. If the chunk 404s after a bad deploy, if a corporate proxy strips it, if the user is on a browser that chokes on something in the bundle — the text is in the DOM, the page looks loaded, and the headline is simply blank. No error, nothing in the console the user will see. The page is broken in the one place that explains what it is.

What it doesn't break

Worth being precise, because this gets overstated: the text is still in the HTML. Crawlers read it. Screen readers that walk the accessibility tree before the script runs will not announce visibility: hidden content, but the common case — reader and page loading together — is fine. This is not an SEO problem, and it is not usually an accessibility problem. It is a perceived performance and resilience problem.

Choosing deliberately

I don't think the answer is never animating text. It's knowing which of these you're buying.

Keep the hide, above the fold, when the page is already script-dependent. If the hero has a canvas or a WebGL scene next to it, the heading was never going to be the thing that made the page feel ready. The reveal costs you little there.

Don't hide below the fold. A section heading halfway down the page gains nothing from starting hidden — the user can't see it yet either way. Render it normally and let the animation take over when it scrolls into view. Any flicker happens offscreen, which is the one place a flicker is free.

Animate a wrapper instead of the text. A clip or mask on a container, or a simple fade and translate on the whole block, needs no splitting and no webfont measurement. You lose the per-line stagger. You keep server-rendered text that paints with the HTML. For most headings that trade is worth it, and the version without the stagger is not noticeably worse.

If you must hide, put a floor under it. A short CSS-only fallback that reveals the text after a second or so, overridden the moment the script takes control, means a failed bundle costs you an animation instead of your headline.

The general shape

The reason this is worth writing down isn't the heading. It's that this is what progressive enhancement failures look like now.

Nobody ships a page that needs JavaScript to render its text on purpose. You ship a nice reveal on a heading, and the hiding is step one of a recipe, and the recipe doesn't mention that step one is load-bearing. The decision gets made by a code sample.

So it's worth asking, of any effect that starts by removing something: what does this page look like if the script never arrives? If the answer is "fine, just plainer," ship it. If the answer is "blank where the headline goes," that's a different decision, and it should be made on purpose.