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.
Ask HN: How to quickly animate system sketches and 2D diagrams?
31–40 of 63 posts
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#32What about SVG animation, using something like https://www.svgator.com ?
If you can handle some basic web dev you can do this yourself and embed the JS/CSS animation right in the SVG file: https://youtube.com/watch?v=S6P_N2JWSrc
It’s actually a bit easier than basic web dev because you don’t even need to know flexbox!
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#33Blendshift cycling ( http://www.effectgames.com/effect/article-Old_School_Color_C... ) would be so neat to see in this context.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#34I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com
Why doesn’t google find this when you search for “animate 2d diagram”? Is it because nobody links to it?
I made it to try and learn d3 and typescript in general. I posted it as a "Show HN" but it got no clicks so I sort of just let it sit there. To be honest, when I saw how good most online drawing tools were, and how basic and amateur level my tool was I got demotivated and decided to leave it as is.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#35I like to use the same software that "Stuff Made Here"[0] uses, on a Microsoft Surface laptop:
"Concepts" https://concepts.app/en/
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#36Well, 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...
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#37I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com
This is super impressive, would definitely pay for it if more polished. Maybe integrate with tldraw? Anyways, amazing job.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#38I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com
This is super impressive, would definitely pay for it if more polished. Maybe integrate with tldraw? Anyways, amazing job.
Thank you for the kind words! I might see if I can clean it up and at least get an export to gig feature working.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#39This 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.
Re: Ask HN: How to quickly animate system sketches and 2D diagrams?
#40I actually made a small tool for making systems diagrams as a side project. However, it was extremely basic. Fun project though: https://msgviz.com
Why doesn’t google find this when you search for “animate 2d diagram”? Is it because nobody links to it?
A few things;
1. There's no good onpage stuff to tell google that this is an appropriate word for it.
2. Based on page speed probably wouldn't rank well compared to others
3. As you noted, links.