Staggered Text Roll
Each letter rolls up in its own slot a beat after its neighbor, revealing the word in accent italics, holds, then rolls on back to plain. Every slot is a three-copy drum, so the loop never jumps.
Also known as: text roll animation, letter roll text css, rolling text effect.
HTML
<div class="txt-staggered-text-roll" aria-label="Let's talk"><span aria-hidden="true"><span style="--i: 0"><span><b>L</b><b>L</b><b>L</b></span></span><span style="--i: 1"><span><b>e</b><b>e</b><b>e</b></span></span><span style="--i: 2"><span><b>t</b><b>t</b><b>t</b></span></span><span style="--i: 3"><span><b>'</b><b>'</b><b>'</b></span></span><span style="--i: 4"><span><b>s</b><b>s</b><b>s</b></span></span><span style="--i: 5"><span><b> </b><b> </b><b> </b></span></span><span style="--i: 6"><span><b>t</b><b>t</b><b>t</b></span></span><span style="--i: 7"><span><b>a</b><b>a</b><b>a</b></span></span><span style="--i: 8"><span><b>l</b><b>l</b><b>l</b></span></span><span style="--i: 9"><span><b>k</b><b>k</b><b>k</b></span></span></span></div>
CSS
.txt-staggered-text-roll {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 2);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
letter-spacing: -0.02em;}
.txt-staggered-text-roll > span { display: inline-flex; }
.txt-staggered-text-roll > span > span {
display: inline-block;
height: 1.15em;
line-height: 1.15em;
/* clip top and bottom only, so the italic copy can lean past its slot */
clip-path: inset(0 -0.3em);
}
.txt-staggered-text-roll > span > span > span {
display: flex;
flex-direction: column;
align-items: center;
animation: txt-staggered-text-roll-roll 4.4s cubic-bezier(0.76, 0, 0.24, 1) infinite backwards;
animation-delay: calc(var(--i) * 0.04s);
}
.txt-staggered-text-roll b { font-weight: inherit; }
.txt-staggered-text-roll b:nth-child(2) {
color: var(--c);
font-style: italic;
}
@keyframes txt-staggered-text-roll-roll {
0%, 12% { translate: 0 0; }
28%, 60% { translate: 0 -1.15em; }
76%, 100% { translate: 0 -2.3em; }
}
@media (prefers-reduced-motion: reduce) {
.txt-staggered-text-roll > span > span > span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-staggered-text-roll, .txt-staggered-text-roll *, .txt-staggered-text-roll::before, .txt-staggered-text-roll::after, .txt-staggered-text-roll *::before, .txt-staggered-text-roll *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.