Sliding Poster Headline
Two stacked poster lines ratchet sideways in opposite directions to show the next phrase, solid on top and outlined below, with a small skew while they move. Each line is a clipped track of words.
Also known as: kinetic typography css, sliding text lines animation, stacked words animation.
HTML
<div class="txt-sliding-poster-lines" aria-label="Plan calmly. Build quickly. Ship often."> <span class="txt-sliding-poster-lines-row" aria-hidden="true"><span><b>Plan</b><b>Build</b><b>Ship</b><b>Plan</b></span></span> <span class="txt-sliding-poster-lines-row" aria-hidden="true"><span><b>calmly.</b><b>often.</b><b>quickly.</b><b>calmly.</b></span></span> </div>
CSS
.txt-sliding-poster-lines {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.7);
font-family: system-ui, sans-serif;
font-weight: 900;
line-height: 1.2;
display: inline-flex;
flex-direction: column;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;}
.txt-sliding-poster-lines-row {
display: block;
width: 5.6em;
overflow: hidden;
padding: 0.04em 0;
}
.txt-sliding-poster-lines-row > span {
display: flex;
animation: txt-sliding-poster-lines-left 6s cubic-bezier(0.83, 0, 0.17, 1) infinite;
}
.txt-sliding-poster-lines-row b {
flex: 0 0 6.2em;
font-weight: inherit;
}
.txt-sliding-poster-lines-row + .txt-sliding-poster-lines-row b {
/* a static face: variable fonts show their overlapping contours when stroked */
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: transparent;
-webkit-text-stroke: 0.028em var(--c);
}
.txt-sliding-poster-lines-row + .txt-sliding-poster-lines-row > span {
animation-name: txt-sliding-poster-lines-right;
animation-delay: 0.09s;
animation-fill-mode: backwards;
}
@keyframes txt-sliding-poster-lines-left {
0%, 26% { translate: 0 0; transform: none; }
29.7% { transform: skewX(-12deg); }
33.33%, 59.33% { translate: -6.2em 0; transform: none; }
63% { transform: skewX(-12deg); }
66.67%, 92.67% { translate: -12.4em 0; transform: none; }
96.3% { transform: skewX(-12deg); }
100% { translate: -18.6em 0; transform: none; }
}
@keyframes txt-sliding-poster-lines-right {
0%, 26% { translate: -18.6em 0; transform: none; }
29.7% { transform: skewX(12deg); }
33.33%, 59.33% { translate: -12.4em 0; transform: none; }
63% { transform: skewX(12deg); }
66.67%, 92.67% { translate: -6.2em 0; transform: none; }
96.3% { transform: skewX(12deg); }
100% { translate: 0 0; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.txt-sliding-poster-lines-row > span { animation: none; }
.txt-sliding-poster-lines-row + .txt-sliding-poster-lines-row > span { translate: -18.6em 0; }
}
@media (prefers-reduced-motion: reduce) {
.txt-sliding-poster-lines, .txt-sliding-poster-lines *, .txt-sliding-poster-lines::before, .txt-sliding-poster-lines::after, .txt-sliding-poster-lines *::before, .txt-sliding-poster-lines *::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.