Scroll-linked corner-shape effects with pure CSS

talk
1

Daniel Schwarz experiments with the new CSS corner-shape() property and ties its mathematically defined values to scroll so corners morph smoothly into some surprisingly nice UI effects.

s_4A82C1A16CF8BD3E78A39757A7700A0B223569FCA13B21C3FBDA9426FB071038_1771786670629_1.5
s_4A82C1A16CF8BD3E78A39757A7700A0B223569FCA13B21C3FBDA9426FB071038_1771786670629_1.52474×1500 34.6 KB

Arthur

2

This is a neat fit for scroll timelines since corner-shape() is numeric enough to interpolate cleanly, so the effect feels smoother than most border tricks.

.card {
  animation: morph linear both;
  animation-timeline: scroll();
}

@keyframes morph {
  from { corner-shape: round; }
  to { corner-shape: scoop; }
}

BayMax