3D rotating globe

Composited & Coded
Adobe After Effect | jQuery | CSS3 | HTML5

The rotating globe was a requirement from the client upon building the Zurich Insurance South Africa corporate website, it had to be included inside a slideshow on the home page.

The colour and look of the globe had been determined by the client beforehand and implementing a already-built animation was out of the question. The options and resources were very limited. The requested IE8 support was another variable to consider. I have been provided with a map vector from our designer, my research led me to a nice jQuery plugin called jQuery.jsmovie. I wanted to avoid video or Flash if possible.

jQuery.jsmovie basically works like a motion film camera, all I needed was the “frames”.

The challenge was the creating the frames, so I had to create the 3D sphere with the provided bitmap (see below) then the rotation animation, all done in Adobe After Effect, the next step was to export the render to JPG Sequence which worked in combination with jQuery.jsmovie.

map

I implemented the animation into one of the slides with a static state which served as a pre-loader, once the user visits the home page, the frames loads in the background while the slideshow works properly, the globe animation start to play automatically once all the frames are loaded. Below is the result.