JL

Mastercard

Interactive ad for Mastercard's Priceless Cities MLB campaign. Animated map with 9 stadium hotspots, partner experience popups, and booking CTAs.

  • html5
  • css3
  • javascript
  • gsap
Format
Page Grabber
Platform
Desktop + Mobile
Engine
Swiper + GreenSock
Agency
Undertone

How It Works

1
~3s

Brand Intro

Mastercard logo animates through multiple brand variants (full, headline, orange, red, text). Background transitions through brand color palette.
2
~1s

Map Reveal

Intro frame fades out. Interactive map slides in with 9 hotspot regions positioned over MLB stadium locations.
3
Interactive

Explore

Tapping a hotspot opens a partner experience popup: event imagery, description, terms disclosure, and "Book Now" CTA. Close button dismisses back to map.
4
Click-through

Book

"Book Now" fires a click-through tracked with a unique click attribution ID per hotspot (7 unique click IDs across the map).

Engineering

  • Interactive Hotspot Map

    9 absolutely positioned hotspot divs over a map background. Each hotspot manages its own partner experience popup: show, hide, and click tracking are independent per region.
  • 7
    logo variants

    Logo State Machine

    7 Mastercard logo variants (full, headline, headline_white, orange, orange-2, red, text) swap visibility based on interaction state. CSS class toggling with GreenSock fade transitions.

  • Partner Experience Cards

    Popup cards with event imagery, terms disclosure text, and booking CTA. Each card has its own close button and unique click attribution ID for campaign analytics.

  • Dual-Frame Architecture

    Two section elements: intro_frame and end_frame: act as discrete states. The transition between them is a full-screen crossfade, not a scroll.

Get in touch

Email me

From idea to production across design, creative, and engineering. I ship end to end, and the vision stays company-first the whole way.

jeffkliu@gmail.com