Changing the words: what it takes to edit the headlines in an animated template

The short answer

Animated headlines are stored three ways, and the effect on screen tells you almost nothing about which one you are looking at. Counting across the 60 templates whose source is a single document:

The columns do not sum to their totals, because five interactive templates do two of these at once — splitting one heading and drawing another. The classic column has no such overlap.

The first two you edit by typing over the words. The third you edit by finding a string inside a script, and then checking it still fits, because a canvas does not reflow the way a paragraph does.

The two halves animate type in opposite directions

This was the surprise when we counted. The classic templates — the conventional, non-scroll-driven half — are the ones that animate real text most aggressively: 11 of 18 split a heading into per-word spans so the words can arrive one after another. Among the 42 interactive templates only 6 do that.

The interactive half gets its typographic drama elsewhere: 13 of them draw lettering into a canvas, where the type is part of the scene rather than part of the document. Living Alphabet is the clearest case — the letterforms are the artwork, so they are drawn, not laid out.

So the intuition that the showier template must be the harder one to edit is roughly right, but for a reason worth knowing: it is not that the animation is complicated, it is that the words stopped being words.

When a script cuts the heading up

This is the friendliest case and it looks like the scariest. The heading sits in the HTML as an ordinary sentence; on load, a few lines of script replace it with one span per word so each can be moved independently.

Because the splitting happens at run time from whatever the HTML says, you edit the sentence and the animation re-splits it. Type a longer headline into Moto Atelier and the extra words animate exactly like the originals, with nothing to reconfigure.

The one thing to check is line count. Per-word reveals are usually tuned for the number of lines the demo copy happened to occupy, and a headline that grows from two lines to three can leave the last line arriving after a visitor has started reading. Look at it on a phone, where it wraps soonest.

When the headline is drawn rather than written

In 13 of the interactive templates the lettering is painted onto a canvas by script, using the same drawing call you would use for any other shape. The text exists as an instruction to draw, not as something the browser lays out.

Editing it means three steps rather than one: find the string in the script, change it, then look at the result — because nothing will re-wrap it for you. A longer word will not push the rest onto a new line; it will run past the edge of the drawing, or overlap what is beside it, depending on how the scene positions things. If the script sizes the text to fit, a longer phrase will simply get smaller, which is its own kind of surprise at the top of a page.

None of this is difficult, but it is developer work rather than copy work, and it is worth knowing before you promise a client that the headline is theirs to change. There is a second consequence — drawn text is not text a search engine or a screen reader finds in the page — which we cover as a mechanism in the animation and SEO guide rather than repeating here.

Very large type has nowhere to grow

32 of the 60 set a heading at 8% of the viewport width or more, and 19 go past 12%. At the top of that range the type is sized to the screen rather than to the text: District declares a heading at 100vw and Signal Facade at 95vw, which is a single word spanning the whole window by design.

A word chosen to look like that is a word chosen for its length. Replace a six-letter word with your fourteen-letter company name at 95vw and there is no free space to absorb it — the letters shrink, the line breaks somewhere unintended, or it overflows. This is the most common way a beautiful demo turns ordinary in the first hour of customisation, and it has nothing to do with the animation at all.

The practical move is to audit the demo with your own words before you buy, not after. Open the demo, use the browser inspector to type your actual headline into the heading, and see what happens at a phone width and at a desktop width. It costs two minutes and it is the single most useful test on this page.

What you do not have to worry about

Two things came out unanimous, which is unusual in a catalogue assembled over time.

• All 60 size their type with clamp(), so headings scale between a floor and a ceiling rather than jumping at breakpoints. Longer copy degrades gradually instead of falling off a cliff.

• All 60 respond to the operating-system setting for reduced motion, and 59 of them also check it in script rather than in the stylesheet alone — which is what stops a reveal animation leaving text invisible for somebody who asked for less movement.

That second one is the failure we went looking for and did not find. A reveal that hides text and then animates it in can strand the text permanently when the animation is disabled; here the scripts check the preference and show the content immediately instead. Worth stating plainly, because it is a common bug in animated templates and it is not present in these.

Four checks before you commit to a template on headline grounds

• Try to select the headline with your cursor. If it does not highlight, it is drawn into a canvas and editing it is a code change.

• Type your longest real headline into the demo with the inspector, then look at it at phone width.

• Count the lines the demo headline occupies, and check yours occupies the same number.

• Turn on reduced motion in your operating system and reload. Everything should still be readable, immediately.

If the answer to the first one sends you to the script, that is not a reason to walk away — several of the best templates here draw their type. It is a reason to price the headline as development rather than as copy, and to settle the wording before the work starts rather than after.

What this guide cannot tell you

The counts come from reading source files and looking for the drawing call, the splitting routine and the declared type sizes. A template could animate type in a way none of those three tests catches, and a heading could be sized somewhere other than the declaration we read. Treat the table as a reliable shape of the catalogue rather than a per-template guarantee — and use the selection test above on the specific demo you are considering, because it is evidence about that page rather than about a population.

It also says nothing about whether animated typography is a good idea for your site. That depends on what the page has to do, and a headline that arrives one word at a time is a poor fit for a reader who came to find a phone number.