Year round learning for product, design and engineering professionals

Under the Hood – Into the Arctic site

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.

3D Mapping with 2D images and CSS 3D Transforms
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.

Technologies referenced in this article

delivering year round learning for front end and full stack professionals

Learn more about us

I had an absolute blast, learnt so much, and met so many great people

Carmen Chung Software engineer, Valiant Finance