Animated text
A text animation HTML, built into your site with no plugin and no library. One line of text in one of six effects: build (word by word), typewriter, rotate (one slot turns over), distil (words fall away to a shorter phrase), highlight (a marker or underline sweeps), strike (a word is struck and replaced). Speed, cadence, hold, repeat, entrance and type are set per use. Nothing reflows, a screen reader hears the sentence once, and it rests whole under reduced motion or with no script.
Every word arrives when you would say it.
Book a call. Ask a question. See the work.
We build websites, online shops, and booking pages
Be Clear. Be Kind. Be Brief.
Say what you do, and who it is for.
Your website is a salesperson.
The phrase arrives a word, or a part, at a time. Rise, fade or blur is how each piece comes in.
You'll need to give us
- The line it animates, and which words moveSuch as the word that is struck out and the word that replaces it. We can suggest one from your brief.
Send these with your request and we can start straight away. Everything else is ours to do.
Let your most important line arrive the way you would say it out loud, in your own type and at your own pace.
Also called
animated headlineElementor Animated Headlinetext rotatorword rotatorrotating texttypewriter effecttyping animationTyped.jsfancy textword revealhighlighted headline
What it replaces
- Elementor Pro “Animated Headline” widget (its highlighted and rotating modes)
- Typed.js and TypeIt typing effects
- UABB “Fancy Text” and PowerPack “Animated Headlines” (Beaver Builder)
- text-rotator and animated-headline WordPress plugins
Good for
The one line that carries a page or a band: a tagline, a promise, a mantra. Highlight suits a first-screen headline because it is readable from the first frame; the other five suit a line the visitor meets after it.
Not for
Body copy, anything a visitor must read to act (a price, an instruction), or more than one on a screen. Not the first screen’s h1 in build, typewriter or distil: they start invisible, which delays the moment it can be read and the page’s Largest Contentful Paint. Typewriter splits letters, so not for scripts that join them (Arabic, Devanagari).
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- A screen reader hears the whole sentence once and nothing while it moves: the DOM text never changes, only opacity and position. Build, distil and highlight are plain text. Typewriter’s letters are hidden from assistive technology and its lines given once in a visually hidden copy; rotate’s slot reads as its options joined (“websites, online shops, and booking pages”); strike’s change reads as the replacement. `label` substitutes a sentence of your own.
- WCAG 2.2.2: anything that loops or runs past five seconds gets a pause button, visible by default, named for what it will do. `pause="focus"` keeps it in the page but shows it only on keyboard focus: keyboard and screen-reader visitors can stop it, but a mouse or touch visitor who has not set reduced motion cannot. That is a choice to make with the client (Nicole made it), not a default.
- prefers-reduced-motion (tracked live), no JavaScript, or paused: one still, complete state — the whole phrase, the first line or option, the marks drawn, the strike made — and no button.
- No flashing (WCAG 2.3.1): fades, slides and sweeps only. The typewriter caret blinks about once a second, and only while it rests.
- It runs only while 60% on screen and the tab is visible, and starts after web fonts have loaded. Nothing reflows while it runs, so nothing near it moves either.
Where it's live
- nicolelawton.com: Home, the "Let Go. Let Be. Let Me." band over the deep water (pre-launch on nicolelawton.gohero.us). It is the distil original, LetGo.astro, built before this element and not yet swapped for it
- nicolelawton.com: Resources, the closing tagline "Cultivate Empower Connect": build, word by word, gap 600, once. A copy of this file; her phoenix between the words is drawn by the page, on .at__piece + .at__piece::before (pre-launch on nicolelawton.gohero.us)
- superherotech.ai: /elements/animated-text/ (demo): all six effects
How to ask for it
“The animated-text on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Hero & motion
See them all working- Animated background
The moving hero background people ask for — waves, cells, fog, birds — in one small file, no WebGL, and it holds still for anyone who asked for less motion.
- Particle field
Give your hero quiet, constant movement, like a network coming alive, without the weight of a video.
- Video background
Open your home page with moving footage of your work, without making visitors wait for it or wrestle with it.
- Parallax band
Break up a long page with a wide photo that glides behind your words as visitors scroll.
Want the animated text on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.