Wobbly Text Animation
Each letter wobbles like a jelly cube on a plate: pinned at the base, the top sways with shrinking skews until it settles. The wobble runs along the word, then everything rests.
Also known as: jelly letters, wobbling letters css, wiggly text.
HTML
<div class="txt-wobbly-text" aria-label="Wibble wobble"><span aria-hidden="true"><span style="--i: 0">W</span><span style="--i: 1">i</span><span style="--i: 2">b</span><span style="--i: 3">b</span><span style="--i: 4">l</span><span style="--i: 5">e</span><span style="--i: 6"> </span><span style="--i: 7">w</span><span style="--i: 8">o</span><span style="--i: 9">b</span><span style="--i: 10">b</span><span style="--i: 11">l</span><span style="--i: 12">e</span></span></div>
CSS
.txt-wobbly-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;
color: var(--c);}
.txt-wobbly-text span span {
display: inline-block;
transform-origin: 50% 90%;
animation: txt-wobbly-text-jiggle 2.6s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.06s);
}
@keyframes txt-wobbly-text-jiggle {
0%, 38%, 100% { transform: skewX(0deg) scaleY(1); }
5% { transform: skewX(-18deg) scaleY(0.9); }
11% { transform: skewX(13deg) scaleY(1.05); }
17% { transform: skewX(-8deg) scaleY(0.97); }
23% { transform: skewX(4deg) scaleY(1.01); }
29% { transform: skewX(-2deg) scaleY(1); }
34% { transform: skewX(0.5deg) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.txt-wobbly-text, .txt-wobbly-text *, .txt-wobbly-text::before, .txt-wobbly-text::after, .txt-wobbly-text *::before, .txt-wobbly-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.