Spinning Newspaper Headline
A front page spins in from the distance like an old movie montage and lands slightly askew with a headline across the top. Plays once: a spin, a scale and a small overshoot on landing.
Also known as: newspaper spin animation css, spinning headline effect, breaking news spin.
The Daily Build
SHIPPED!
HTML
<div class="txt-spinning-newspaper-text">
<div class="txt-spinning-newspaper-text-page">
<p class="txt-spinning-newspaper-text-masthead">The Daily Build</p>
<p class="txt-spinning-newspaper-text-headline">SHIPPED!</p>
<span class="txt-spinning-newspaper-text-columns" aria-hidden="true"></span>
</div>
</div>CSS
.txt-spinning-newspaper-text {
--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: inline-block;
font-family: ui-serif, Georgia, "Times New Roman", serif;}
.txt-spinning-newspaper-text-page {
width: 7.5em;
padding: 0.4em 0.5em 0.5em;
border-radius: 0.06em;
color: color-mix(in srgb, var(--c) 30%, #1a1a1a);
background: color-mix(in srgb, var(--c) 6%, #fbfaf4);
box-shadow: 0 0.12em 0.4em rgba(0, 0, 0, 0.18);
animation: txt-spinning-newspaper-text-spin 1.6s both;
}
.txt-spinning-newspaper-text-page p {
margin: 0;
text-align: center;
}
.txt-spinning-newspaper-text-masthead {
padding-bottom: 0.15em;
border-bottom: 1px solid currentColor;
font-size: 0.42em;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.txt-spinning-newspaper-text-headline {
padding: 0.12em 0;
font-size: 1.05em;
font-weight: 900;
line-height: 1.1;
letter-spacing: 0.02em;
white-space: nowrap;
color: var(--c);
}
/* two columns of body copy, drawn as ruled lines */
.txt-spinning-newspaper-text-columns {
display: block;
height: 1.1em;
background:
repeating-linear-gradient(currentColor 0 0.06em, transparent 0.06em 0.2em) 0 0 / 47% 100% no-repeat,
repeating-linear-gradient(currentColor 0 0.06em, transparent 0.06em 0.2em) 100% 0 / 47% 100% no-repeat;
opacity: 0.35;
}
@keyframes txt-spinning-newspaper-text-spin {
0% { opacity: 0; transform: rotate(-1080deg) scale(0.05); animation-timing-function: cubic-bezier(0.3, 0.5, 0.5, 1); }
12% { opacity: 1; }
/* stays small while it spins, then comes forward as it straightens */
60% { transform: rotate(-30deg) scale(0.6); animation-timing-function: cubic-bezier(0.4, 0, 0.3, 1); }
82% { transform: rotate(-6deg) scale(1.06); animation-timing-function: ease-in-out; }
100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.txt-spinning-newspaper-text, .txt-spinning-newspaper-text *, .txt-spinning-newspaper-text::before, .txt-spinning-newspaper-text::after, .txt-spinning-newspaper-text *::before, .txt-spinning-newspaper-text *::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.