As a developer who worked extensively with Flash back in the days when the web was entirely desktop, I sometimes miss a bit of "pizazz" on today's mobile friendly, cross-device/platform/browser web. I am also working on a digital signage platform as part of my full time job, so animation and "Flashlike" content is of a professional interest.

While Flash has pretty much died on the modern web, there are still technologies than can fulfil some of what Flash could do, the two main contenders being CANVAS and SVG. I have done some pretty complex work with the HTML5 CANVAS API, but at this point in time, I've not had chance to get stuck in to see what SVG can do...watch this space..

Overview

This set of tests aims to explore Snap.svg and manipulating an existing SVG file. The source file is below....

Example 1 - Translate

The image below is pulled in using Snap, which then translates the Y of the ninja character, pushing it down, and giving the illusion that the ninja has fallen into the hole...a good starting point for an animation...