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 professionals shaping Australia's digital future

Learn more about us

Going to #wds18 has given me inspiration to attend more conferences. Meeting tech folks like myself and learning from each other is pretty amazing!

Hinesh Patel Ruby and React Developer

Join us in 2019:

  • Web Directions Code 2020

    Australia's conference for JavaScript Developers and Front End Engineers.

    Melbourne June 4 & 5 2020

    Details
  • Web Directions Product Design & Management 2020

    Australia's conference for Product professionals. With dedicated product design and product management tracks.

    Melbourne July 1 & 2 2020

    Details
  • Web Directions Summit 2020

    A conference for the whole digital team–featuring product, design, front-end dev, and new people/talent/culture tracks.

    Sydney November 5 & 6 2020

    Details