Ask HN: How to quickly animate system sketches and 2D diagrams?

This might be more primitive than what you're looking for: When I'm explaining something in a video or a presentation, I'll sometimes use Google Slides to put together a diagram, then duplicate the frames to make adjustments to each. Then I cycle through each quickly to give a very basic sense of animation.

Recently, I had a presentation with a diagram showing several components. One slide would have an arrow pointing from Component A to Component B. The next slide had an arrow pointing in the opposite direction. I just pressed back and forward quickly while I was explaining that these two components talk to each other. It got the message across well enough.

On the other hand, if you are explaining known concepts, there might be footage out there already for you to appropriate into your own work

There’s probably better tools, but I use Keynote and Figma. With a bit of creativity, simple animation effects like “wipe” and “magic move” can go a long way.

Figma only does the equivalent of “magic move,” but it’s better than Keynote’s. I’ve used it to make sophisticated animations. See my Yow! presentation “Evolutionary Design Animated” for an example.

Prior to making that presentation, I looked at a variety of 2D animation tools, but they were meant for artistic animation and had so much power and flexibility that Figma was easier and faster.

I have been revisiting that same question for many years!

In the last year I have been using x6 from AntV for animated/interactive graph visualisaton. It is outstandingly powerful and well designed (like all their libraries) - but unless you can read Mandarin you'll eventually be using a translator to read the docs/issues, and reading the code to figure out APIs. That said, I've been able to quickly build out things that I didn't think possible before with x6 and their other libs.

Recently I've also had a good experience with react-flow from webkid - who also make excellent stuff. I'm using this in MDX components for modular documentation. It's quick and simple to create an animated graph visualisation from a JSON representing the graph.

I have on my to-do list to make a mermaid -> react-flow component

Nodes seems pretty cool https://nodes.io/docs/tutorial/ via https://www.reddit.com/r/quartzcomposer/comments/lh5ixw/alte...

I'm using slides.com for presentations. It can automatically create animations between pages: https://slides.com/news/auto-animate

However, it doesn't support you in creating animations where objects follow paths. But you're free to code that on your own!

Slides.com is the commercial offer from the creators of the open source web presentation lib RevealJs.

If you're willing to put in some time learning a slightly different approach to programming, you could check out BlockStudio [1]

It's an authoring environment that allows text-free coding (using Programming By Demonstration) of interactive graphical software, like animations and games.

[1] https://www.blockstud.io

The easiest way to do this is to create the animation in PowerPoint which is trivially easy.

Then export the transitions to a video [0].

[0]: https://support.microsoft.com/en-us/office/save-a-presentati...

So interesting that this is still a question after many years: I remember looking into this a long time ago and there were no clear answers then.

I'd have thought (knowing nothing) that AI should be really good at tweeting between a start and end point of anything, diagrams included, but is there a good CS reason why this isn't the case?

Draw.io (now diagrams.net) has some support for interactive diagrams.

https://www.diagrams.net/blog/interactive-diagram-layers

https://drawio-app.com/interactive-diagrams-with-custom-link...

Edit: remove links about the obscure undocumented features p=ex and p=anim

What about SVG animation, using something like https://www.svgator.com ?

"Adobe Flash used to be the go-to; what do you reach for when you want to illustrate a concept with an animated diagram?"

Adobes flash suite is now called Adobe animate and still works mostly the same and you can export to the html canvas.

Scripting is a bit limited/complicated, compared to doing it with actionscript - but if you worked with flash before, this is probably the most easy solution, as it is still very powerful and straight forward.

Just wondering, is motion really a good idea?

It distracts, eats cpu/drains battery, can't be printed, has bad UX.

User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast.

Theatre.js can definitely drive this type of animation. It’s an animation library that you can hook up to your diagramming library. And it gives you a visual interface for keyframing and tweeting, etc.

Examples here: https://twitter.com/ariaminaei/status/1439918117807853575?s=...

I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com

I used to use DebugMode Wink whenever I was making interactive slideshows that users could use to step through a systems diagram one request at a time, or hit play and just watch the slides loop, but that program is showing it's age in limited resolution and I believe has relatively limited web or cross platform options compared to what we are used to these days.

Svelte has some pretty neat animation tools built in

GoJS might work for you: https://gojs.net

Although the focus of the library is interactivity and not setting up sequences of animation, but that is possible too.

