Scrolling Word List Animation
A short list scrolls up one row at a time, the middle row lit in the accent color and its neighbors faded. Two copies of the list move together; the bright one is clipped to the middle row.
Also known as: vertical text scroller, word list carousel, highlighted list rotator.
We help
HTML
<div class="txt-scrolling-word-list" aria-label="We help founders, creators, teams, studios and schools">We help
<span class="txt-scrolling-word-list-list" aria-hidden="true">
<span class="txt-scrolling-word-list-dim">
<span class="txt-scrolling-word-list-track"><span>schools</span><span>founders</span><span>creators</span><span>teams</span><span>studios</span><span>schools</span><span>founders</span><span>creators</span></span>
</span>
<span class="txt-scrolling-word-list-lit">
<span class="txt-scrolling-word-list-track"><span>schools</span><span>founders</span><span>creators</span><span>teams</span><span>studios</span><span>schools</span><span>founders</span><span>creators</span></span>
</span>
</span>
</div>CSS
.txt-scrolling-word-list {
--c: var(--txt-color, #3b82f6);
font-size: var(--txt-size, 32px);
font-family: system-ui, sans-serif;
font-weight: 700;
line-height: 1.2;
display: flex;
align-items: center;
gap: 0.3em;
white-space: nowrap;}
.txt-scrolling-word-list-list {
display: inline-grid;
}
.txt-scrolling-word-list-dim,
.txt-scrolling-word-list-lit {
grid-area: 1 / 1;
height: 3.6em;
overflow: hidden;
}
.txt-scrolling-word-list-dim {
opacity: 0.35;
-webkit-mask-image: linear-gradient(transparent, #000 45%, #000 55%, transparent);
mask-image: linear-gradient(transparent, #000 45%, #000 55%, transparent);
}
/* only the middle row of the bright copy shows */
.txt-scrolling-word-list-lit {
color: var(--c);
clip-path: inset(1.2em 0 1.2em 0);
}
.txt-scrolling-word-list-track {
display: flex;
flex-direction: column;
/* 5 words x 1.7s = 8.5s; the list starts with the last word and ends with the first two */
animation: txt-scrolling-word-list-scroll 8.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.txt-scrolling-word-list-track span {
height: 1.2em;
}
@keyframes txt-scrolling-word-list-scroll {
0%, 14.12% { transform: translateY(0); }
20%, 34.12% { transform: translateY(-1.2em); }
40%, 54.12% { transform: translateY(-2.4em); }
60%, 74.12% { transform: translateY(-3.6em); }
80%, 94.12% { transform: translateY(-4.8em); }
100% { transform: translateY(-6em); }
}
@media (prefers-reduced-motion: reduce) {
.txt-scrolling-word-list, .txt-scrolling-word-list *, .txt-scrolling-word-list::before, .txt-scrolling-word-list::after, .txt-scrolling-word-list *::before, .txt-scrolling-word-list *::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.