Animated Smooth Slide Nav

This animated mobile navigation concept demonstrates a refined approach to state transitions using both motion and colour. Created in Figma, the interface features five primary sections—Profile, Search, Post, Chat, and Settings—anchored by a bottom navigation bar. As users switch tabs, a soft-coloured background block slides beneath the active icon, revealing a unique hue associated with each section: Cream, Honeydew, Pearl, Desert Sand, and Old Rose, in order.

The transition is designed to feel smooth and intentional, offering visual feedback without interrupting flow. The icon colours shift from Thistle (unselected) to Black (selected), while the unselected icon backgrounds remain Dim Gray, subtly receding to allow the active state to stand out.

The palette leans into warm, muted tones that evoke a calm, modern aesthetic while giving each section a clear identity. Combined with fluid motion, this interaction enhances usability and elevates a familiar UI pattern with a minimalist, thoughtfully branded touch.