Velvet Pour

Description

A visually rich, scroll-driven web experience for a fictional cocktail brand, built using React and GSAP. Focused on advanced UI animations, scroll interactivity, and responsive performance for modern storytelling.

Features

• 🎞️ Scroll-Synced Cinematic Animations – Scroll-based triggers powered by GSAP ScrollTrigger sync animations, videos, and content transitions precisely with user scroll for a cinematic effect.
• 🔤 SplitText Animations – GSAP SplitText integration enables animated word and character reveals, adding high-impact visual emphasis to titles and section intros.
• 🧲 Pinned Scroll Sections – Key content blocks remain fixed while animations play out—great for guided storytelling and focus-driven interaction.
• 🖼️ Parallax Scrolling & Image Masking – Multiple depth layers move at different speeds to create immersive parallax effects, while scroll-triggered masks transition between images seamlessly.
• 🎠 Custom Animated Carousel – A handcrafted image carousel with animated slides, scroll snapping, and responsive touch controls—fully styled with Tailwind CSS.
• 📹 Scroll-Controlled Video Playback – Video segments play in sync with the user’s scroll position to deliver story-driven content in an interactive format.
• 🧩 Multi-Section Timeline Animations – Cross-section animation timelines deliver smooth transitions across the entire site with shared states and fluid motion.
• 📱 Responsive & Fluid Design – Optimized for all screen sizes using Tailwind CSS and modular React components, with adaptive GSAP behaviors across breakpoints.

Technologies

Links

Hover over the following links for a quick preview

Images