Banners that don't shove

Announce without shoving the page: stay centered, settle quiet.

Guillermo Rauch@rauchg
This is a delightful execution of a notification banner ▪️ No CLS (cumulative layout shift) → good perf ▪️ Text remains centered throughout animation ▪️ Settles to a color that doesn't compete with main CTA Chef. Freaking. Kiss.
Dec 1, 2020View on X ↗

The demos rebuild the apple.com banner he praised, on a made-up phone page.

A banner arrives

Replay it, then switch his three points off on the right.

Pushes, slides, shoutsBad
height: 0 → 40pxBuy moved 0px · text drift 0px
Reserved and centeredGood
clip-path: inset(0 50%)Buy moved 0px · text drift 0px
His three points, on the right pane 
.banner-slot { height: 40px; }            /* reserved up front: no CLS */
.banner {
  position: absolute; inset: 0;
  clip-path: inset(0 50%);                /* reveal from the centre out */
  background: var(--highlight);
  transition: clip-path 300ms var(--ease-out),
              background-color 600ms ease 900ms; /* then settle */
}
.banner[data-in] { clip-path: inset(0); background: var(--surface-muted); }
.banner p { position: absolute; inset: 0; display: grid; place-items: center; }

Scrub the first 1.5 seconds

Drag the timeline; watch the guide line and Buy.

Width grows from leftBad
Buy moved 0px · text drift 0px
Clip from the centerGood
Buy moved 0px · text drift 0px

Why it matters, pros and cons

Why it matters

The banner is news; the page is the product. Announce once, then get out of the Buy button's way.

Pros

  • Nothing under the reader's finger moves.
  • Text readable from the first frame, not after the slide.
  • The main CTA stays the loudest thing on the page.

Cons

  • A reserved strip is empty space when there's no news.
  • Overlaying instead can cover the nav; pick one on purpose.
  • Urgent alerts (outage, payment failed) should stay loud.