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

51–60 of 63 posts

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

#51

Post by pbhjpbhj »

amelius wrote: post #24
dmje wrote: post #12

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?

> So interesting that this is still a question after many years Like sending large files over email. Perhaps we should make a list of these damned problems, and call it "unsolved problems in Computer Science". Then have a $1M prize for the first to solve them.

Opera Unite put a web server into everyone's browser so that you had your own Facebook-style wall (the fridge door) served from your own computer, and file sharing was simple because it was peer-to-peer -- you just PM the private link and the person downloads it direct from your computer.

I loved the concept and thought it was going to revolutionise the web; add cloud-caching and it would look pretty sweet IMO.

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

#52

Post by technobabbler »

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.

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

#53

Post by lioeters »

AriaMinaei wrote: post #17

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=...

Library and docs: https://www.theatrejs.com/

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

#54

Post by mbforbes »

I use Sketch to export SVGs, and animate them with anime.js. Here's an example of some illustrations where I did this [1]. It's not without issues though; using external (i.e., not inlined) SVGs is surprisingly tricky, and you quickly run into edge cases with groups and transforms---some notes here [2].

I like this approach because it decouples drawing and animating, and with SVG it is resolution and bandwidth-friendly. I was already used to making figures for research papers with Sketch, so I just suck with that, and added anime.js on top. However, for more complex motion like you might be hinting with your post, I could imagine a GUI tool with a proper timeline and tweening to be more ergonomic.

[1] https://maxwellforbes.com/posts/every-phd-is-different/ [2] https://maxwellforbes.com/garage/animating-svgs-from-sketch-...

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

#57

Post by password4321 »

is0tope wrote: post #48
tedmcory77 wrote: post #40

Earlier quoted context omitted.

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.

This is a good point. I have been wondering how does one do SEO for such online tools? If you only have the tool present, it will be definition not have much text content which Google uses to gain context for the site.

Write blog posts about it, every angle you can think of. Development, marketing, building a side project, whatever...

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

#58

Post by boomskats »

elliekelly wrote: post #32
dmje wrote: post #14

What 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!

I agree, just like you can quite easily craft reveal.js code by hand instead of using slides.com.

However, I still use slides.com and svgator.com every single time. They let me concentrate on my messaging.

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

#59

Post by elliekelly »

boomskats wrote: post #58
elliekelly wrote: post #32

Earlier quoted context omitted.

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!

I agree, just like you can quite easily craft reveal.js code by hand instead of using slides.com. However, I still use slides.com and svgator.com every single time. They let me concentrate on my messaging.

This being hacker news some of us enjoy hacking together our own solutions...

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

#60

Post by aaserviceshyd »

is0tope wrote: post #18

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

Is there a way to add custom objects if we want different objects for the flows to be created.
Post reply on HN