Grey Goose
Split-panel interactive ad for Grey Goose vodka. Brand messaging and hero bottle on the left, a 4-tab cocktail menu on the right with recipe cards, ingredient imagery, and article click-throughs.
- html5
- css3
- javascript
- gsap
- Format
- Page Grabber
- Platform
- Desktop + Mobile
- Engine
- Greensock
- Agency
- Undertone
How It Works
1
~2sReveal
Reveal expands. Background fades in, Grey Goose bottle animates into position on the left. Logo wipes in via animated clip:rect.
2
InteractiveMenu
4-tab menu on the right panel. Each tab swaps in a different cocktail recipe card with ingredient imagery and article content.
3
InteractiveEngage
Users browse recipe cards and click "View Full Article" buttons to navigate to full cocktail content on the Grey Goose site.
4
End StateConvert
"Gift Now" CTA and logo click-through are always visible on the left panel regardless of which tab is active on the right.
Engineering
Split-Panel Architecture
Left column (left_content) is fixed brand messaging: logo, headline, bottle, CTA, terms. Right column (right_content) is a tabbed container with 4 swappable content areas controlled via opacity toggles.Cinematic Intro
A Greensock sequence choreographs the reveal: background fade, bottle opacity + slide to 90% right, logo wipe via animated clip:rect, then bottle repositions left as the menu appears. Hardware-accelerated CSS clips keep it smooth.Library Auto-Detection
A proto-sniff check (`'__proto__' in {}`) determines browser capability and loads Zepto (lightweight) or jQuery (full) accordingly. This pattern shipped across all campaigns using the shared module library.Device-Aware Imagery
Every tab panel renders separate desktop and mobile image assets via CSS class toggles. Brand-critical compositions get purpose-rendered crops per screen size rather than responsive scaling.
More projects
Get in touch
From idea to production across design, creative, and engineering. I ship end to end, and the vision stays company-first the whole way.
jeffkliu@gmail.com