Blendshift cycling ( http://www.effectgames.com/effect/article-Old_School_Color_C... ) would be so neat to see in this context.

I like to use the same software that "Stuff Made Here"[0] uses, on a Microsoft Surface laptop:

"Concepts" https://concepts.app/en/

[0] https://www.youtube.com/c/StuffMadeHere

Well, if you can program, you could try Pharo (a Smalltalk descendant). I've recently been getting into it and have been able to create sin/cos animations [1] relatively quickly (not sure if this is what you're looking for). For math animations it seems great, because I still don't know much about the library I used (Roassal), all I know was that it showed the mathematical relationships I wanted to showcase.

The video itself shows a debugging issue that I asked the Pharo community, which is the ability to single step through your debugger and see the animation updated. As far as I understood there was a prototype out within a day for that.

[1] https://drive.google.com/file/d/1Z3UwTAj4A2CRo_TXk6JNG-mN9yM...

This is an example of "when you have a hammer, every problem looks like a nail", but as a designer I would use Figma for this. Smart Animate could do all of the stuff I saw in that Google illustration. It's not a timeline-based animation tool, so it would be cumbersome and kind of a hack, but it is free.

PowerPoint and Keynote both export to MP4 or GIF, as far as I remember. Keynote's "Magic Move" transition does a nice job of tweening the keyframes between starting and ending positions of the animated object.

I had this problem too, so I wrote some code. It's not open sourced yet and who knows if I'll get round to it, but here's a detailed description of how it works, it is not a lot of code so you could probably reproduce this easily..

The problem I wanted to solve is more whiteboarding and presentation: I often am in calls describing something that only needs fairly simple drawings - boxes, lines, labels - but whiteboard where you scribble or even lay out rectangles makes me sweat the small stuff, resizing and moving everything all the time when the diagram changes. Also, I wanted animation: to show transition between states. I'd tried using mingrammer to do diagrams as code, but I find graphviz layouts unpredictable. Most often what I want is: just boxes, lines, labels, size things to fit, keep everything 'evenly spaced'.

So, I wrote some JS (it's ~700 lines of code, no external libraries). I divide a web page into two areas: one textarea where I type commands line-by-line, and the drawing, which is svg. On selectionchange events for the textarea, I debounce for 500ms, so if I've paused the layout&animation kick in. The drawing state has a map of nodes (boxes), which contain a title, an icon, map of connections to other boxes, and a list of children (ids of other nodes), as well as recording the node we are currently zoomed in to, the node we are currently editing, and a few other details. There is a node called 'top' which is the starting point.

The commands are pretty simple and were added as I needed things, eg:

    add internet # add a child to the currently edited node with id 'internet'
                 # its title and icon are also set to 'internet'
    edit internet
    add host1 icon host # this has id host1, title host1, icon host
    add host2 icon host title "banana stand" # other attrs are layout and stroke
    edit top
    edit aws # editing a non-existent node adds it
    add ec2
    arrow host1 ec2
    zoom aws # this node expands to fill the screen
    top # same as 'zoom top', zooms to the top level

It's interpreted line-by-line so that each line represents one state of the diagram. There are commands to delete nodes: when I delete a node I just remove it from its parent but leave it in the top-level state. That has the neat effect that if I re-add it, I get the node with all its descendents and connections restored in one step, which I can use to pre-diagram things I talk about often.

After calculating the drawing state by applying all the commands from the start to the current selection, the next step is to limit this to the visible pieces. I make a copy of the drawing state, starting from the currently zoomed node and following all children. Then I add all connections, if all the 'to' ends of the connections are visible.

Next, I do layout. Starting with the visible tree, annotate all nodes with positions of the box (if any), the icon, and the label. The diagrams I'm drawing are similar to those produced by AWS Perspective: https://aws.amazon.com/solutions/implementations/aws-perspec... , so if a node has no children I draw it as a large icon with a label below, if it has children, it is a box with a small icon to the top left, a centred label at the top. Each node can choose one of a small number of layouts that I can do automatically with just a list of children: 'ring' (a circle of nodes), 'row', 'column', or 'snake' (the default: alternate rtl-ltr rows to evenly fill the space; this will be a grid if that fits or could end up like 4-3-4-3 if it doesn't). In ring & snake, boxes are always 4:3; in row and column they are stretched to fit.

Next, I do animation. I keep around the previous layed-out state, and use window.requestAnimationFrame to cal...

My friends work on such a tool for many years: https://www.animatron.com/studio

It is an online HTML5 animation editor.

IMHO for general purpose business use and internal sharing, Google Slides allows very basic animations (fades, transitions, slide-ins, etc., kinda like powerpoint) but is free and viewable to all on the web. It creates low-barrier explanatory slide decks for documentation, and I frequently use it to share complex topics with stakeholders. It works well... (but you do need to keep in mind a lot of presentation best practices though, which don't come naturally).

You can also export to a video there.