Chris Gannon is a motion designer, illustrator, animator and programmer. You can find all his news and updates here.

Exciting Times for Interactive Animation

Drag that slider! This is an animation I created in After Effects using Shape layers. I exported it using Bodymovin, added in an SVG slider created using GreenSock's Draggable - the slider controls the playback speed using the Bodymovi API.

For years now I have been wanting to do more character animation and central to the kinds of characters I have in mind is the walk cycle.

And when I say I have been wanting to do more character animation, what I mean is I have been trying to do more character animation for years and whenever I have set aside time for it I never achieved the results I wanted.

Walk cycles are hard. Really hard.

We as walking creatures instinctively know if something doesn't look like it's moving naturally whether it's walking or slithering - many's the movie that has become an object of ridicule because the movement of the aliens or the characters has fallen woefully short of the mark (usually these films have terrible acting and wooden dialogue too but that's beside the point).

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'.


...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.

This tennis ball looks a bit cross.

The Stars They Are Aligning

Well, they are for me at least. It occurred to me that I could combine all of these things I love into one demo - namely GreenSock (number one best animation buddy), SVG, After Effects, RubberHose and Bodymovin to create an interactive animated character, albeit somewhat limited in its interactions. So recently I've been either designing new animations or revisiting old ones and refactoring the way they are built to conform to Bodymovin export spec - and most importantly I'm having a lot of fun.

My most recent project is a reworking of an animation called Eggs-ercise - I originally animated an egg working out on a treadmill (as you do) and it had a just-about-passable walk cycle. It was a flat video and it was ok but by mixing in these great tools there was real potential to take it further.

Make Egg Go Faster!

And so Interactive Eggs-ercise emerged (see what I did with the title there?). It involved designing and building the character animation in After Effects (using shapes only), animating with RubberHose, exporting it using Bodymovin, bringing it into CodePen, making a slider controlled by GreenSock and controlling the animation speed using the Bodymovin API. The interaction in this demo is limited - basically you can make the egg run really quickly or in slow motion but the possibilities are endless.

Stick With The Old and In With The New

I have always liked learning new things, although I am quite choosy about what I learn. It's easy to feel like you have to learn everything to stay up to date but that just isn't true. Choosing the right tools that interest and benefit you and your projects will always be the better choice than just trying to learn the latest thing to come out. However when I do learn new tools I add them to my skill portfolio; one rarely replaces another and in fact they usually complement each other. I have always loved and will always love GreenSock - it is THE tool of choice for SVG animation without doubt. There are very few things it doesn't do well but character animation is one of them and so when the need arises I now have the right tools for the job.

And by combining all these tools, a whole new world of opportunity for interactive characters has opened up to me and I have a renewed sense of optimism and energy for the future of web animation.

These really are exciting times for interactive animation!

Spin2Win Wheel gets probability!

Probability has been the most requested feature since launch

Probability has been the most requested feature since launch

A little side project that I've been working on for over a year is Spin2Win Wheel. I originally built it on a tip off from Carl at GreenSock who said that people on the GreenSock forums often asked about a wheel of fortune type component. So as a huge fan of dials and all things spinny I went ahead and built it, originally in Edge Animate, and sold it on the CodeCanyon marketplace.

It was a bit basic and I had aped the classic TV Wheel of Fortune design but, as predicted by Carl, I sold hundreds of units and it was used all over the world in weird and wonderful situations by some pretty big brands.

At the time I was really pushing the boundaries of Edge Animate could do so the complexity of the wheel coupled with its ease of editing in Edge contributed to its success.

Some of you may know that Edge Animate died a rather unceremonious death a while back (so THAT was a waste of 3 years of my life) and so around May 2016 I decided to rewrite Spin2Win using my favourite tool of choice - SVG. 

I had learnt many lessons from customer feedback on the original, basic version so I built in as many of those features as I could for version 2 - JSON powered (via PHP if required), gesture or button control, total customisation of colours, size and segments, responsive and even an anti-cheat mechanism.

One thing I missed off because it was really hard to implement was probability. I had a big fat think about it for nearly a year, in the mean time releasing several updates addressing various other requests.

Jump to the present day and I finally got my head around a way of adding probability that complements existing features and meets the needs of so many existing and prospective customers. 

It's always good to have side projects. I have literally hundreds that I dip into every now and then; they are usually practice grounds for learning new skills and approaches that never see the light of day.

Spin2Win is a bit more important because when I'm improving it I take the experience I gain from other not-so-important side projects and feed that knowledge into new features that people actually pay for so I can't mess it up!

So what's next for Spin2Win? Not sure yet but I will probably focus on ecommerce integration (Shopify etc) but who knows? I'm always listening to my customers and when a trend of similar requests starts to appear it usually informs my next steps with it.


Best Code Wrangler, again!

I'd like to thank my dog and my therapist...

I'd like to thank my dog and my therapist...

As I mentioned in a previous post, 2016 was pretty shocking. It wasn't all bad though - one good thing was being presented with the Best Code Wrangler award for 2015 by CSSDesignAwards. It's a nice feeling for your industry peers to recognise your hard work and offer a token of appreciation. Here's what they say:

Where would the digital world be without experimentalists? Last year we thought it fitting to introduce a unique commendation that shines a light on the people that spend countless hours perfecting the little things that drive big innovation in the web design and dev industry. Best Code Wrangler is a special accolade for code-loving experimentalists.

Well you won't believe it but I've only gone and won it two years in a row! I'm so chuffed because this sort of success NEVER happens to me twice - they tend to be freak occurrences that are never repeated. But there it is in black and white (well, green, yellow and purple).

I think if you were to ask me the secret to staying fresh and pushing things forward I would say that it's not a secret but it's something people may not want to hear and that is helping out other people.

I spend a considerable portion of my time helping people out with their questions and problems. Some are customers who have bought my work (who are actually entitled to the support!) but some are just people on my YouTube channel or emailing me directly or connecting on Twitter - people who are also doing similar stuff to me and just need a hand. It's during these exchanges that you can gain some real insights into new ways of seeing things and approaching problems, which in turn help you become a better designer or animator or whatever.

So it's really an award that recognises the value of helping out your community - because in times of trouble I too have reached out for help and received it in spades so I suppose what goes around come around.

Happy New Gear!

Some of us might agree that 2016 was a truly terrible year on many levels but with a new year comes hope and, for me at least, a new site hosted on SquareSpace.

And with a new site comes a new blog hosted here. If you're interested you can read my final WordPress post here.

2017 is the year I start afresh with new vigour and verve - I also intend to open a shop, a place where I will sell some of my finely crafted moving-around-and-popping goods so stay tuned.

So without further ado, I offer up to you as a new year's gift the new