My client, the Rocklin Commons' project design lead, required a unique and engaging way to present the navigation of this project's key details in his portfolio.

Instead of a traditional static menu, the goal was to create an interactive logo-driven navigation system that would enhance the site's visual identity while remaining intuitive for users.

I designed and produced a custom Lottie animation that transforms the Rocklin Commons logo into an interactive tooltip navigation menu. The animation provides a dynamic and memorable entry point to key details of the project while maintaining clarity and usability.

The client wanted a navigation experience that felt distinctive and branded, rather than relying on conventional menu structures. The solution needed to:

Preserve the visual integrity of the Rocklin Commons logo

Provide a smooth and intuitive user interaction

Be lightweight and web-optimized for modern websites

The interaction also needed to balance visual impact with usability, ensuring users could easily discover and access navigation options.

I developed a fully interactive Lottie animation that converts the logo into a navigation control.

When the user clicks the logo, a set of animated navigation tooltips appears, revealing different menu destinations. The animation is designed to feel responsive and polished while remaining efficient for web delivery.

Key interaction behaviors include:

Logo-triggered navigation menu

Animated tooltip expansion around the logo

Clear hover and interaction feedback

Lightweight Lottie implementation for web performance

The result is a navigation element that feels like part of the brand itself rather than a separate interface component.

LottieFiles - Lottie Creator & State Machines

Adobe After Effects

Adobe Illustrator

The final animation delivers a visually engaging, intuitive navigation experience that enhances Rocklin Commons' brand presence. By turning the logo into an interactive interface element, the design adds personality and memorability while maintaining performance and usability.

The animation is optimized for seamless integration into modern web environments and can be easily implemented across digital platforms.