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

21–30 of 63 posts

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

#21

Post by evek »

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…

+1 for Figma. Smart animate with proper transition duration and a trigger can do wonders.

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

#22

Post by ekrebs »

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…

Another +1 for Figma. I use a plugin called Motion (https://www.figma.com/community/plugin/889777319208467032). I've not animated diagrams, but no reason you couldn't.

Here's a gif loader I created for my web app with Figma and Motion. https://images.usercontent.bryteagent.com/queue-loader.gif

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

#24

Post by amelius »

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.

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

#25

Post by musingsole »

chrismorgan wrote: post #20
jopsen wrote: post #16

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.

> User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast. That’s only badly done animations, using bad file formats like GIF or inappropriate file formats like APNG, or poorly-considered CSS or SMIL animations on SVG or HTML. It’s not difficult to use a real video format with controls to allow pausing, or to design a pause button into software-driven animation.…

> It’s not difficult to use a real video format with controls to allow pausing, or to design a pause button into software-driven animation.

Countless presentations that just skipped whatever video content they had due to various technical difficulties say otherwise.

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

#26

Post by Multicomp »

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.

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

#28

Post by chrismorgan »

musingsole wrote: post #25
chrismorgan wrote: post #20

Earlier quoted context omitted.

> User have to wait for the animation to cycle, and you can't pause it to read something if it's moving too fast. That’s only badly done animations, using bad file formats like GIF or inappropriate file formats like APNG, or poorly-considered CSS or SMIL animations on SVG or HTML. It’s not difficult to use a real video format with controls to allow pausing, or to design a pause button into software-driven animation.…

> It’s not difficult to use a real video format with controls to allow pausing, or to design a pause button into software-driven animation. Countless presentations that just skipped whatever video content they had due to various technical difficulties say otherwise.

What of the countless presentations that were improved by doing video content properly? I can easily think of examples in both directions.

It also depends a little on context: I had in mind and was referring to user-driven media (which is fairly clearly the context here). If you’re presenting something to an audience that is at your mercy (which seems to be more what you’re talking about), then the situation is indeed a bit different—though a pause button and scrub bar are still likely to be a good investment.

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

#30

Post by criddell »

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

Why doesn’t google find this when you search for “animate 2d diagram”? Is it because nobody links to it?
Post reply on HN