Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

news.ycombinator.com

Post reply on HN
Print view View original

1–10 of 63 posts

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

#1

Post by pbowyer »

I'm using Mermaid, Excalidraw and PlantUML diagrams to explain and document what I'm working on and they work great and are a lot better than screens of prose, but I've become aware that something is missing: motion.

Animation brings a whole lot more to explanations, making simple explanations of how request coalescing works easy to understand, token simulations [0] through to helping explain concepts like Fresnel lenses [1]. Embedding them into GitHub READMEs, tweets and documentation would be awesome.

Google do it to illustrate posts (e.g. https://blog.chromium.org/2021/03/a-safer-default-for-naviga...).

I found Excalidraw Claymate [2] but the stop motion approach with no tweening support makes it painful to create animations where circles move from place to place. There's also Manim [3] but I think this is more for maths.

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

0. https://github.com/bpmn-io/bpmn-js-token-simulation

1. https://news.ycombinator.com/item?id=30576688

2. https://github.com/dai-shi/excalidraw-claymate

3. https://github.com/ManimCommunity/manim

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

#2

Post by Minor49er »

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

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

#3

Post by krzysztow »

Minor49er wrote: post #2

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 pointin…

Oh gosh, I do the same and I hate it. Many times was thinking if there's a better approach. Then googled and came up with nothing going back to the same approach.

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

#4

Post by jdlshore »

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.

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

#5

Post by pbowyer »

jdlshore wrote: post #4

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…

Thanks, I hadn't thought of using Figma for this. That might be enough...

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

#6

Post by mynameismon »

Minor49er wrote: post #2

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 pointin…

I think Powerpoint has much more powerful animations, which allow one to basically do the same thing but without having to duplicate slides, yielding a much shorter and smoother presentation.

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

#7

Post by Blahah »

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

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

#9

Post by pabe »

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.

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

#10

Post by disqard »

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

Post reply on HN