Smartial Wayback Machine Text Extractor

Live version of this page exists.
However, it is different from the archived page (2 redirect/s found...)

https://web.archive.org/web/20130630142437/http://www.webdirections.org:80/blog/designdevelopment-inspiration-into-the-arctic/

This article contains 2 images. You will find them at the very end of the article.

This article contains 372 words.

Under the Hood – Into the Arctic site

By: John
Tweet: @johnallsopp
June 25, 2013

A few weeks back, GreenPeace’s Into the Arctic site caught our attention. It allowed you to follow an expedition to the North Pole, with the goal “to declare it protected on behalf of all life on earth”.

Lofty and worthy aims, coupled with a very sophisticated use of animation and interaction, including what at first glance appears to be animated 3D maps.

Which is very cool, but probably only something a small percentage of their visitors who have WebGL enabled in the browser might see.

Interactive 3D maps with just simple 2D images, CSS3 Transforms, and a touch of SVG

But what’s this? It works on devices and in browsers without webGL? Hmmmmmm.

In fact, the developers have done something very clever. The map is actually a stack of absolutely positioned elements, with a judicious use of SVG for the lines between each camp location (the circles with the + in the middle, which are simply div elements).

The animation appears to be done with JavaScript, rather than CSS animations and transitions, an interesting choice.

By choosing this approach, the developers

get a much wider range of devices which will experience the rich experience they’ve worked hard to create, since CSS 3D Transforms are far more widely supported than WebGL
have a much smaller download size overall compared with using an animated image or video
have created a more interactive experience as compared with using an animated image or video, as you can explore the map

I suspect we might start seeing more uses of this pseudo 3D technique, particularly with mapping. So, if you’re looking at adding a bit more interaction, animation and oomph to your maps make sure you check out Into the Arctic.