HBO: Game of Thrones

Overview

FormatPage Grabber

PlatformDesktop + Mobile

EngineGreenSock

AgencyUndertone

One of the highest-profile campaigns I shipped. The brief demanded an experience that felt cinematic, not like a banner ad. I built a multi-scene animated narrative with atmospheric effects, orchestrated transitions, and a final CTA that felt like a title card.

Every creative was hand-coded from Photoshop comps. No template tools, no drag-and-drop builders.

How It Works

~3s

Reveal

Page Grabber takes over the viewport. Hero imagery fades in with atmospheric smoke effects layered behind the key art.

~5s

Narrative

Character and scene artwork transitions using GreenSock. Each beat is sequenced with precise easing and stagger timing.

Continuous

Effects

Particle-style sprite animations for fire and atmospheric haze run continuously behind the primary artwork layers.

End State

CTA

Tune-in date and network logo fade up as a title card. Click-through to HBO.com tracked via the ad platform SDK.

Engineering

Timeline Orchestration

GreenSock sequences all scene transitions into a single master timeline with nested sub-timelines per scene. Callbacks manage DOM state between scenes.

Atmospheric Effects

Smoke and fire effects built with sprite-sheet animation. CSS background-position steps through frames at a fixed interval, layered behind the primary artwork with CSS blend modes.

Asset Optimization

High-fidelity HBO artwork compressed for ad delivery constraints. Sprite sheets for effects, CSS sprites for UI elements, JPEG quality tuned per-asset to hit viewability load targets.

Platform Lifecycle

the ad platform SDK manages the full ad lifecycle: impression fire, viewability tracking, click attribution, and auto-close timeout to protect publisher content.

Engineering Decisions

A 4-scene narrative with 20+ tweens needs a timeline abstraction. Chaining onComplete callbacks creates callback hell that's impossible to debug or re-sequence during creative review.

Canvas was unreliable in IE9 and early mobile WebKit. CSS keyframe animations couldn't match the organic look of pre-rendered fire frames. Sprite sheets gave the best visual fidelity with maximum browser support.

The franchise demanded a cinematic impression. An in-page embed competing with publisher content would undercut the brand's premium positioning. Full-page format commands 100% attention.

Ad viewability is measured by load time. A beautiful ad that takes 4 seconds to load gets a 0% viewability score. Every asset was compressed to hit a sub-2-second load target.