This [interactive tour]([object Object]) through the city of Raqqa in Syria was also an experiment for a new way of creating pan & zoom slideshows in Illustrator.

Starting from a huge overview artboard, in this case a satellite image of the entire city, you define your ‘scenes’ using Illustrator artboards, in which you then add annotations and texts.

A slightly modified version of ai2html then exports the artboard background images, the HTML layer for all texts plus an SVG layer for vector content for each scene.

Some JavaScript code was then put together to animate through the scenes just using CSS keyframe animations and transforms.