Tiger’s flagship animated typography widget — the tool for a hero headline that needs to make an entrance rather than simply appear on the page fully formed the moment it loads. Where a plain heading widget renders text and stops, Editorial Text treats the text itself as a designed, animated element: how it enters the page, what triggers that entrance, and even how the finished text is visually filled once it settles.
Choosing what animates and how
Start with the HTML tag, which matters beyond pure semantics — an H1 for a genuine page heading keeps the document’s outline correct for both SEO and assistive technology, while a lighter tag suits a secondary animated line elsewhere on the page. The split-by control decides the granularity of the animation: characters (each individual letter animates independently, producing the most dramatic, staggered effect), words (each word moves as a unit, a calmer middle ground), or lines (whole lines animate together, the most restrained option, well suited to multi-line paragraphs rather than short punchy headlines).
From there, the effect library covers a genuinely wide range of entrances: a mask-up reveal (text appears to slide up from behind a mask, a clean and popular choice), cascade (elements stagger in one after another in a wave), blur-in (text sharpens into focus from a blurred start), magnet (characters appear to be pulled into place), wave, glitch, and several more — each producing a distinctly different feel, from polished and corporate to playful and energetic.
Timing and what triggers the animation
Once an effect is chosen, stagger controls the delay between each character, word, or line animating in relative to the one before it — a larger stagger produces a more visibly sequential, cascading feel, while a smaller one reads as nearly simultaneous. Duration and easing shape the animation curve of each individual element’s motion. Critically, the trigger setting decides when any of this actually fires: on page load (appropriate for a hero headline that’s visible the instant the page renders) or only once the element scrolls into the visitor’s viewport (the right choice for any Editorial Text instance further down the page, since a load-triggered animation on off-screen content either fires uselessly before anyone sees it, or — worse — has already finished playing by the time a visitor scrolls to it, defeating the entire point of the effect).
Fill mode: beyond animation entirely
Fill mode is where this widget extends past pure motion design into a genuine typographic tool. The finished, settled text can be rendered with a solid color fill (the default, unremarkable case), a gradient fill (the text itself becomes a color gradient rather than flat color, a distinctly premium, modern look), an image fill (the text is essentially a mask revealing a background image or photo through its letterforms), a video fill (the same masking concept but with a playing video visible through the text — a genuinely striking effect for a hero headline), or an outline (rendering just the character strokes with no fill at all, a more editorial, minimal aesthetic). Combined with the entrance animation, fill mode means a single headline can carry both a dynamic arrival and a distinctive finished appearance, working together rather than as two separate decisions.
Use it for
Hero headlines are the clearest fit — the first thing a visitor reads on a landing page benefits the most from both a considered entrance and a distinctive fill treatment. Section introductions further down a page are a secondary use case, where scroll-triggered animation (rather than load-triggered) keeps each section’s heading feeling freshly revealed as the visitor scrolls to it, adding a sense of pacing to an otherwise static page.
Practical tips
- Reserve character-level splitting and the more dramatic effects (glitch, magnet) for a genuine hero headline — applying the same intensity to every heading down a long page quickly feels excessive rather than polished.
- Always set scroll-triggered animation for any instance below the first viewport — a load-triggered animation on off-screen content wastes the entire effect.
- Test gradient and image/video fill modes against your actual background — a fill treatment that reads beautifully on one background color can lose all contrast and legibility against another.