Typography Animations
Motion with Purpose
14 tasteful, copy-ready typography animations. Each one is designed to make text more impactful, never less readable. Think editorial magazine, not PowerPoint transitions.
01 -- Entrances
First Impressions
Entrance
Fade Up with Stagger
Wordsappearonebyone,risinggentlyfrombelow
When to use
Hero headlines, section titles on landing pages. Draws the eye naturally.
When not to
Body paragraphs or UI text. Staggering long content feels slow and annoying.
.fade-up-stagger .word {
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s ease;
margin-right: 0.3em;
}
.fade-up-stagger.visible .word {
opacity: 1;
transform: translateY(0);
}
/* Stagger each word: */
.fade-up-stagger.visible .word:nth-child(1) { transition-delay: 0ms; }
.fade-up-stagger.visible .word:nth-child(2) { transition-delay: 80ms; }
.fade-up-stagger.visible .word:nth-child(3) { transition-delay: 160ms; }
/* ...continue for each word */Entrance
Character Reveal
Each letter fades in
When to use
Short, impactful phrases -- brand names, taglines, pull quotes.
When not to
Anything longer than 30 characters. Per-letter animation on a paragraph is torture.
.char-reveal .char {
display: inline-block;
opacity: 0;
transition: opacity 0.5s ease;
}
.char-reveal.visible .char {
opacity: 1;
}
/* Stagger via nth-child or inline delay */Entrance
Line-by-Line Reveal
First line appears with a clip-path wipe.
Then the second line follows smoothly.
And the third completes the sequence.
When to use
Multi-line quotes, testimonials, step-by-step instructions.
When not to
Dense body copy. The clip-path wipe implies sequence -- don't use it where order does not matter.
.line-reveal .line {
clip-path: inset(0 100% 0 0);
transition: clip-path 0.7s ease;
}
.line-reveal.visible .line {
clip-path: inset(0 0 0 0);
}
.line-reveal.visible .line:nth-child(2) { transition-delay: 300ms; }
.line-reveal.visible .line:nth-child(3) { transition-delay: 600ms; }Entrance
Typewriter
When to use
Terminal aesthetics, code-themed sites, command-line interfaces.
When not to
Serif or editorial contexts. The monospace cursor breaks the typographic voice.
.typewriter {
font-family: monospace;
border-right: 2px solid #B8963E;
white-space: nowrap;
overflow: hidden;
width: 0;
animation: typing 3s steps(30) forwards, blink 0.53s step-end infinite;
}
@keyframes typing {
to { width: 100%; }
}
@keyframes blink {
50% { border-color: transparent; }
}02 -- Emphasis
Drawing Attention
Emphasis
Subtle Weight Shift
Hover to feel the weight shift
Hover the text above
When to use
Navigation links, interactive labels, variable-font-powered interfaces.
When not to
Static text or fonts without weight axis. Without a variable font, the jump is harsh.
.weight-shift {
font-weight: 400;
transition: font-weight 0.4s ease;
cursor: pointer;
}
.weight-shift:hover {
font-weight: 700;
}
/* Requires a variable font for smooth interpolation */Emphasis
Underline Draw
Hover to draw the underline
Hover the text above
When to use
Navigation links, call-to-action text, inline links in editorial content.
When not to
Every link on the page. If everything draws, nothing stands out.
.underline-draw {
position: relative;
display: inline;
cursor: pointer;
}
.underline-draw::after {
content: '';
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: #B8963E;
transition: width 0.4s ease;
}
.underline-draw:hover::after {
width: 100%;
}Emphasis
Highlight Sweep
Hover to sweep the highlight across
Hover the text above
When to use
Key phrases in articles, feature highlights, marketing copy.
When not to
Headings (too heavy) or body text (too distracting for continuous reading).
.highlight-sweep {
background: linear-gradient(90deg, rgba(184,150,62,0.25) 50%, transparent 50%);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.5s ease;
cursor: pointer;
padding: 2px 0;
}
.highlight-sweep:hover {
background-position: 0 0;
}Emphasis
Letter Spacing Breathe
Hover to breathe
Hover the text above
When to use
Uppercase labels, navigation items, short headings.
When not to
Lowercase body text. Expanding letter spacing on lowercase makes it harder to read.
.letter-breathe {
letter-spacing: 0.05em;
transition: letter-spacing 0.6s ease;
cursor: pointer;
text-transform: uppercase;
}
.letter-breathe:hover {
letter-spacing: 0.15em;
}03 -- Transitions
State Changes
Transition
Blur to Sharp
Clarity arrives gradually
When to use
Hero text, dramatic reveals, content that loads progressively.
When not to
Repeated elements or lists. The blur effect loses impact when overused.
.blur-to-sharp {
filter: blur(8px);
opacity: 0.3;
transition: filter 1s ease, opacity 1s ease;
}
.blur-to-sharp.visible {
filter: blur(0px);
opacity: 1;
}Transition
Color Shift
Color follows your scroll
Scroll to shift the hue
When to use
Data visualization headings, scroll-storytelling, mood-driven pages.
When not to
Accessibility-critical text. Changing color on scroll can confuse screen readers and break contrast ratios.
/* Pure CSS approximation using scroll-driven animations */
@keyframes hue-shift {
from { color: hsl(40, 50%, 60%); }
to { color: hsl(200, 50%, 60%); }
}
.color-shift {
animation: hue-shift linear;
animation-timeline: scroll();
}Transition
Split and Rejoin
Splitapart,thencometogether
When to use
Section transitions, dramatic reveals, short impactful phrases.
When not to
Long sentences. The splitting effect becomes chaotic with too many words.
.split-rejoin .word {
display: inline-block;
margin-right: 0.3em;
opacity: 0.4;
transition: transform 0.8s ease, opacity 0.8s ease;
}
.split-rejoin.visible .word {
transform: translateX(0);
opacity: 1;
}
/* Set initial translateX per word via inline styles or nth-child */04 -- Scrolling
Scroll-Driven
Scrolling
Parallax Text Layers
Heading Layer
Body text moves at a different rate, creating depth between layers.
When to use
Landing pages, editorial long-reads, section headers with supporting body text.
When not to
Mobile-first designs. Parallax effects can feel janky on touch devices.
/* Use scroll-driven animations (modern CSS) */
.parallax-heading {
animation: parallax-fast linear;
animation-timeline: scroll();
}
.parallax-body {
animation: parallax-slow linear;
animation-timeline: scroll();
}
@keyframes parallax-fast {
to { transform: translateY(-30px); }
}
@keyframes parallax-slow {
to { transform: translateY(-10px); }
}Scrolling
Progressive Reveal
Thistextrevealsitselfasyouscrolldownthepage,eachwordbecomingvisibleinsequence.
Scroll to reveal
When to use
Storytelling, long-form narratives, manifesto-style content.
When not to
Content users need to scan quickly. Forced sequential reading frustrates skimmers.
/* Scroll-driven animation approach */
.progressive-reveal .word {
display: inline-block;
margin-right: 0.3em;
opacity: 0.1;
animation: reveal linear;
animation-timeline: scroll();
}
@keyframes reveal {
to { opacity: 1; }
}
/* Stagger via animation-delay or animation-range */Scrolling
Scale on Scroll
Scale follows scroll
Scroll to scale
When to use
Hero headings, dramatic single-word titles, section transitions.
When not to
Body text or anything meant to be read. Scaling distorts readability.
/* Scroll-driven animation */
.scale-on-scroll {
animation: scale-up linear;
animation-timeline: scroll();
transform-origin: center;
}
@keyframes scale-up {
from { transform: scale(0.7); }
to { transform: scale(1.2); }
}