GSAP Botanical Drink Slider Hero with Pour Preloader
Overview
A full-screen product hero for a botanical drinks brand: a glass pours full layer by layer and splits open, then four illustrated drinks ride a vertical conveyor, each landing in its own flower bed, light, petals and accent colour, driven by wheel, swipe, keys or the pager.
The page opens on a loader: the hero's glass rises out of the dark and pours full one flavour at a time, its caption rolling through each name as a progress line fills. Once the pour is done and the scene underneath has warmed up, an accent line cuts through the glass and the two halves of the screen part up and down. The light washes in, the orbit ring draws itself round the drink, the drink rises into place, the headline's letters climb out of their masks and the flower bed grows up around the glass, bloom by bloom.
Details
- Category
- Hero
- Interaction
- On Load + On Scroll + Drag + Mouse Move + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 23 componentsBuilt with the same techniques
No. 022 / Hero
GSAP Editorial Night Hero with Growing Botanical SVG
On Load · Mouse Move · On Hover · On Click
No. 020 / Preloader
GSAP Column Preloader & Blooming Lily Hero Section
On Load · On Scroll · Mouse Move · On Hover
No. 021 / Scroll
GSAP Pinned Statement Hero with Expanding Photo
On Load · On Scroll
(02)FAQ
GSAP Botanical Drink Slider Hero with Pour Preloader — FAQ
01What do I need to install?
npm install gsap @gsap/react. CustomEase, DrawSVG, Observer, ScrollTo and SplitText all come with gsap. It's built for React or Next.js with Tailwind CSS v4 for the layout classes; the stage geometry, fonts and the loader's animation live in botaniq-hero.css, which the component imports.
02Which fonts does it use?
Archivo for the masthead, logo and pager number, loaded with next/font as --font-archivo with axes: ["wdth"], since they're set at 125% width. The flavour names are Instrument Serif italic as --font-instrument-serif, and the labels Geist Mono as --font-geist-mono. The example loads all three; each falls back to a system face.
03Can I change the flavours?
Yes. Each flavour's name, notes, number, accent colour, liquid gradient, scene light and ingredients are in data.ts, and the hero, loader and pager follow whatever is there. The artwork is keyed by flavour id: what floats in each drink is in drink.tsx, each flower bed's mix in flower-field.tsx and the petals in petals.tsx, so a new id needs an entry in each of those.
04Does it need image files?
No. Every drink, flower, fruit and petal is SVG drawn in art.tsx, so there is nothing to put in /public.
05Can I put sections below it?
Yes, and it expects to be the first thing on the page: it's one screen tall, it starts every visit at the top so the loader plays, and while the page is at the top the wheel, swipes and arrow keys drive the slider. Going on past the last flavour glides the page down to whatever follows, and scrolling back to the top docks it again. With nothing below it, the slider loops.
06Is it accessible?
It's marked up as a carousel, each drink as a slide, and the flavour on screen is announced as it changes. The pager dots and the previous and next buttons are real buttons, and the arrow, Page Up, Page Down and space keys work too.
07What happens with reduced motion?
The loader shows a full glass and fades away, slides cross-fade instead of travelling, and there's no autoplay, drip, parallax or swaying.