Spotify Filters

The filters in the Spotify mobile app are a great example of elegant UI design. They function as tabs, and when you activate one, only the selected filter remains visible alongside a reset button while the rest fade away.

While the real app includes nested options for some filters (like playlists: “By you”, “By Spotify”, etc.), I simplified things a bit keeping it to only one level. When no filter is selected, all buttons are displayed. Once a filter is activated, a reset button appears, and the active filter smoothly transitions to a new position next to the reset button based on its original location. The other buttons fade out by setting their opacity to 0. See all implementation details here.