4 ms·

Does anyone recommend any particular piece of software for creating these types of visualizations with relative ease? I've always been a fan of animations for h

by gr33nq 3y ago

Does anyone recommend any particular piece of software for creating these types of visualizations with relative ease? I've always been a fan of animations for helping to understand some technical topics.

erwinkle 3y ago
They use anime.js for their animations https://animejs.com/ https://animejs.com/ As seen in their source code here: view-source:https://bloomberg.github.io/blazingmq/assets/animations/animations/bmq/message-paths/index.html https://bloomberg.github.io/blazingmq/assets/animations/anim...
maxwellito 3y ago
As erwinkle mentioned, these animations use anime.js If you want to build something but don't really know how to do it, I would suggest the following: 1. Build the visual content in an SVG with Inkscape. It should be easy for you to build the layout with assets/item to animate. Don't forget to group items and set names so you can reference them later. 2. Once exported, insert the SVG in an HTML page and add anime.js. This library will let you animate the content you just created (you should be able to reference your named items from Inkscape and animate them). The learning curve might be tough depending on your experience regarding animation (or CSS in general). Good luck :)
treprinum 3y ago
animatron.com for animated SVG or JS. I used it for some algorithm animations myself.
danielvaughn 3y ago
I've heard Framer can make some impressive animations, but I don't know much about how well they export to web. What's on display here is really cool, it's all animated SVG.
jasonlotito 3y ago
Okay, this is going to sound weird, but I've used Keynote in the past. I'm sure PowerPoint can do this as well, but Keynote has Magic Move, and you can export this animation. It's very easy to work with, and do simple animations. I'm sure there are much better tools for this, but as someone who knew Keynote, this was always effective for me.
- haswell 3y ago
  Keynote is surprisingly good for this, and I’ve used it for animated data flow visualizations in the past. While I like the idea of something like anime.js and think it raises the ceiling on what’s possible, I’d still probably start with something like keynote just to get the idea out of my head and into a format I can validate before going into code.
munro 3y ago
i've just used html/css/javascript then screen recorded it
Austizzle 3y ago
Lottie.js is a library for animations in JavaScript, and after effects can export to it! You're obviously limited in what you can export, but if you do a basic after effects animation with shapes and text, it works fine. Pretty sure it was made by Airbnb, and used in tons of apps like Google home Works really well
- nine_k 3y ago
  There are free tools to create lottie animation, Synfig in particular supports it.
whoisthemachine 3y ago
All the replies mention technologies to help you build one, but this chart looks like a modified, animated version of a Petri Net to me, which is a very useful chart for visually describing the flow of data between systems. I've built similar charts using PowerPoint and exporting the PowerPoint as a GIF... same effectiveness for internal use, but not something you're going to want to brag to your friends about.

by gr33nq 3y ago

erwinkle 3y ago

They use anime.js for their animations https://animejs.com/ https://animejs.com/ As seen in their source code here: view-source:https://bloomberg.github.io/blazingmq/assets/animations/animations/bmq/message-paths/index.html https://bloomberg.github.io/blazingmq/assets/animations/anim...

maxwellito 3y ago

As erwinkle mentioned, these animations use anime.js If you want to build something but don't really know how to do it, I would suggest the following: 1. Build the visual content in an SVG with Inkscape. It should be easy for you to build the layout with assets/item to animate. Don't forget to group items and set names so you can reference them later. 2. Once exported, insert the SVG in an HTML page and add anime.js. This library will let you animate the content you just created (you should be able to reference your named items from Inkscape and animate them). The learning curve might be tough depending on your experience regarding animation (or CSS in general). Good luck :)

treprinum 3y ago

animatron.com for animated SVG or JS. I used it for some algorithm animations myself.

danielvaughn 3y ago

I've heard Framer can make some impressive animations, but I don't know much about how well they export to web. What's on display here is really cool, it's all animated SVG.

jasonlotito 3y ago

Okay, this is going to sound weird, but I've used Keynote in the past. I'm sure PowerPoint can do this as well, but Keynote has Magic Move, and you can export this animation. It's very easy to work with, and do simple animations. I'm sure there are much better tools for this, but as someone who knew Keynote, this was always effective for me.

haswell 3y ago
Keynote is surprisingly good for this, and I’ve used it for animated data flow visualizations in the past. While I like the idea of something like anime.js and think it raises the ceiling on what’s possible, I’d still probably start with something like keynote just to get the idea out of my head and into a format I can validate before going into code.

munro 3y ago

i've just used html/css/javascript then screen recorded it

Austizzle 3y ago

Lottie.js is a library for animations in JavaScript, and after effects can export to it! You're obviously limited in what you can export, but if you do a basic after effects animation with shapes and text, it works fine. Pretty sure it was made by Airbnb, and used in tons of apps like Google home Works really well

nine_k 3y ago
There are free tools to create lottie animation, Synfig in particular supports it.

whoisthemachine 3y ago

All the replies mention technologies to help you build one, but this chart looks like a modified, animated version of a Petri Net to me, which is a very useful chart for visually describing the flow of data between systems. I've built similar charts using PowerPoint and exporting the PowerPoint as a GIF... same effectiveness for internal use, but not something you're going to want to brag to your friends about.