Explore

Micro Interaction Tab Design - Cool animation preparation using Rive

We needed to design a tab group for one of our apps, Planty. In this article, we will step by step examine how we created the tab group design with micro-interactions and crafted a cool animation that aligns with the application’s design system and overall theme.

Firstly, let’s introduce Rive for those who are new to it. Rive is a design tool that is gradually replacing Lottie and makes it easier to create interactive complex designs. Moreover, the designs have much smaller file sizes compared to Lottie. It’s becoming increasingly popular among digital product, and user interface designers. For more details, you can check out their

website⁠

Animation Preparation

⁠

⁠

To ensure the success of the animation, preparation is essential. The design needs to be made animation-friendly, and scenes need to be organized.

As you can see in the visual above, there are few leaves in the top left corner of the active tab. These leaves will sway to the right and left as the tab moves, depending on the speed and direction of the tab. To do this correctly, we need to create separate animations for each tab, meaning each tab will have three different scenes.

Preparation of Motion References

After preparing our animations, if possible, we should also create motion references for the objects. Using motion references can make the animation creation process more straightforward.

⁠

⁠

When creating animations for the leaves based on the tab’s speed, we can make our job easier by using motion references. To smoothly move the leaves according to the tab’s speed, I adjusted the frequency of the movement based on the velocity’s intensity. I created curves that extend to the right and left at regular intervals, gradually decreasing in length. I placed these motion references inside a circle since I will apply a rotation operation to make the leaves sway right and left. I drew an indicator that extends from the center of the circle upwards. This way, I can see the maximum and zero points of the movement while performing the rotation motion.

Starting the Motion

⁠

I connected each leaf to a skeleton and linked all the skeleton’s rotation operations to the indicator of the motion reference I created. Therefore, when I rotate the skeleton connected to the indicator, all skeletons will rotate. This way, we won’t clutter the timeline, and adjusting a single skeleton’s value is easier to manage. To make the leaves move elastically, I added extensions to the skeletons to create two stages. I connected the rotation of these extensions to the x4 times movement of the skeleton they are attached to. This feature adds elasticity to the leaves during rotation.

⁠

Since the leaves need to move with the active tab, I grouped the leaves and the bones of the leaves with the tab. Now, they will move together when the tab moves. During the movement, text elements outside the active tab also need to sway according to the movement. To achieve this, I simply increase and decrease the horizontal size of the text boxes. However, since no colors were given to the text boxes had no colors. Therefore, I prepared reference, colored boxes of the same size as the text boxes, making it easier to perform resize operations.

As the active tab moves, it should show only the active text inside, and the text outside should react to the movement. Therefore, I masked the active text group to the active tab object so that only the active text inside will be visible when the tab moves.

⁠

After completing all our animation work, let’s watch the animation in real-time to identify and optimize the points that need correction to ensure the organic quality of the movements. This process is similar to an artist looking at their drawing from a distance and evaluating it. While creating animations, manually created movements on the timeline can sometimes appear robotic, and this way, we can easily catch any overlooked errors.

⁠

Next, the last step is to turn the tabs into buttons. We can use the reference boxes we created to adjust the size of the texts. These hitboxes should move synchronously with the text areas to prevent any shifting. After completing the animations for the hitboxes, let’s apply all these movements to the other timelines. In other words, for a single button, we will have 12 timelines in total but don’t worry, since similar movements are involved, we can copy and paste the keyframes.

State Machine

⁠

In the state machine section, we combined the timelines of the scenes and set up inputs that trigger the button clicks. This helped us determine the conditions under which the animations would work.

For our hitboxes, we created listeners and assigned inputs to trigger when touched. Then, we brought all our timelines into the state machine and connected them all. I added input conditions to each connection so that scene changes wouldn’t occur without clicking on a hitbox.

⁠

In this article, we have examined how to prepare micro-interaction animations step-by-step. Consider using references when creating your animations and watch in real-time for optimization. This process will help you achieve more organic and fluid animations. I hope this article has been enlightening and beneficial for you. See you in our next design challenge.

PS. This tab will be available in future releases of Planty.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.