RT jhey ▲
CSS Tip!
You can create scroll-driven micro-interactions with animation-timeline and custom properties
.search {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 calc(var(--header-height) * 0.5);
}
@​keyframes shrink {
to { width: calc(100% -… https://twitter.com/i/web/status/1731866102508949733

https://twitter.com/jh3yy/status/1731866102508949733