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.Library Auto-Detection
A proto-sniff check (`'__proto__' in {}`) determines browser capability and loads Zepto (lightweight) or jQuery (full) accordingly. The Porsche creative uses the same check.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
Working end to end across design, creative, and engineering, where creativity, collaboration, and ownership build toward the company's goals.
jeffkliu@gmail.com