How To: Fake-a-roo Spinning Globe

So from time to time you may want to have some kind of globe-like thing spinning on a web page –and you don’t want to go full-on 3D (expense, plug-in, weight, budget, whatever); just something to get the job done. One way is the circle mask. This is an old trick and can have a tendency to look pretty cheesy unless you are careful with your tomfoolery.

Source Map
Go out and get yourself a map of the world. Nerd alert: your life will be easier if it’s a cylindrical map projection. Since this is a repeating animation, you’ll need to have some overlap (add at least one-half-again the original image) so there is no skipping. The oceans should be transparent. I’ve also made the equator the most opaque, and increased transparency approaching the poles –this will help make the flat images bulge more when it’s time to Columbus-ize them.

Map of the world for the foreground animation. Note that an additional half of a world has been added to the width so it can loop without jumping.

And a reversed world to use in the background animation. Note that it is fainter so it will visually recede.

Animation
This globe is made for Silverlight, so I am using Microsoft Expression Blend to create the storyboard animation. Using the images described above, I translate the X position of the foreground map from right to left and the background map from left to right. The use of a reversed Earth animating in the opposite direction as the foreground Earth animation goes a long way toward the illusion of a rotating sphere with depth. Loop this animation so it rotates forever, or for however long you need it to rotate.

Then mask (clip) the image group so that only a circle is visible at any time. The result is a really flat looking globe animation. Not there yet.

Animating the two maps in opposite directions within a circular mask.

Adding Depth
Let’s get this squirrely animation looking less like a disk and more like a sphere. It’s going to take gratuitous static decoration: tons of layers of radial gradients give the illusion of depth and material. Here they are…

	Circular base with a general background color and a fuzz around the edge (the fuzz is optional, as you’ll add more later).
	Add a layer with a radial gradient who’s darker center tends near the bottom
	A squished ellipse at the bottom will give the illusion of a reflection on the back wall of what is starting to look suspiciously like a sphere.
	Pile onto that another semi-transparent layer who’s darker center of radial gradient tends near the top. When you add the foreground reflection (in the last step) this layer will really pop. Now you’ve got the background gradients in place and are ready to englobalize…
	Now throw in your circularly-clipped earth animation. This animation is the sole visual cue for rotation, and within the context of the unmoving depth decoration, goes a long way in making this totally 2D thing look like it is spinning in space. But, see how the side of Africa is immediately peeling over to the foreground? Illusion busted. If you watch the animation at this point it will still just look kind of like a deflated beach ball flat-rolling along a track.
	Maybe a happy little atmoshere lives around the edges of this globe -a 600 year old optical illusion: atmospheric perspective! See how there is an inner haze around the perimeter that obscures some of the geography around the edges? This is a double win: not only would Leonardo De Vinci be proud of you, but you are also covering the biggest weakness of the animation: the clip edge where the flat masked content immediately peels from background to foreground.
	The foreground reflection (semi-transparent white radial gradated ellipse near the top) is the last element to connote a glassy sphere. Now you’ve got the next best thing to an actual 3D globe.