Quaker Oats

Overview

Full-screen ad for Quaker Oats that opens with a cinematic food waterfall: ingredients cascading across three parallax layers into a bowl. topFoodLayer, midFoodLayer, and backFoodLayer animate downward at staggered rates (1.8x, 1.9x, 1.95x of base duration) using TweenMax, with a CSS clip:rect() mask on the foodWaterfall container that shrinks upward to create the illusion of ingredients falling into a bowl. After the intro, users browse a 4-product gallery (Apple Walnut, Summer Berry, Peach Almond, Blueberry Hazelnut) with per-product detail panels and "Learn More" CTAs.

The desktop and mobile experiences are architecturally separate — three completely separate DOM trees (contentBodyDesktop, contentBodyTablet, contentBodyMobile), each with its own carousel logic, arrow handlers, and product arrays.

Context

The food waterfall was the hardest part of this build. The three food layers needed to cascade at slightly different speeds to create depth, but the masking was the real challenge — I animated clip:rect() coordinates via TweenMax to shrink the visible region of the waterfall container upward, making it look like the ingredients were falling into the bowl rather than just sliding down the screen. The percentChanged/invertPercentChanged scaling system was my solution for making the intro animation work at any viewport size: it calculates a scale factor from the viewport dimensions, applies it to the intro container, then inverts it for child element positioning so everything stays proportionally correct. Android got a separate code path for the carousel transitions — TweenMax opacity crossfades on iOS, direct CSS property swaps on Android, because the older Android WebViews at the time couldn't handle concurrent opacity tweens without stuttering.

How It Works

Engineering

Engineering Decisions