Porsche

Page-grab brand ad for Porsche. It opens into a full-screen takeover with the 911 hero and the "Forever Amazing" headline, then a Learn More click-through. The motion is a rendered image sequence played in order rather than live tweening.

html5
css3
javascript
gsap

Format: Page Grabber
Platform: Desktop + Mobile
Engine: Image sequence
Agency: Undertone

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.