Consider two slides in SVG - with one of that is clearly a transition from the other. I want to tween that transition, and that is what this blog entry details.

Those two slides:

There is an implied transition between the two, and some JavaScript can recreate that in a process called tweening:

Replay SVG transition

The Github project is here. The JavaScript logic that does the tweening is all in the index.html page.

The two SVG slides were exported from OmniGraffle. I used a separate canvas in Og for each slide. That meant duplicating a canvas when ready to do so. Omnigraffle doesn’t allow you to set IDs for elements (sadly), so I had to do that by hand. I also had to add a seemingly spurious <div> to aid embedding in HTML. The SVG for the diagram is fairly small. I only needed to tween four attributes of three elements inside the SVG document to get it all working smoothly.

If you want to do tweeing in this way, you will have to follow some rules. The shapes and lines you want to tween need to be in both the before and after slides. If you wanted something to dissapear, you’d have to make it 0x0 sized or transparent in the second slide.

There was some modest drama - JQuery cannot insert SVG into the DOM. I had to use vanilla JavaScript to do that bit after failing to coerce JQuery for an hour.

If you can’t see any pics in this page, your browser isn’t showing SVG. Go get Google Chrome or Firefox, friend.

Updates

July 25th, 2016

See a full example of tweening in a slideshow. I’m pretty sure it wasn’t worth the effort:

• I had to programatically add IDs because OmniGraffle doesn’t make them - and they have to be unique for the whole page, not just for the SVG insert
• OmniGraffle doesn’t clip things well, when exporting a multi-canvas project to SCG - makes whole canvases, not clipped selections
• OmniGraffle makes one rectangle for the fill of a box, and one for the outline. I merged them together on load to aid the tweening later
• OmniGraffle’s SVG if generated with many decimal positions to be useful to pixel displays. Sed to the rescue!
• Rectangles and lines were not exactly consistent from one slide to another - IDs were not predictable based on those for the last slide
• Responsiveness down to the handheld means you’re fighting CSS and viewBox more than you want
• Inlining the SVG in a Jekyll-markdown page slowed down development versus having a separate gh-pages repo for the slideshow. Stubborn me decided to finish it, rather than start over. Had I pair-programmed thus, I would have been chided
• JQuery 3 doesn’t like SVG generally
• Going back a slide proved to be harder that I would have hoped: SVG slides were permanently mutated by tweening, and although I played with deep-clone functionality, I couldn’t get it to work for SVG with JQuery (or without)

On the plus side, I managed to complete a visual idea from ten years ago. The previous PDF was composed of multiple manually made tweens. Meaning I moved boxes and lines an inch, and copy/pasted the result into Keynote. That was more like stop-motion animation. Eleven actual slides became 50 Keynote frames. That one could go backwards as well as forwards. The keynote file itself disappeared in a hard drive crash in 2007 - backup people!