Animated system diagram - time efficient way and software?


I need to create a set of animated 2D diagrams to illustrate plumbing and how a heating system functions with water flows, heating elements, pumps, etc.

I have experience of Illustrator and Photoshop, but I imagine that animating a sequence will be very labour intensive by creating a frame at a time, especially as some systems have a lot happening.

The animations are to be used on the web and perhaps sent in emails, so I'm thinking the easiest export would be an animated GIF.

What software is out there (ideally free/ low cost at the start to get me going) that would be suitable for animating heating and water flow around a plumbing system?

If possible I'd like to:

  • set key points and have the software animate between them, such as warm water creeping along a pipe, so I don't have to do 30 different stages myself
  • have a file that can be edited in the future in case the diagram needs to show a change to the heating system
  • if temperatures could automatically climb or decrease by set amounts between certain animation frames (e.g. 30 degrees at frame 20 climbing to 50 degrees at frame 60)
  • export as a GIF
  • export as responsive HTML5 animation

Any ideas?

7/14/2016 11:20:00 AM

My two cents.

I am really loving this program for simple animations Express Animate:

You can export to animaged gif (or a series of images if you need to optimize the palete later as flat design) and can export to video and to Canvas, which is Html5+Javascript, where I gess you can modify something if you know how.

It is simmilar to after effects but in a small free program.

The other options are After effects and Adobe Animate if you want to stay in adobe's ecosystem.

But that is for the animation. To make the assets, the plumbing, the overall drawing, you can use Ilustrator, Photoshop or Inkscape and export as png.

If you are ok with just an animated gif, you can use another video compositing tool like, or after effects and convert to animated gif later.

5/18/2017 10:42:00 PM