This combines GreenSock and Bodymovin but it's not interactive. I am fully aware that it looks more like a galloping baked bean and if this was in a film I would want my money back.
However some recent developments have made the process of walk cycles and limb animation a little less frustrating. My background is in After Effects (AE) - I was creating video animations long before even Flash came along and so AE feels like a second home. Every so often I dip back into the wonderful world of AE; sometimes a project needs it and sometimes I just feel like a change from the GreenSock and SVG combo.
During one of my prodigal returns to AE (which usually involves lots of Googling for tutorials) I noticed a new plugin called RubberHose from BattleAxe which states it's 'a quick way to remove a lot of the technical overhead from the animation process to allow you to really focus on character'.
TAKE MY MONEY!
...I whispered in caps to no-one in particular, purchased a copy and spent a happy afternoon making some fairly terrible animations (purely down to my own shortcomings). RubberHose removes some of the fiddly keyframing, rigging, inverse kinematics stuff that can get in the way of a stress-free project and it's pretty intuitive too. It's also great fun to play with and, with a little experimentation, has lots of application and uses beyond swinging limbs and pointy fingers.
Around that time an export plugin for AE called Bodymovin arrived on my radar. It piqued my interest in part because it exported AE stuff to SVG and as you may know I am a big fan of SVG and there were some very cool animations appearing, mostly courtesy of Hernan Torrisi (@airnan). It was in its infancy back then and the install procedure was pretty convoluted (in part due to Adobe's extension install issues) and I never actually managed to get the thing working in AE. I played around with some pens and tried to rebuild some and just didn't understand how it was working at all so I just sort of gave up.
RubberHose In Your Browser
Jump forward several months and a completely rewritten version 2 of RubberHose arrived. And behind the scenes those cheeky scamps had added support for Bodymovin. So I revisited Bodymovin with a renewed sense of determination to get the damn thing installed and with the help of Matt Wilson's useful video I finally got it installed (it too had been updated to make rendering and export much easier. I know this because Matt's tutorial had a different UI).
The scope for RubberHose support is somewhat limited, in part due to the SVG 1.1 spec, but you can do a lot of cool things with it and the most important parts are front and centre i.e. bending hoses. Yes, you might have to be a little inventive in order to pull off an effect that AE Shapes can do in a snip because the Bodymovin exporter doesn't support it yet but I'm just glad to be able to mess around with walk cycles and wobbly fingers and then output it to the web.