Porsche

Overview

FormatPage Grabber

PlatformDesktop + Mobile

EngineGreenSock TimelineMax

AgencyUndertone

Full-screen reveal for Porsche built on a 12-layer image stack. Each layer is a full-bleed background image faded in rapidly via TimelineMax, simulating a camera-move reveal of the vehicle as it emerges from shadow into full detail. The intro sequence fires through intro_background0 to intro_background6 (with sub-variants like 2b, 2c, 4b, 4c, 4d), each z-indexed higher than the last, creating the illusion of motion through composited stills.

This was a premium automotive account where brand fidelity was paramount. Every pixel, timing curve, and color value went through multiple agency review rounds.

Context

The interesting engineering here was the progressive reveal technique. Instead of video (too heavy for ad units) or a single hero image (too static for Porsche), I built a 12-layer composited image stack where each layer adds more of the vehicle. TimelineMax fades them in at 40ms intervals using Sine.EaseIn, and the stagger creates the perception of the car rotating into frame. The Nexus fallback (introNexus) skips the entire animation sequence and shows everything at once. Those devices couldn't handle the z-index compositing without flickering. I also had to handle the Zepto/jQuery detection split at runtime since modern browsers got Zepto (lighter) while IE8 got jQuery as a fallback.

How It Works

Auto

Open

Page Grabber expands to full viewport. Initial hero image loads with the vehicle partially obscured.

Scroll-driven

Reveal

Reveal.js divides the creative into scroll-indexed sections. Each section triggers on a percentage of total scroll distance.

Scroll-driven

Detail

Vehicle specs, performance data, and model name animate in as the user scrolls through mid-sections. GreenSock controls each entrance.

End State

CTA

Final scroll position reveals the configurator link and dealer locator CTA. Click tracking fires through the ad platform SDK.

Engineering

Reveal Engine

Reveal.js maps scroll position to section visibility. Each section has an entry threshold and exit threshold, enabling forward and reverse scrubbing.

Animation Control

GreenSock for all motion. Scroll-triggered callbacks fire tweens rather than using scroll-linked CSS, giving precise easing control.

Dual Render Modes

PageWrap mode (partial overlay) and Page Grabber mode (full-page takeover) share the same creative but with different viewport calculations and close behaviors.

Brand Compliance

Exact Porsche brand hex values, font stacks, and minimum clear-space rules enforced in CSS. No approximations. Assets were delivered with pixel-level spec sheets.

Engineering Decisions

Automotive brands want the user to feel in control. Scroll-driven pacing lets the viewer linger on details or move quickly. Time-based animation forces a pace that may not match the user's intent.

Discrete sections give the creative director clear "beats" to design against. Each section is a self-contained visual moment, easier to review and revise independently.

This creative doesn't need TweenMax's timeline or stagger features. TweenLite is ~12KB lighter, which matters in an ad unit where every kilobyte affects load time and viewability scoring.

Publishers pay different rates for different formats. Supporting both from one codebase doubles the inventory without doubling the engineering work.