Chris Gannon is an award-winning interactive motion designer, web animator and speaker who has worked with big brands like BBC, Google, New York Times, Microsoft, Amazon and many more.
Chris is also super popular across the LottieFiles community. You can check out his portfolio here.
Hey Chris, tell us more about your past? Were you always passionate about interactive design?
My first and enduring love has always been for animation — the way things can change from one state to another, then another. And there’s often magic in the shapes between those states — how things look on the way from state A and state B.
My first computer was a ZX Spectrum in 1982 and one of the first things I did when I got it home was order a magazine that showed how to make 8-bit animations in Basic (the animations were both Basic and basic!). Think Manic Miner style three-state sprite animations — wobbly monsters, angry toilets, glowing fruit.
Fast forward a bit and I upgraded to Ataris and Amigas running music software like Octamed and Cubase and pretty soon I had my first Apple Mac 8200 with a cracked copy of Adobe After Effects 2.0 (sorry Adobe!). It was then that I really became consumed by animation because of all the things that were suddenly possible. And as computers and software became more sophisticated, the things you could do also became richer, more sophisticated and more complex.
But these animations, as I retrospectively realised, were fairly static. That is to say they moved, yes, and they changed across time but a rendered animation was always the same every time you watched it. And I always felt like there was something missing — something spontaneous or random or unique.
When the internet arrived the game completely changed for me. Suddenly you could introduce code into your animations that not only gave you control over when the animations started or stopped but also how they behaved — your own random, human interaction could influence your animations — move your mouse faster and the animated elements move more violently based on mouse velocity. Drag your finger across a screen and your animated elements could react accordingly, moving like a wheat field in the wind or seaweed in the ocean. And it’s this kind of unique, random, physics-led interaction design that gets me really excited.
I love creating a framework or a set of rules within which my animation can react based on live human input. I’m always making sliders and toggles and interactive toys and widgets that incorporate particle systems and physics-based motion so that every time you interact with it, it’s slightly different each time. This never gets boring for me.
See the Pen Heart is Home by Chris Gannon ( @chrisgannon ) on CodePen.
Heart is Home by Chris Gannon. View on CodePen
What do you see as the future of interactive design? How can designers and animators be best part of this future?
I think when people say interactive design they usually mean physically interacting with something, using a pointing device like a mouse or a finger to make something happen.
But interactive design is not limited to how we interact with things — it’s as much about how the things we create interact with other things, like live data.
And for me, interactive design has a much broader remit now than it ever has. Our lives are built on (and, to a point, depend on) live data — news and world events, vehicle functionality, weather, traffic, stock markets, our own bodies.
We as animators and designers are required to create something that makes sense of that data, ensuring it is accessible and comprehensible to anyone wishing to understand it. I would also add that, where appropriate, we should be making this interaction fun and engaging.
Today our responsibilities are not only to excel at our craft as animators and designers but also to stay curious about and be interested in spheres of knowledge that are not necessarily our chosen areas because sooner or later we will have to work in that area to reduce complex concepts and ideas down into functional and beautiful representations using animation and interactivity.
See the Pen Interactive Eggs-ercise by Chris Gannon ( @chrisgannon ) on CodePen.
Interactive Eggs-ercise by Chris Gannon. Move the slider to change the speed. View on CodePen
Tell us more about how you push the limit when it comes to Lottie?
I first discovered the SVG format in a program called Adobe Edge Animate. It had some examples bundled with it that used .SVG files and I was interested in the fact that they could scale up without losing quality. Coming from a Flash background I have always been enchanted by vector graphics and I quickly became fascinated with the SVG format. It was so new to me, yet it’s a pretty old format (nearly 20 years old). So I began cracking open SVG files and learning how to animate the individual native SVG shapes like rectangles, circles and paths using pure Javascript.
I had slightly drifted away from AE, only using it occasionally for video projects but during that time the Bodymovin exporter appeared on the scene. As your readers probably know Bodymovin is an export panel extension for AE that exports shape layer animations to a single, portable text file that can be played back on the web and mobile as an animation.
This was a bit of a game changer for a few reasons, one of them being the portability — at that time if you wanted to deploy an SVG animation you needed an absolute minimum of 2 files, HTML and Javascript but usually CSS as well (unless you were animating using SMIL or putting all your Javascript inside your SVG file which is a security no-no). Now you could create complex animations for the web and mobile using a familiar IDE and export them to a single, scalable, portable and relatively small file — this hadn’t really been possible since the days of Flash.
But I always want to push technology further and I soon realised I could combine Lottie animations (which I consider to be ‘static’ because they never change) with my current Greensock Javascript workflow. This meant that the output from Lottie could be further enhanced and improved with extra layers of interactivity and randomness that I love so much.
See the Pen Walking Time Bomb by Chris Gannon (@chrisgannon) on CodePen.
Walking Time Bomb by Chris Gannon. View on CodePen
How do you go about animating, any techniques or hacks or sources of inspiration that you can share with us?
As I mentioned combining Lottie with other web technologies has been a great way to extend my own capabilities. In terms of techniques and inspiration, the way I like to learn is by copying other artists and animators. If I see something I really like I will copy it (or part of it) to make sure I understand how it works and how it’s done using my own chosen tools which may be different from the tools originally used to make it. This then becomes part of my own skill set which I will eventually use in combination with all the other techniques I’ve learnt to create something in my own style.
When I first started using Bodymovin/Lottie I had to get a bit hacky to make things work, because so few AE properties were supported. Now, new features are being supported almost every week which means we can be more confident than ever that the animations we create in AE will export correctly.
Quick tip: if you want to create a perfectly looping animation choose a total duration like 6 seconds. Now create several repeating animations on their own layers, each one lasting 2 or 3 seconds. I chose 2 or 3 seconds because they are multiples of 6, which is the whole animation duration. Now you can offset each layer’s start point back or forward in time by any amount and they will always loop perfectly inside the whole animation.
See the Pen Egg Toggle by Chris Gannon ( @chrisgannon ) on CodePen.
Egg Toggle. Click to Interact. View on CodePen
What are some of the design and workflow tools you use?
I like to keep things simple and not rely too much on software that can potentially be discontinued (I’m looking at you, Flash and you, Edge Animate!). Having said that there are so many useful extensions and UI script panels available now that you’d be mad not to use them. Just make sure they don’t use bitmap/pixel-based effects which are not supported in Lottie.
The main additional tools I use in AE are Motion 3 for things like elastic eases, parenting/nulling, changing transform origins and breaking up Illustrator files. It also does loads of other useful things.
I couldn’t live without Overlord. It’s an extension that lets you transfer shape graphics directly between Adobe Illustrator and AE. Super useful, stable and I use it every day.
For character animation I use RubberHose. It helps you to animate simple arms and legs in a natural way and, importantly, there’s great support for exporting via Bodymovin to Lottie.
Rift is another tool I use often that lets you stagger layers — the UI is confusing but once you get the hang of it, it’s really useful and very powerful.
For physics simulations you can’t beat Newton 3. The physics is perfect although it can take a while to get the results you want because it has so many properties and possibilities. Works great with Lottie although you do end up with huge JSON files.
I know most of these are paid plugins and extensions so I’ll also mention Path Tools that comes with AE as standard. Probably one of the best additions to AE ever is the ability to animate path points. This means we can animate shapes by assigning Null objects to a shape’s path points and the points will follow them. Rubbery lines and elastic blobs are now a breeze!
I also wrote my own script UI panel called Quixpression that has several functions I use all the time, like exploding a shape layer so that all the individual shape groups are transferred to their own layer. It also has a rename function for renaming multiple layers at once and several expressions I use all the time like loopOut(‘cycle’) and a Bake layers button for converting expressions to keyframes (useful for when you’ve used an unsupported expression in Lottie).
What advice would you like to share with someone just getting into animation and motion design?
First and foremost, learn the fundamentals of animation. I learnt the traditional animation techniques quite late in my career (I’m referring to Disney’s 12 Animation Principles as applied to digital animation) and I now use them in varying amounts in almost everything I do and my output has improved a lot because of it.
I also recommend finding animations you like and copying a small part of it. Doing this means you don’t have to worry about colours, layout or timings because it’s already done — you can just focus on the bit you want to learn. Maybe you like the way a number appears or a box bounces in. Just copy that to make sure you can do it too — don’t try to copy an entire animation because you will most likely fail miserably which will knock your confidence which in turn will hamper your progress. Lots of small wins equals lots of small confidence boosts which convert into positive energy that help carry you onto bigger and better things. If you learn lots of small things you’ll be surprised how quickly that pile of small things suddenly turns into a rich skill set. I am always looking at other artists’ animations to find new techniques and ideas and copying them is the best way for me to learn something.
I also recommend finding animations you like and copying a small part of it. Doing this means you don’t have to worry about colours, layout or timings because it’s already done — you can just focus on the bit you want to learn.
What’s your workstation setup?
I work for myself at home so although I have laptops for speaking and travel I use a custom Windows (gasp!) workstation that I built myself. It has 8 processors and 32 GB of RAM, a 32GB NVIDIA GTX Titan graphics card and an ultra wide monitor the size of Peru. I also use a Razer Cynosa Chroma keyboard and a Razer Mamba mouse which are hooked up to my Philips Hue system for custom lighting.
I tend to use a workstation machine because heavy video projects still crop up now and then — plus I don’t really work anywhere other than my studio now and it’s useful to have a machine that I can upgrade and improve.
