I've been implementing animations using SVG and CSS. To generate complete animations from their components, I wrote an animation composer in R using joins, inspired by notions of compositionality and semiotic morphisms. I call it animatoR.
I've coded two narrative animations in it. One, Overload, was about a project that, due to faulty data, threatened to overwhelm me with round-the-clock work. People who work with the dataset I'm thinking of will recognise it from the evening sequence in the protagonist's thought bubble. Some of the images won't mean much to people outside our circle, but they refer to different kinds of work the guy was having to cram in to his pressurised day. You can view the animation as an animated SVG and an animated GIF.
The other animation, Six Degrees of Separation, is about a researcher looking for someone to share his ideas with. I think this one will make sense to everyone watching it. It is available as an animated SVG, and an MP4 video.
A few words about viewing the SVGs. Unfortunately,
some web browsers still can't handle these
properly, so will mess up the pages. I've found that
Firefox and Microsoft Edge both do this on some
tests. The best browser I've found is
Google Chrome (
).
This reliably gets all the way through
Overload, as long as it
can actually finish loading the images. Sometimes, they
make it hang, though I find that reloading
usually gets round this. But Chrome doesn't seem
to have any problem at all with Six Degrees of Separation.
If you can't view the SVGs, try one of the other formats.
When you start browsing, the animation will probably fill the entire width of the browser window. If the window is very wide, this may lengthen the picture so much that it goes off the bottom. If that happens, narrow the window.
On Overload, there is a pan-and-zoom control. It isn't possible to fast-forward or rewind this kind of animation, but you can pause and resume them, using the appropriate buttons. The progress circle to their right indicates how far is left to go. The animation will be paused when it first loads, so press the Play button. Once it gets to the end, it will repeat.
Acknowledgements to Peter Collingridge for the pan and zoom control and to "Weafs.py" for the progress circle. And to Heydon Pickering for his article in Smashing Magazine linked above, "Creating Cel Animations With SVG".
Some of these animations are performances, in the sense that a narrative film is. I've indicated those with "(P)". At the moment, the performances are the ones described above. The other items in the list, marked with "(T)", are demonstrations of animation techniques, which I did while designing the corresponding parts of animatoR.