so, i was thinking about where transition-behavior: allow-discrete could actually be useful
and imo, one really good use-case is when you're toggling the visibility of elements and want to add a little animation (like a subtle fade).
eg, when expanding/collapsing a sidebar!
one important detail is that for entry animations, you'll also want to combine this w/ @starting-style to define the initial state of elements that were previously display: none
more on this:
css-tricks.com/almanac/prope…
another underrated css prop i discovered only now is transition-behavior: allow-discrete!
it allows transitions between discrete props, like display or visibility, which can be super useful for entry/exit anims
on the left, without allow-discrete, switching from display block to none happens instantly
on the right, with allow-discrete, the element stays visible during the opacity transition, and swaps to none only when the transition finishes
ofc, if you use base-ui / radix / any popular component lib, or any popular animation lib (which is like 99% of the cases nowadays), you don't have to worry about this at all, since they already handle exit animations
but i'll share another demo soon where i think this can come super handy!
more to read:
css-tricks.com/almanac/prope…
as you see in the slowmo, the label reveal anim isn't perfect, the blur+fade-in finishes before the label's container width is adjusted, making it look like they are cutoff for a brief period. An even better solution would be to reveal the label by character
BUT
at this speed it doesn't matter imo:)
daniel petho retweeted
Simple fancy iteration on the onboarding in @krea_ai agent, using cool animation from @nonzeroexitcode
A lovely little interaction we built with @nonzeroexitcode for the skills and integrations hub in the @krea_ai agent.
daniel petho retweeted
A lovely little interaction we built with @nonzeroexitcode for the skills and integrations hub in the @krea_ai agent. – at Paris, France
had to try this out myself because i'm def planning to use it in the future, and turns out it's super easy to do with the Pointer Lock API
interesting choice by @paper to lock the cursor when changing numerical values
at first it felt a little weird, probs because i'm used to the cursor moving while drag, but i think i actually prefer this approach, especially when i have to drag a value quite far
