GSAP Cocktail Website

Build similar projects step by step with JSM's detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🔗 Assets
6. 🚀 More

Build and deploy a stunning GSAP-powered cocktail website using React and Tailwind CSS—a modern, scroll-driven experience packed with advanced animations.

Key highlights:

• Dynamic SplitText reveals
• Smooth parallax scrolling
• Scroll-triggered effects using GSAP’s ScrollTrigger
• Pinned sections with animated content
• Sync video playback to scroll position
• Scroll-based image masking
• Custom animated carousel
• Seamless timeline animations
• Fully responsive UI across all screen sizes

Need help or facing bugs? Join JavaScript Mastery active Discord community with over 50k+ members where people help each other out.

• GSAP – JavaScript animation library for SplitText, ScrollTrigger, parallax, pinned sections, and more.
• React – Declarative UI library used for component structure and integrating animations.
• Tailwind CSS – Utility-first CSS framework for rapid UI design.
• Vite – Lightning-fast build tool with instant HMR and optimized builds.

✅ SplitText Animations – Create dynamic text reveals.
✅ ScrollTrigger Effects – Control animations based on scroll.
✅ Parallax Scrolling – Add depth with scroll-responsive motion.
✅ Pinned Sections – Lock sections during animation sequences.
✅ Scroll-Synced Video Playback – Cinematic storytelling via scroll.
✅ Image Masking Effects – Visually striking transitions.
✅ Custom Carousel – Animated, multi-navigation carousel.
✅ Seamless Timeline Animations – Spanning multiple sections smoothly.
✅ Responsive Design – Works perfectly on all devices.

And many more, including enhanced security and optimized performance!

Follow these steps to run the project locally.

Make sure you have the following installed:

• Git
• Node.js
• npm

git clone https://github.com/rr3s1/cocktails-gsap.git
cd cocktails-gsap

npm install

npm run dev

Open http://localhost:5173 in your browser.

All assets and snippets are included in the Video Kit:

This repository contains the code corresponding to an in-depth tutorial available on YouTube channel, JavaScript Mastery.

If you prefer visual learning, this is the perfect resource for you. Follow the tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

Enjoyed building this project? Take your skills further with JSM's PRO courses, packed with detailed explanations, advanced features, and hands-on exercises.