A fun and engaging tutorial project: build a stunning cocktail-themed website using React, Tailwind CSS, and GSAP animations, including SplitText reveals, scroll-triggered effects, parallax, and more.
This project walks you through how to turn static content into a visually immersive experience using:
- GSAP – high-performance JavaScript animation suite for web-based experiences
- React – for modular components and seamless UI integration
- Tailwind CSS – for rapid utility-based styling and responsiveness
- Vite – blazing-fast dev server and build tool
🎥 This project was created by following an amazing YouTube tutorial by JavaScript Mastery.
Full credit goes to them for the design, concept, and implementation techniques.
If you found this helpful, consider subscribing to their channel and showing support!
Launch the project locally (see Setup & Run) and explore animations like text reveals, pinned scroll sections, parallax visuals, video sync, and masked image transitions.
- SplitText Animations – dynamic text transitions
- ScrollTrigger effects to orchestrate scroll-based interaction
- Parallax scrolling on background layers
- Pinned sections to hold animations in place while scrolling
- Scroll-synced video playback for immersive storytelling
- Image masking effects tied to scroll
- Custom animated carousel for featured cocktails
- Responsive design for mobile, tablet, and desktop
- GSAP (with ScrollTrigger & SplitText)
- React
- Tailwind CSS
- Vite
git clone https://github.com/Senurcreate/gsap_cocktails_tutorial.git
cd gsap_cocktails_tutorial
npm install
npm run devgsap_cocktails_tutorial/
- gsap_cocktails_tutorial/
- public/
- src/
- components/
- assets/
- App.jsx
- main.jsx
- package.json
- vite.config.js
- Inspired by the GSAP Cocktail Website by JavaScript Mastery.
- Built with ❤️ and shared under the MIT License.