This is a minimal repro of our current collapsable liquid-glass morph effect. Multiple attempts were made to create the desired effect, all failed to retain the scrollable behavior of the filter chips or were time-based hacks. We reverted to a simple animation where the chips just fade in (what the code does below).
Here is the expected result:
- The filter button gets "split" from below into another circle which drops down, we will refer to this circle as the chips circle. The filter icon animates to an
Xclose button. - The chips circle is stretched horizontally (while slightly getting shrunk vertically) until it covers the space required by all the filter chips (so it stretches beyond the screen).
- The chips circle gets split into separate chips, each having their own width. Text/icons on those chips start to appear
- The chips are now selectable and scrollable.
- Pressing on the filter button again reverses the animation and collapses.