Project Overview
The Family of Eateries app is an interactive SVG-based web application that showcases three distinct restaurants under a single parent brand. This digital experience was designed and animated using Adobe Illustrator and GSAP, offering users an engaging and visually rich interface. The project features a splash page, a dynamic landing page, and dedicated restaurant pages for each eatery, all animated using SVG assets and GSAP motion scripting. The goal was to create a unified yet flexible digital identity for the family of restaurants while maintaining each one’s unique personality.
Objectives
The primary objective was to develop a visually captivating and animated web app that delivers a smooth user journey across three restaurant experiences. Key goals included designing SVG layouts in Adobe Illustrator, implementing scalable vector animations with GSAP, and integrating a fluid, responsive user interface. The project aimed to emphasize creative storytelling through design, brand consistency, and seamless navigation from the splash screen to individual restaurant pages. Additionally, functional aspects such as a working reservation form were incorporated to simulate real-life usability.
Challenges
One of the main challenges was designing SVG graphics in Adobe Illustrator in a way that would translate smoothly into web animations. Ensuring compatibility between the Illustrator-exported SVGs and GSAP animations required careful planning and structuring of layers and element IDs. Another challenge was maintaining smooth performance and responsive behavior despite the high number of vector elements and transitions. Balancing motion design with usability — especially in sections like the reservation form — also required thoughtful UI/UX decisions. Debugging complex animation timelines across multiple pages added to the technical complexity.
Click below to view the Prototype
Restaurant AppTools Used
- Photoshop
- GSAP
- Illustrator
- Jvascript