The North Face

View demo
The North Face

Product reveal campaign for The North Face FuseForm technology. Animated reveal sequence, brand film video overlay, and orientation detection with a rotate prompt for landscape.

Overview

FormatPage Grabber
PlatformDesktop + Mobile
EngineGreenSock
AgencyUndertone

Full-screen ad for The North Face FuseForm fabric technology. The creative unfolds as a product reveal: headline, product name, and the FuseForm graphic animate in sequence, followed by dual CTAs: explore the product or watch the brand film. The video plays in an isolated overlay above the creative.

Built with careful attention to device context: landscape mode triggers a rotation prompt so the full-screen format isn't compromised.

How It Works

~3s

Reveal

White overlay fades. Background jacket imagery loads. North Face logo appears. Headline text animates in from hidden state.

~2s

Product

FuseForm technology graphic slides in. Explore FuseForm CTA and Watch Video button fade up simultaneously.

Interactive

Video

Watch Video opens a full-container overlay with the brand film. Close button returns to the reveal state.

Conditional

Orientation

On mobile landscape, the creative is replaced with a rotation prompt: logo, text, and spinning phone icon.

Engineering

Product Reveal

GreenSock timeline: whiteOverlay fade, background load, jacket texture, logo, headline, FuseForm graphic, CTAs. Each element uses independent easing.

Video Overlay

Isolated video container floats above the creative with its own close button and player instance, preventing interference with the main timeline.

Orientation Gate

CSS-hidden placeholder activates via media query on landscape. JavaScript detects orientationchange events and toggles main creative visibility.

Dual Layouts

Desktop and mobile render from separate containers with independent asset files: different crops, text sizes, and CTA positions.

Engineering Decisions

Reflowing a full-screen product reveal for landscape would require a second complete layout. A rotation prompt is faster and maintains design integrity.

Inline video would push content down and break the reveal composition. An overlay keeps the video separate: users return to exactly where they left off.

Different image crops per device. Desktop shows a wide jacket shot, mobile shows a tighter product crop. Responsive scaling can't match purpose-shot photography.

The FuseForm technology story unfolds best as a narrative. Showing everything at once loses the pacing that makes the product feel innovative.

Project stack

More projects