Quaker Oats
Interactive ad for Quaker Oats with a parallax food animation and a touch-scrolling product gallery, with separate desktop and mobile layouts.
- html5
- css3
- javascript
- gsap
- Format
- Page Grabber
- Platform
- Desktop + Mobile
- Engine
- iScroll v4.2 + GreenSock
- Agency
- Undertone
How It Works
1
~3sWaterfall
Three parallax food layers animate downward at different rates: almonds, berries, and oat flakes cascade past a centered bowl. Spoon animates in from below.
2
~2sIntro Copy
Headline copy reveals in sequence (copy0, copy1). Bowl and food layers settle. Transition to product gallery.
3
InteractiveBrowse
Desktop: left/right arrows cycle through 4 products. Product image on left, title and CTA on right. Mobile: iScroll-powered touch gallery with swipe navigation.
4
Click-throughLearn More
Per-product CTA buttons deep link to product pages with unique click IDs per flavor.
Engineering
3-Layer Food Waterfall
topFoodLayer, midFoodLayer, backFoodLayer animate at staggered rates using GreenSock, creating a parallax cascade effect. Each layer has independently positioned food elements.iScroll Touch Engine
iScroll v4.2 handles touch scrolling within the ad container. Native scroll is disabled (ad iframes block it), so iScroll provides momentum-based scrolling with CSS transform positioning.Split Gallery Architecture
contentBodyDesktop and contentBodyMobile are separate DOM trees. Desktop uses a left-content (product images) + right-content (info panel) layout with arrow navigation. Mobile uses a vertical scroll layout.Per-Product Click Tracking
Each flavor has its own data-utclickid (2-5) and CTA button, enabling per-product click attribution in campaign analytics.
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