First of all, new TLA+ workshop! October 16th, details here. Use the discount code C0MPUT3RTHINGS for $100 off.

But enough about business, I’m here to complain.

I’m giving the Are We Engineers talk in Perth September and looking over the slides has reminded me of how much I hate slides. I started with PowerPoint but switched to Beamer in 2018 or so, which is a LaTeX package for making slide decks. Unlike PowerPoint, it’s a text file, which is makes version control and synchronization a lot easier. But then I saw some really good slide decks and realized that if I wanted to give the best talk possible, I’d have to make really good slides. I don’t have an eye for design and I tweak my talks too regularly to pay a designer to “bake” them.

So what does that leave? Animations! Good animations make things feel alive. I’m not talking about making text spin around but actually adding semantic value, like showing a diagram and smoothly zooming in to part of it. This is where beamer falls flat; since it only outputs pdf, the only “animations” are appearing and disappear.

I went back to PowerPoint for a bit and found you can do complex animations, but it’s really hard. PowerPoint really doesn’t want you adding more than one or two simple animations to a slide. Like if you want to make things a thing move from A to B, that’s a “move arc”. If you add two move arcs to an object there’s no way to “anchor” the second one to start at the end of the first one. You can manually align them but then if you change the nature of the arc (say, it go left-right instead of up-down) it will reset the starting point of the arc. And also its duration and delay, for some reason. The whole animation system is filled with these kinds of footguns.

It seems like Microsoft is just hoping people forget about animations? There’ve been no new animations since 2016,¹ There’s nothing in the JavaScript API, and the animation section of the XML spec just tells you to read the ISO standard, which is 5000 pages long.

So to hell with GUIs. If we want to have programmable animations, we gotta go our own way.

What to do instead

I know some people run slides from their browser, so that’s… html, I guess? That makes sense, there’s a whole animation layer in CSS, so you’d just need a javascript slideshow package and you’re good to go. I did some searching and found revealjs and impress.js. I decided to save that for later and focus on animations, because that’s what’s interesting to me.

Animating things in CSS seemed real finicky, but some blogger I forget (I think Cassie Evans?) mentioned the greensock library (gsap), which has a nicer imperative API for animations. It also works on SVGs. I like SVGs! They’re easy to make, they scale well, and I can edit them in Inkscape. And most importantly, there’s a whole bunch of sites with premade svgs (1 2 3), which is good because I can’t draw.

Making an animation’s SVG

Simple enough.

1. Load a new project in inkscape, using a “slideshow” template
2. Copy a bunch of svgs into a slide.
3. Go through the XML and give IDs to things I want to animate. This could be entire SVGs or a part of an SVG, etc.²
4. Lay down a bunch of animation guidelines, like targets to move to and paths to follow, and put them in a hidden layer.
5. Save the SVG.

I have a bunch of tricks I do to make this editing phase easier, maybe that’ll be a blogpost in time. In any case, it’s not too hard to make an svg, and then I just need to load it into an HTML file, add a for gsap, and I’m good to go.

That’s when I hit problem number 1.

Damn Browsers and their damn security measures

So there’s two main ways to embed an svg into html: an tag and an tag. An image tag loads it in as an im