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 open is a flipbook, 11 pre-rendered frames that a GreenSock timeline shows in turn over about a second and a half.

html5
css3
javascript
gsap

Format: Page Grabber
Platform: Desktop + Mobile
Engine: GreenSock timeline
Agency: Undertone

How It Works

~1s

Open

The Page Grabber expands to full viewport, and the header and Porsche logo fade in.

~1.5s

Frame sequence

Eleven pre-rendered background frames switch on in order, each over 0.04s with a 0.1s gap, so the reveal plays as motion.

~2s

Headline

The intro frame fades out over 1.2s. The first headline line fades in, then the second line, the third, and the Learn More button follow 0.3s apart.

Click-through

Learn More opens Porsche's page on a tracked click ID, one of 3 in the creative.

Engineering

One timeline for the open
A single TimelineMax queues the whole open: the 11 frame tweens, the intro fade, then the headline stagger. Retiming the sequence is an edit to that one list.
Zepto or jQuery
Before anything runs, the loader checks the browser and pulls in Zepto on modern engines or jQuery on older ones, so the same creative runs on both.
Open and leave-behind states
Closing the ad leaves a leave-behind bar, and tapping it restores the takeover. The format's script binds the open for you but not the close, so app.js wires that half itself.