106
AI ready

Text Outline Reveal

£10 or the whole Vault, £99

Editable type traces its real letter contours before a slanted wash of violet ink rises through the word, as a GSAP text reveal.

Lenis intermediate
3 more details
svg-line-drawtext-animationstagger

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Text Outline Reveal demo in new tab

Released

About this effect

A large editable word draws its vector contours, then fills with a diagonal wave of violet ink. Choose Auto for a quick timed reveal, or Scroll to draw and fill the lettering as you scroll down and undo the transition as you scroll back up.

Read the full effect overview

The lettering uses bundled Mona Sans outlines for Latin capitals, digits and selected punctuation. Reduced motion presents the finished word without a scrolling runway.

Text Outline Reveal - GSAP animation effect preview

What's included

7 items
  • Actual vector letter contours that draw before the fill arrives
  • A diagonal fill that moves through each glyph in sequence
  • Auto and Scroll modes with keyboard-operable tabs
  • Editable word with automatic fitting at desktop and mobile widths
  • Bundled font and outline data with no runtime font parser
  • Readable fallback, reduced-motion support and per-instance teardown
  • Lenis smooth scrolling with a generous scroll distance and eased reveal response

Perfect for

3 use cases
  • Typography-led launch headlines that need a distinctive opening motion
  • Editorial covers and title treatments with a controllable reveal
  • Creative portfolios that invite visitors to explore the letterforms

How it works

1 section

Auto plays a quick outline-to-fill sequence. Scroll keeps the lettering in view while normal page scrolling draws its outlines and fills the letters; scrolling back reverses the reveal. Switch modes or edit the word at any time.

Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Text Outline Reveal opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the effect markup to your page:

Code snippet omitted: it ships with the download.

3. Add scripts before </body>:

Code snippet omitted: it ships with the download.

Keep mona-sans-latin.woff2 beside style.css. The bundled font and outlines are licensed under the SIL Open Font License 1.1 in assets/OFL.txt.

Using It With Your Own Design

Required hooks: Each instance needs a data-outline-root wrapper, a plain-text data-outline-word fallback, and an empty data-outline-vector SVG. The input and Replay button are optional. The sample classes connect the supplied CSS to the stage and controls; keep them if using that stylesheet. Keep the SVG aria-hidden because the plain text carries the accessible word. The root's data-text sets the initial word; the text fallback should match it for no-JavaScript visitors.

Demo styling you can replace: The grey background, violet colour, cue, layout, controls and spacing are presentation. Change --accent, the font sizes and stage dimensions to fit your design. Keep the font file and generated outline data together so the fallback and vector word have matching forms.

CSS the effect needs: The vector must overlay the text fallback within a positioned stage. Hide the vector until the root gains .is-ready; hide only the visual fallback then, leaving its text in the accessibility tree. The SVG should retain its dynamic viewBox, preserveAspectRatio and visible overflow. Keep the contour stroke and fill styles, adapting their colours and widths as desired. For Scroll mode, wrap the root in [data-outline-track] and retain the .outline-track.is-scroll height and sticky .showcase rules. If you remove the demo CSS, provide a no-JavaScript state that shows the plain text. The demo hides controls if the required scripts fail to load.

Options

Hook Values Default Purpose
data-text Up to 10 supported characters FORM Initial word
data-outline-input Native text input Optional Edit and replay the word
data-outline-replay Native button Optional Replay from the start

Input is converted to uppercase. Supported characters are A–Z, 0–9, space, &, ?, !, ., and -. Other characters are removed. For wider language coverage or another typeface, regenerate the outline data from a properly licensed font and update the fallback font to match.

Accessibility

The plain HTML text remains readable to assistive technology while the SVG is hidden from it. Auto plays the quick reveal. Scroll uses normal vertical page scrolling through a sticky stage, including touch swipes. There is no cursor-following or dragging interaction. The word input and Replay button are native keyboard controls with visible focus. Under prefers-reduced-motion: reduce, the word remains fully filled and editable; Replay and the mode tabs are hidden, and the scroll runway collapses. If JavaScript or GSAP fails, the plain text remains visible and the demo hides its inactive controls.

Dependencies

  • GSAP 3.12+ core. The demo pins GSAP 3.15.0.
  • Bundled Mona Sans font and precomputed outlines, licensed under SIL OFL 1.1. No runtime font parser or GSAP plugin is needed.

Demo modes

The demo opens in Auto mode and offers Auto and Scroll tabs (data-outline-mode="auto|scroll"). Their arrow keys switch modes. Scroll mode needs an .outline-track wrapper with data-outline-track around the effect root. The word stays sticky for the track length; normal wheel, touch and page-scroll keys drive the reveal. Switching back to Auto returns to the top of the track.

Smooth scrolling

Scroll mode uses Lenis 1.3.17 with a slower wheel response and a 340vh track (240vh of reveal travel). Auto mode and reduced motion destroy only the demo-owned Lenis instance. An existing host Lenis instance is borrowed and never destroyed. ?smooth=off disables the owned smooth scroller; normal scrolling still controls the reveal if Lenis cannot load.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.