Audi

Interscroller brand reveal for the Audi A8. An animated particle constellation builds behind the vehicle as the ad scrolls into view inline within article content.

html5
css3
javascript
gsap

Format: Interscroller (Brand Reveal)
Platform: Desktop + Mobile
Engine: GreenSock + Canvas
Agency: Undertone

How It Works

Scroll-driven

Scroll Entry

As the user scrolls past the editorial content above, the interscroller viewport begins to reveal. The ad canvas fills the screen with a dark background.

~1.5s

Particle Build

Animated constellation nodes and connecting lines render across the canvas, creating a technology-forward network graphic. Nodes pulse and connections draw progressively.

~2s

Vehicle Reveal

The Audi A8 front-view hero fades in center-frame. Audi four-rings logo and "One giant leap for machine kind" headline animate above the vehicle.

Scroll-driven

CTA + Exit

"Explore the all-new Audi A8 >" CTA appears below the vehicle. "SCROLL TO CONTINUE READING" prompt at the bottom lets users exit the ad and return to the article without interruption.

Engineering

Interscroller Viewport
The ad sits inline within article flow. CSS clip-path and scroll-position listeners create the "window" effect. Content scrolls over the ad, revealing it progressively rather than inserting it abruptly.
Particle Constellation
Animated network of nodes and edges rendered on canvas. Each node has randomized position, pulse timing, and connection logic. The effect evokes Audi's technology-forward brand positioning.
Scroll-Driven Reveal
GreenSock ScrollTrigger maps scroll position to animation progress. The vehicle, headline, and CTA entrance are tied to viewport intersection, not time. The user controls the pacing.
Brand Dark Mode
Audi's brand standard uses a dark background with high-contrast vehicle photography. All typography uses Audi Type font with exact weight specifications.