Almost every church website has one: a mobile menu that pops open all at once instead of easing down, or a service-times card that snaps to full height when a visitor taps "more." For years, the smooth version required JavaScript that measured heights, cached them, and re-measured on every resize. A quiet new CSS feature finally makes it a single line.
interpolate-size: allow-keywords tells the browser it's allowed to animate between a fixed size and an intrinsic one — height: 0 to height: auto, or max-height: 0 to max-height: max-content. It reached Baseline this year, and for a church site it's the difference between a menu that feels considered and one that feels twitchy.
Set it once on the root, then animate normally:
:root {
interpolate-size: allow-keywords;
}
.mobile-nav {
height: 0;
overflow: hidden;
transition: height 250ms ease;
}
.mobile-nav[data-open] {
height: auto;
}
That's the whole trick. No scrollHeight reads, no ResizeObserver, no "measure, then animate" dance. The same pattern works for expandable ministry cards, a "read more" pastor bio, or the FAQ block on a Plan-Your-Visit page.
There's a gentler reason to bother with this. A homepage that eases open feels calm; one that jumps feels rushed. First-time guests are already a little nervous — the way a menu moves is a small kindness we can extend to them without a single new dependency.
A word of care: keep the animation short (200–300ms) and honor prefers-reduced-motion. Some visitors need stillness, and giving them a version without motion is part of hospitality on the web.
Older browsers simply skip the animation and open the menu instantly, which is fine. Progressive enhancement means the site still works everywhere; it just feels a little more grace-filled on the phones most of your visitors carry.
If your church website's mobile menu, accordions, or "read more" panels still feel jumpy — or if you're not sure what's actually shipping to your guests' browsers — we'd be glad to take a look with you.