Design Atlas
한국어
▶ Motion graphics

Liquid motion

리퀴드 모션

A motion style where shapes stretch, pool, and merge like liquid instead of transforming rigidly — a familiar look in brand intros and app onboarding animations.

Also known as: Fluid motion graphicsBlob motion
···
html
<div class="stage">
  <svg width="0" height="0"><filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"/></filter></svg>
  <div class="goo-wrap">
    <div class="blob b1"></div>
    <div class="blob b2"></div>
    <div class="blob b3"></div>
  </div>
</div>
css
.stage{position:absolute;inset:0;overflow:hidden}
.goo-wrap{position:absolute;inset:0;filter:url(#goo)}
.blob{position:absolute;top:50%;border-radius:50%;background:var(--accent)}
.b1{left:50%;width:clamp(30px,13vmin,60px);height:clamp(30px,13vmin,60px);margin:calc(clamp(30px,13vmin,60px) / -2) 0 0 calc(clamp(30px,13vmin,60px) / -2);
  animation:drift1 3.6s ease-in-out infinite}
.b2{left:50%;width:clamp(20px,9vmin,42px);height:clamp(20px,9vmin,42px);margin:calc(clamp(20px,9vmin,42px) / -2) 0 0 calc(clamp(20px,9vmin,42px) / -2);
  background:var(--accent-2);animation:drift2 3.6s ease-in-out infinite}
.b3{left:50%;width:clamp(16px,7vmin,32px);height:clamp(16px,7vmin,32px);margin:calc(clamp(16px,7vmin,32px) / -2) 0 0 calc(clamp(16px,7vmin,32px) / -2);
  background:var(--accent-3);animation:drift3 3.6s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(-30%,0) scale(1)}50%{transform:translate(10%,-10%) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(30%,10%) scale(1)}50%{transform:translate(-6%,4%) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(6%,26%) scale(1)}50%{transform:translate(-14%,-6%) scale(1.1)}}

The look comes from combining two tricks. One is squash and stretch pushed to an exaggerated extreme across an entire shape. The other is a gooey filter that makes two shapes appear to merge as they get close — blurring the edge with an SVG feGaussianBlur, then cranking contrast back up with feColorMatrix, so two approaching circles actually fuse like liquid instead of just overlapping.

In After Effects, both principles get layered onto a motion path drawn as a bezier curve, so the shape flows along that path rather than moving in a straight line. Stretching the shape further during the fast parts of the path doubles down on the feeling of momentum sloshing around.

It's a popular choice for a logo or brand symbol's entrance, but because the form keeps changing shape, it risks blurring exactly what makes that brand mark recognizable — the final held frame needs to land precisely on the logo's real, exact form.

When to use

Don't let it stay liquid for the entire animation — always let it settle into a crisp, held form at the very end.