Open Source ProjectActive Development
Mai Tai
Explore our modern, scroll-driven cocktail landing page. React, Tailwind CSS, and GSAP animations create an immersive brand experience. See advanced web design in action.
The GSAP Cocktail Landing Page is a modern, scroll-driven, animated website built using React, Tailwind CSS, and GSAP. Designed to showcase a premium cocktail brand or beverage product, the site delivers a cinematic storytelling experience with scroll-synced video playback, parallax motion, SplitText reveals, and pinned animations. This project was inspired by a JavaScript Mastery tutorial but customized and deployed by me as a hands-on learning experience in animation-heavy frontend development.
My Role & Contribution
Fully implemented the entire project from scratch
Deployed the site on vercel, ensuring live accessibility and fast delivery
Technical Challenges & Solutions
- Mastering GSAP’s animation syntax and timing controls for seamless scroll-based transitions
- Debugging animation glitches during section pinning and unpinning
- Achieving pixel-perfect responsiveness across varying screen sizes
Key Features
Scroll-triggered animations using GSAP’s ScrollTrigger
Smooth parallax scrolling effects for immersive visual depth
Custom-built responsive carousel with animated transitions
Responsive design optimized for mobile, tablet, and desktop
Pinned sections that lock content in place while animating
Technical Details
Technology Stack
GSAPReactTailwind CSS
Key Results & Impact
- Launched a fully interactive landing page that demonstrates frontend animation expertise
Related work
View all projectsExplore more projects
A few more builds connected by stack, domain, or implementation patterns.
