One of my favorite parts from the dropdown menus in iOS 16. Expanding nested items directly in place makes it understandable and ergonomic. This implementation uses
clip-path to reveal the items and
transform on the parent is reversed with
transform: calc(1 / var(--transform)) on the child.
A cool trick here is that the backdrop is tinted gray, so that the text and background are dimmed at different rates. You’ll notice that the text appears to “dim” a lot more than the background does.
Bugs: weird border flicker when expanding, Safari has subpixel jitter when animating font-variation-settings weight, Firefox backdrop broken while lacking