HTML5 Animation Tools

I enjoy learning how to code, but I’m not adverse to using tools that can do similar things using a GUI (and if they’re free or open source, so much the better!).

I have to pause to laugh at myself.  Back in the  late-80s or maybe 1990 (I think…) when computers started shipping with Windows GUI enabled by default, I was not thrilled. In fact, I hated it. I remember being very adamant that I would continue to live in the DOS text world.  I still like using the command line and I still like text, but GUIs turned out to be ok.  

As I was saying, I’m ok with tinkering around with new tools that use a GUI.  If it can achieve in a few minutes what would take me several hours to do coding by hand. I’m game.  After all, part of instructional design (and life) is deciding when to exploit easy tools and when to use a craftsman’s care to develop something unique and special by hand.

Each of the four options I tried has something unique to offer.  I recommend you try each of these out for yourself.  You just might decide that using a GUI interface for some quick animation coding isn’t such a bad option.   🙂

 

Option 1:  HTML5 Maker.  This free tool has an fairly simple interface. I created my quick little logo-sized animation in about 10 minutes.  You can easily create animations with no knowledge of coding. The most challenging part me deciding which of the cool effects to use.

 

 

Option 2: NodeFire.  This is a free tool with lots of features and a slightly challenging interface.  You have the option of starting with a template or starting from scratch.  While you can create some interesting things with no coding knowledge, you’ll definitely get more awesome results if you have some decent coding skills.

On a side note: I can see using this tool to teach JavaScript. You’d start by creating something with the interface, then edit the resulting code to see what happens. Typically, they teach code by building up, but I prefer to learn by deconstructing code.  I am sure I’m not the only one.

 

Option 3: Hippani Animator.  This tool has free and pay options.  The interface is a bit more straightforward than NodeFire, but there also seems to be fewer options.  As with NodeFire, you can access the code easily to refine it to meet your needs.  If you’re comfortable with using keyframes, then you might enjoy setting up animations.

 

Option 4: Google Web Designer.   Free tool with a challenging (for me, at any rate) interface.  On the other hand – Bonus! – you can edit the code that gets generated!!  This is a great way to throw something together quickly and then fine tune it with your own special touches. That being said, it took me quite a bit more time to put together something resembling animated anything.