Project Objectives
This project is a dynamic multi-page web application featuring animated transitions to enhance user engagement. It provides a seamless navigation experience between the landing page and various restaurant-themed sections. Built using HTML, CSS, and JavaScript, it incorporates SVG animations and GSAP for smooth, interactive effects.
Challenges
One of the key challenges was the design process, as conceptualizing and finalizing a unified aesthetic for the application proved difficult. Additionally, working with SVG animations involved a learning curve, particularly in handling animation timing, targeting specific elements, and seamlessly integrating these animations into the user interface.
The Process
The process started with structuring the application and designing SVG files for the splash screen, landing page, and restaurant sections. HTML and CSS were used to create the layout, while GSAP animations enhanced the experience with effects like scaling, sliding, and fading. JavaScript was then implemented to manage user interactions, enabling seamless navigation between pages and dynamically updating restaurant-specific details.
The Deliverable
The final product is a responsive, animated multi-page web application with a landing page and restaurant-themed sections. It features seamless GSAP-powered transitions and dynamic JavaScript functionality, providing users with an engaging and visually unified experience.
Tools used
The project was created using Illustrator for graphics, VS Code for coding, HTML and CSS for structure and styling, JavaScript for interactivity, and GSAP for smooth animations.
