Map Pin Drop

Why it works

Map, pin, and fragments use only one brand color plus deep blue and white, and the information is a single point and a single place name. The same pin-and-fragment burst carries on from the graphic world into real street view, connecting a customer from a dot on a map to a real storefront.

Spec

Timing

Film 11s. City one: name rises 0.12s, pin drops 0.5s (0.3s), impact 0.63s, fragments to 1.27s, hold to 3.9s. Pull-back to the country 3.9-4.9s; 19 network pins pop 4.45s onward; route line 5.0-5.8s; push-in to the second city 5.85-6.95s; second pin drops 7.0s; dive into the pin 8.05-8.6s; end card 8.6-11s

Easing

Pin drop cubic-bezier(0.34,1.56,0.64,1) over 0.3s; fragments expand cubic-bezier(0.16,1,0.3,1) over 0.6s (lines grow power2.out 0.22s then shrink power2.in 0.38s); pull-back, route and push-in cubic-bezier(0.65,0,0.35,1) (zoom interpolated on a log scale); dive t^3; city name and tag expo.out

Camera

City one framed about 26 km wide and pushing 4% per second; pulls back over 1.0s to the whole country, drifts 2% per second, pushes over 1.1s into the second city (framed about 23 km wide, 4% per second again), then dives 8.05-8.6s with the zoom growing 2.2x and the pin scaling from 1.45x to 12x

Subject

A navy location pin (scale 1.45) drops 360px from above; at impact 9 fragments burst outward (4 white lines, 3 dots, 2 squares, one navy) and pin two bursts 10 (4 lines, 2 dots, 3 squares, two navy, plus an expanding ring of radius 48 to 150). A white 5px route arcs north from city one to city two with an 11px round head. 19 small indigo pins mark the live cities. End card: pin settles at scale 1.2, mini map with 20 dots and three pulse rings, wordmark, subline and three stats (21 US cities, 94 min, $0)

Sync

The 168px city name (Oswald, white at 43%) is locked to the map and scales with the camera push; both pins and the 19 city pins follow the camera. The cut to the end card happens at 8.6s as the pin fills the center, and the end-card pin continues from the same scale

Style

Land #7667f6 on a deeper water purple #5d4bea, navy pin #0f1f3d, white roads (zoom-dependent opacity), fragments and route, indigo network pins #4a37d6. Wordmark Inter 700 150px, letter-spacing -0.055em; end card on the same purple

Prompt

People describe it as

• A location pin drops on the map and fragments burst around it
• The map pulls out to the whole country and then flies to the next city
• A line is drawn from one city to another

Often confused with

• Confirmation BurstConfirmation Burst puts fragments at the contact point of a tap or payment; in Map Pin Drop the fragments appear at the pin's landing point on the map.
• Match CutMatch Cut swaps the map pin for a pin in real footage; Map Pin Drop is the pin dropping, the fragments, and the pull-back route.