🍸 GSAP Cocktail Website

An animated cocktail-themed website built while learning GSAP (GreenSock Animation Platform).
This project focuses on creating smooth, engaging animations using GSAP timelines, scroll-based effects, and modern React tooling.

🔗 Live Demo: https://cocktail-opal.vercel.app/
📦 Source Code: https://github.com/DevanshTyagi04/gsap-cocktail

---

✨ Features

• Smooth GSAP-powered animations
• Timeline-based transitions
• Scroll-triggered effects
• Modern UI with motion-focused design
• Built using fast and lightweight Vite setup
• Fully responsive layout

---

🛠️ Tech Stack

• React – Component-based UI
• Vite – Fast development & build tool
• GSAP – Advanced animations and timelines
• CSS – Styling and layout

---

🎯 Learning Objectives

This project was built to:

• Understand GSAP core concepts (timelines, tweens)
• Learn how to integrate GSAP with React
• Practice scroll-based animations
• Improve UI/UX using motion design
• Get comfortable deploying frontend apps on Vercel

---

📂 Project Structure

src/ ├─ assets/ ├─ components/ ├─ App.jsx ├─ main.jsx └─ index.css

---

🚀 Getting Started Locally

Clone the repository:

git clone https://github.com/DevanshTyagi04/gsap-cocktail.git cd gsap-cocktail

Install dependencies:

npm install

Run the development server:

npm run dev

Build for production:

npm run build

🌐 Deployment

This project is deployed using Vercel.

🔗 Live URL: https://cocktail-opal.vercel.app/

📌 Future Improvements

Add more interactive GSAP effects

Improve accessibility

Optimize animations for performance

Add mobile-specific animation tweaks

👨‍💻 Author

Devansh Tyagi