Tab bar Lottie animation

To complete the home screen, we will create a tab bar. The tab bar is a fundamental UI element of any app. It allows users to navigate through your app. To make it even more compelling, we will animate the buttons using Lottie Animation.

Container

Let’s start by by creating the body of our tab bar.

• Add a Stack H and set the Alignment to Top and the Distribution to Space Around
• Keep the Width to 100% and set the Height to 88PT
• Add a padding top of 4
• Pin To Bottom Left and toggle the Pin To Page
• For the BG Color, add a new Color Gradient #31395B - #21263D, opacity 70%
• Set the Corner Radius of both top edges to 24
• In Effects, add a BG Blur Dark
• Add Drop Shadow: Outer, Offset X 0, Offset Y 10PT, Blur 20 and color black, opacity 30%

Tab Item

Next, we will design the tab button

• Add a Stack V, set the Alignment to Center
• Set the Width and the Height to 48PT

In the Tab Item, add an image element.

• In Settings, set the image to location from the assets
• Set the Width and the Height to 48PT and Pin To Center Center

Lottie

On top of the icon, we will add a Lottie element. In Settings, select the Lottie and go to LottieFiles. There’s you can use a sample one or you can upload your own. I will put the Lottie links in the description below.

Location: https://assets2.lottiefiles.com/packages/lf20_mJrV9KGTAm.json

• Set the Loop to None and the Reset on Complete off
• Set the Width and Height to 48PT. Pin To Center Center

In the preview, you can see that the icon and the animation aren’t the same size. In Appearance, I will scale to 120% and set the Offset Y to 1.

Then, make the Tab Item into a component and duplicate it 3 times. Let’s change the icons and the animations.

Trip: https://assets3.lottiefiles.com/packages/lf20_5oiT0rTiSq.json

Fav: https://assets10.lottiefiles.com/packages/lf20_dn2jci4YQz.json

Message: https://assets5.lottiefiles.com/packages/lf20_2awSejntX7.json

States

Now that it is a component, we have access to states. The goal is to tap on the button and hide the icon while playing the lottie animation. Go in the Tab item component screen, add a custom state and name it: Tapped.

In that state, select the icon and we will set the 3D Transform Rotation Y to 90 and set the opacity to 0. In Default and Tapped, disable Autoplay.

Interactions

For the interactions, we will first make the Tab bar into a component. Then, go to the component’s screen and select the first Lottie. Here in total, we will add 8 different actions. To make things easier to understand, let’s rename the Tab Item and Lottie by adding a number next to it.

First action is to play the lottie animation, add a tap trigger and select Lottie Controls, Target self, Playback is Play, Frame 0 - 150, Loop to None and disable Reset on Complete.

Then, add another Lottie Controls, but this time, set the Target to the second Lottie. Playback to Play, Frame 0 - 0, Loop to None and disable Reset on Complete. Repeat the same steps for the third and fourth Lottie.

For the fifth action, add a Set State, Target Tab Item, Start State to Current State and End State to Tapped. The Duration is 0.5s and Easing to Ease In & Out.

Then, add another Set State, but this time, set the Target to the second Tab Item. Start State to Current State and End State to Default. The Duration is 0.5s and Easing to Ease In & Out. Repeat the same steps for the third and fourth Tab Item.

Basically, this interaction plays the lottie and set the state to tapped while resetting the 3 others.

Copy actions

By tapping on the more icon, you can select Copy Actions and paste it on the 3 other Lotties. Using the same logic, apply the right Lottie Controls and Set State.

Preview

In the preview, we want the first Lottie to play on load so toggle the Autoplay of the first Lottie. Also, set the Tab Item to Tapped.