Nabisco Oreos

Overview

FormatPage Grabber

PlatformDesktop + Mobile

EngineGreenSock

AgencyUndertone

Interactive ad for Oreos. Users twist cookies apart, lick the cream, and dunk into milk, each action powered by GreenSock rotation, position, and opacity tweens. A seasonal flavor gallery showcases limited editions. The playful mechanics turned a CPG ad into something people actually wanted to interact with.

CPG campaigns in this role needed to create engagement with everyday products. The trick with Oreos was making a familiar cookie feel interactive and surprising.

How It Works

~2s

Cookie

Giant Oreo cookie renders center-screen. Oreo logo and "Twist, Lick, Dunk" tagline animate in with playful spring easing.

Interactive

Interact

Users twist the cookie (rotation gesture or tap). The cookie separates, revealing the cream layer. Dunk interaction drops the cookie into an animated milk glass.

Interactive

Flavors

Seasonal flavor gallery: Golden, Birthday Cake, Mint, Peanut Butter. Each flavor renders with its package color and unique cookie design.

End State

Shop

CTA to Oreo.com with flavor-specific routing. Recipe suggestions and seasonal promotion links.

Engineering

Cookie Mechanics

GreenSock rotation and position tweens simulate the twist-apart motion. CSS layering separates the top cookie, cream, and bottom cookie into independent animatable elements.

Dunk Animation

The cookie drops into a milk glass with GreenSock position and opacity tweens. Splash particles animate from the impact point using staggered sub-tweens.

Flavor Gallery

Each flavor is a self-contained card with package color background, cookie render, and flavor name. GreenSock transitions between flavors with playful bounce easing.

Playful Motion

Spring and bounce easing throughout: Back.easeOut, Elastic.easeOut. The motion language matches Oreo's brand personality: fun, playful, never serious.

Engineering Decisions

Video is passive. Twisting an Oreo is a sensory ritual that 100% of the audience knows. Making it interactive creates a moment of recognition and play.

Oreos are for kids and kids-at-heart. Smooth, corporate easing curves would feel wrong. Spring and bounce easing matches the brand's playful energy.

Oreo releases 5+ limited flavors per season. Showcasing the variety drives curiosity: users discover flavors they didn't know existed.

Separate layers (top, cream, bottom) enable physics-like interactions: the twist separates them, the dunk moves them independently. A sprite would be a flat animation.