Web Directions Conferences for web and digital 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

We make events for the web professionals shaping Australia's digital future

Learn more about us

Web Directions South is the must-attend event of the year for anyone serious about web development

Phil Whitehouse General Manager, DT Sydney

Join us in 2018:

  • Web Directions Summit 2018

    Our legendary event. Two big tracks, one Product/Design, one Developer focused.

    Sydney November 2018

    Details
  • Web Directions ai 2018

    The intersection of Technology, Business & Design with Ai

    Sydney October 2018

    Details
  • Web Directions Culture 2018

    Creating better teams and workplace cultures

    Sydney October 2018

    Details
  • more web directions events

    See our complete line up of awesome events

       

    Details