I’ll be live coding a session and hosting a full day workshop on web animation in Toronto in June at SmashingConf.Read More
Chris Gannon is an interactive designer, illustrator and animator. You can find all his news and updates here.
I was asked to contribute to a recent article entitled ‘Animation Best Practices for Avoiding Common Mistakes’ on the Adobe Design Blog, where, as the title succinctly implies, we discuss common animation mistakes in UI motion design (full disclosure: I have made most of these mistake at some point or another).
Don’t Animate All The Things
Animating with restraint is a skill in itself and the saying ‘less is more’ must be kept in mind at all times. I’ve been doing my job now for over 20 years so I feel I can now call myself a seasoned professional in web animation and interactive UI motion design.
Yet I still find myself falling into the same traps and I am still learning to be far more critical of my work, remembering to focus on the people who will be using my designs and ensuring I leave my ego at the door, right next to my need to show off.
I work, as many of us do, in an area where if you’ve done your job properly, nobody notices. It’s a bitter pill to swallow but it’s part of the territory. It’s also a core reason why over-animating/over-designing/over-anything is still prevalent; we really need users to see how good we are so we add in way too much ‘stuff’ . This annoys people, ironically, and has the exact opposite effect.
Well it finally happened. I reached a billion views on my Giphy channel on February 10, 2019. That’s a billion views generated by 149 GIFs, which, as I’m sure you just quickly worked out in your head as I did, is roughly 6711409.395973154 views per GIF. Well actually most of my views are stickers which are far more popular with those crazy kids.
I thought it would make a big difference to my life - I thought I would wake up the next day with a nicer car or a full beard.
Nothing has changed at all.
Damn you over-promising, under-delivering social media.
You may already know this but if you don't, stickers are transparent animations that are overlaid on top of your photos, photos and videos. Think popping hearts, slow claps, Carlton dancing, multi-coloured flashing OMFG text etc - you know the drill.
But they can be so much more than that - creating slicker, more beautiful and better produced animations for brands and companies is totally possible and it’s what I’d prefer to do.
The GIFs are fed to all sorts or major platforms like iOS, Android and Instagram via the Giphy API and, whilst you can search for your own hashtagged GIFs inside these platforms (great for brands), there's usually a trending page too that displays first without needing to search.
So I start creating my own for fun, mainly to make sure I could produce something good quality for the client. You must have a verified Giphy account for your work to be considered and so in my spare time I’ve been creating new, transparent animations in After Effects. I’ve also been green-screening some existing SVG animations to make them transparent - similar to the way newscasters and actors are placed inside a different scene by removing the background; it’s great to be able to re-use some of my web animation stuff and get it in front of new audiences, even if they don't necessarily know it's made by me.
Anyway check out these figures - I have trended 8 times since I started doing it (start of November) and racked up over 383 million views in November alone and I've just passed half a billion total views on Giphy.
I've pretty much nailed how to time them properly so they loop in Instagram (I hadn’t in the examples above!)) and also how to produce them at maximum quality.
It’s not only a fun rabbit hole to explore but also something more and more clients are asking for.
So if you want to add some cool animated stickers to your photos, videos and posts click that button below.
It’s nice to be recognised as someone who is actively contributing to their industry. Today I discovered I am Smashing Magazine’s ‘Person of the Week’.
I met Vitaly from Smash Mag at Fronteers Conference in Amsterdam in October this year and I found him to be a very kind and generous guy. My bat sense proved correct!
I was honoured to be invited to speak at Fronteers Conference in Amsterdam in October this year (2018). Amsterdam is one of my favourite cities (no, not because of THAT (well, not any more)) - it’s a society that is very forward thinking in terms of health, transport and public policy and I wish our own government was as interested in, and cared about, the lives of its own citizens the way the Dutch government appears to.
Anyway, I’d spent a great deal of time preparing my talk, panicking, getting nervous, overshooting my time in rehearsals and generally getting a bit lost with the narrative but eventually I finally wrapped it up, packed my bag and hopped on the plane to the Netherlands where the best ever conference care plan kicked in.
Right from the off I felt looked-after - I was met at the airport and taken straight to the hotel for a little rest. The hotel was wonderful (albeit a bit of an eye-full of mismatched decor which I slowly began to understand and, by the end of my stay, fully appreciated), the staff were great and once I’d showered and unpacked the speakers were whisked off on a canal boat for drinks and a meal so we could meet the other speakers and organisers.
I won’t bang on about everything we did over the coming days - this post is really just to highlight how well the event was coordinated, how every time I needed some information it was there, how nothing was too much trouble and how much of a fun time I had.
The talk went well and was very well received (thankfully) and the rest of the time was spent enjoying other speakers’ talks and enjoying wonderful Amsterdam.
It went so well in fact that I had several requests to speak at conferences in 2019 so watch this space if you’d like to join me at FITC in February, FWDays in March and SmashingConf (potentially in Toronto in June).
Finally I’d like to offer my warmest thanks and heartfelt praise to the organisers of Fronteers for genuinely caring about their speakers and attendees.
Recently I created an interactive SVG animation called Egg Toggle. Click the egg to flip it!
In terms of visibility I did my usual thing - made a GIF out of it, posted it on Twitter along with a link to the proper interactive version on CodePen. Nothing new - same old, same old.
I live in the UK so often I try to time my Twitter posts to coincide with the US waking up (East coast first at around 2pm GMT). I do this because a lot of the people who follow my updates on Twitter are in the States) and that day was no exception.
I then took my dog for a walk. During that time I got a few retweets and likes for which I am always very grateful - getting even one retweet from someone makes my day because even though a 'like' can be a bit throw away (I've been guilty of liking something more to bookmark it than anything), a retweet says 'I like this enough for my friends and anyone else to know'.
Then someone with a lot of followers retweeted it and sure enough, activity went bananas for a while. Again this is nothing particularly new - it happens sometimes (and usually only once per tweet).
But then someone else with a lot of followers retweeted it - then another and another. Pretty quickly there was a relative tsunami of retweets and likes and comments. I say relative tsunami because for me, the most popular thing I've ever put out on Twitter received about 400 likes and about 150 retweets so for me this was huge.
At this point I just want to note that retweets and likes on social media should not be used as a barometer for how good something is. If you enjoyed doing something and you learnt something from it then that is a success whether other people agree or not. Social media acceptance is not a barometer for the validity of an idea or opinion.
And before I receive a swathe of comments pointing out the irony (hypocrisy?) of this post please note that this post is purely an autopsy of a blip in my social media timeline - a blip that many people are chasing - a blip that is the V word (ok, viral, there I said it).
1,200 likes and 320 retweets is not viral!
Well it is for me and it's got me thinking about why it was well received. And there are several clues that I want to highlight as potential contributors because one thing I am certain about is that it's not one thing.
So these are my thoughts:
- It's an egg. Eggs are pretty much universal - most people know what an egg is, they've probably eaten one and when they conceived they are actually were one (not the chickeny one though). Eggs are familiar and familiar is good. Or as the kids say, it's relatable.
- It does one thing only. You click it - it flips. Simple. No thinking required.
- It remains as true to life as it can. When I was making it I considered making it turn into bacon or a coffee when you clicked it - I struggled with the idea of having the under side of the egg becoming visible because, let's face it, the underside of a fried egg is boring and not nearly as pretty as the yolk side. But I went along with it because even though it wasn't aesthetically pleasing it felt like that's what it should do.
- It was timed right. I had some great comments (DMs and tweets) from people saying that their timeline was full of doom and gloom and that this was a lovely escape - a bit of fun in an otherwise unhappy time. I'd love to tell you that I planned it this way but of course I didn't - although picking a time when the news is depressing isn't that hard these days. In fact any day will do.
- It's not trying to be clever and it's not trying to be something it's not. It's just an egg toggle.
- It doesn't make complete sense. I appreciate that this somewhat contradicts several points above but what I mean is that whilst it's obvious what it does and it's obvious what it is, it's not obvious what it's for. Why have an egg that toggles from yolk side to flipped side? What for? Who would use it? Why would they use it? This sense of open-endedness allows for personal projections about its possible use. I had lots of people sending me ideas as to where it would work, who might use it and why from games, apps and restaurants to people with specific egg preferences (!).
- It looks nice. The egg is nicely drawn (though I say so myself - I was very pleased with it). The colours work well (I matched the background with the yolk using Coolors) and even the dull back side looks as realistic as I could get it. The action rings true and the design rings true.
- One final thing and this speaks to something bigger than all of us - I didn't set out for it to be popular. I just made it and bunged it on the Internet. When I worked for an agency we'd have clients come to us with a brief whose title was 'Viral Game' or 'Viral Animation'. Suffice to say the things we created never went viral because when the intent is for something become viral, it just won't. Full stop.
Now I really don't want this to come across as self-indulgent and I can assure you it isn't. Those of you who know me in real life know that I am a serial analyser. I get a kick out of working stuff out and trying to see things from different angles. Nothing gives me more pleasure than dissecting the intangible, hunting for meaning, trying to quantify the unquantifiable. And with this post I simply want to highlight my own findings and thoughts on the subject of virality and what makes something popular, albeit in a small way.
So to summarise, and this won't come as a shock to some of you, in order to create something that resonates with an audience or becomes hugely shareable across social media there needs to be several things in place none of which can be orchestrated because the higher powers will know what you're trying to do and stop you.
If you like toggles I've put together a small selection on Behance.
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'.
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.
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.