GSAP-powered caffeinated milk brand site with four flavour worlds and a scroll-animated showcase
Client
Concept Project
Duration
Build
Services
Web Development, Scroll Animation
Create a bold, flavour-forward landing page for a caffeinated milk drink brand with four flavours — chocolate, strawberry, oreo, and vanilla. The site needed to feel energetic and premium, with scroll-driven transitions between flavours that make each one feel like its own world.
We built a scroll-animated brand site using Vite + React 19 and GSAP. Each flavour gets its own animated section with colour-themed transitions, product reveals, and kinetic typography. GSAP ScrollTrigger drives the entire experience — section pins, flavour switches, and text animations all sync to scroll position for a fluid, addictive browsing experience.
Designed distinct colour-themed sections for each flavour — chocolate (rich brown), strawberry (vibrant pink), oreo (dark + cream), vanilla (warm cream) — each with its own personality.
Used ScrollTrigger to pin sections, animate product reveals, and transition between flavours with smooth colour morphs synced to scroll position.
Animated flavour names, taglines, and product descriptions with GSAP text effects that respond to scroll velocity and direction.
Built on Vite for instant dev cycles and optimized production builds, with React 19's latest features for clean component architecture.
Flavours
Chocolate, strawberry, oreo, vanilla
Animation
ScrollTrigger-driven flavour transitions
Framework
Fast builds, modern React
Experience
Pinned sections with colour morphs
Scroll inside the preview to browse the actual website. When you reach the bottom, the page continues scrolling.
Let's discuss how we can help you achieve your goals.
