Airbnb Metrics Page Syncs Animation With Scrolling

By Cameron Scott 

design, web design, social networks, social media, sharing apps, airbnbAirbnb belatedly released its 2012 overview today, showing significant growth — and impressive design chops.

The short-term apartment rental service hosts 300,000 listings, more than double the 120,000 it had at the start of 2012. Three million people from 150 different countries have stayed in an Airbnb rental, according to the company.

The website on which Airbnb shows off its growth numbers was equally impressive. It’s pretty, yes. But it also features useful infographics and animation synched to the user’s scrolling. It is an impressive demonstration of another thing Airbnb accomplished in 2012: redesign most of its pages in ways that remind the user that the company was founded by a designer.

SocialTimes asked Airbnb how they built the annual results page. This is what a spokesman told us:

Our engineers and designers structured the page in a similar way to an animated film. To determine what point of the animation you’re at, we use the height of the entire page and then calculate how far you’ve scrolled (example: if the animation was 100 frames and you had scrolled 20% of the way down the page, you’d be seeing frame 20). If you stop scrolling, you are viewing a single frame of the animation. And our engineers did some magic with the transitions between frames to make everything feel like one seamless, connected experience.