Most tab bar animations are aimed at animations within the button. While using the application, you tap the icon and your finger blocks whatever is happening underneath. In our version, the animation has been carried beyond the tab bar limits. You tap the icon and see the full interaction. Obviously, you can simplify the animation, but here I wanted to show you all the options, so the motion is a bit more elaborate.

In this master class, we’re going to follow up with the liquid animation concept and use one of the applications as an example for working with the lower tab bar. First up, let’s start with the main screen UX and UI of the Home Workout App.