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.

html5
css3
javascript
gsap

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

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.