Interview of Chris Gannon : Interactive Designer, SVG Expert


Chris Gannon is an English Interactive Designer, Illustrator, Animator leader in SVG and GreenSock animation. He took the time to answer my questions.
Discover his creative approach, career and his advices.

Hi Chris Gannon. Can you introduce yourself ?

My name is Chris Gannon – I live and work in the UK as a motion designer, illustrator and web animator. I’ve been creating animations commercially for 20 years and I’m lucky that my passion and hobby is also my job. I began as a freelancer for 3 years in 1997, then I was hired full time as head of a video and animation department for an agency for 7 years and for the past 10 years I’ve been solo again. I love UI design, animation and vectors. I’ll always try to add humour and meaning into my work and more and more I focus on the tiny details as these are often the things that delight your audience.

How did you start in web animation? 

I was running my own record label in the 1990s which was going very badly and a friend asked me if I’d like to make some animations for his client, a big telco. I picked up a copy of Macromedia Flash 2 and loved what I could do with it and I’ve never looked back.

Why Motion Design with code and not Motion Design on After Effect ?

Before my Flash days I was using After Effects for fun and personal projects – After Effects was the first professional software I learnt and I’ve used it for countless commercial projects over the past two decades – I still use it for some client work, depending on what’s required – it’s just another tool to get the job done.

One of the things I never liked about video animation is that the render (final video) you create is static insofar as it never changes and, as someone who gets bored very quickly, I want to make animations you can interact with and that are different every time you watch them, albeit subtly. In most of my web animation projects now, I create dynamic animations using live particle effects and random motion so that each view or interaction is different – designing with code means you can make tweaks and changes on the fly, days, weeks or months later – it also means you can edit them wherever you are because it’s mostly done in the browser. I just need an internet connection and I can work anywhere at any time.

Which tools do you use ? 

I try to keep tools made my software manufacturers down to a minimum. I spent 12 years doing Flash which was eventually retired. I then learnt Edge Animate which went the same way only much sooner so I don’t like to rely too heavily on offline software. Having said that I do use Adobe Illustrator (AI) every day and I would have a hard time without it. I tend to sketch ideas on paper, work them up in AI then move over to CodePen and finish the project there.

I build most things in Scalable Vector Graphics (SVG) now – I love the crispness and directness of vectors (which Flash was good at too). I love that it’s scalable and looks good on every single device and screen. And the great thing about SVG is that it’s a W3C standard which has been around for about 20 years so it’s not going anywhere soon.

What is your creative approach, your workflow ?

As I mentioned the great thing about working in the browser is that you can load up your current project wherever you are. Inspiration has a habit of striking at weird times so it’s useful to be able to pull out my phone and try out an idea there and then before the idea disappears. Often I have a fully formed idea in my head before I even start – creating it is just a question of sketching it, drawing it properly in AI, spitting out SVG elements and then animating then using GreenSock Animation Platform (GSAP) which is a set of JavaScript libraries. If I don’t have a fully formed idea I like to doodle and create lots of individual illustrations to see if I can do anything with them. If I don’t feel like creating something new I’ll go and find an animation by someone I admire (which has usually been created in After Effects) and recreate it in SVG just for practice.

What are your advises to be a better designer and web animator ?

Practice, practice, practice. Study the work of people you admire. Deconstruct it, obsess over the minute details, Observe how things move. Study water, curtains, a dog walking, ice crystals, flames. Look at the world upside down or with your head tilted. Don’t be afraid to be silly and create silly things but always concentrate on the details – there’s a saying that the devil is in the detail. Without wishing to sound religious (which I’m not) I prefer to think that god is in the detail. The little things make a big impression – get those right and it will contribute to your success. Also don’t be distracted by the new shiny thing that claims to make you better at your job. It won’t. Find a few tools that you enjoy (for it’s GSAP and AI) and get really good at them.

According to you, what are your best works ?

I’m not easily pleased, I get bored easily and I always try to look forward. Usually the last thing I did is my ‘best’ work, mainly because I’m not sick of it yet. Having said that I haven’t got bored of these yet

See the Pen I DESIGN WITH CODE ❤ by Chris Gannon (@chrisgannon) on CodePen.dark

See the Pen Perpetual Pencil by Chris Gannon (@chrisgannon) on CodePen.dark

See the Pen SVG Waterfall by Chris Gannon (@chrisgannon) on CodePen.dark

See the Pen Pull To Launch by Chris Gannon (@chrisgannon) on CodePen.dark

See the Pen Fire Loader by Chris Gannon (@chrisgannon) on CodePen.dark

See the Pen Ducks in Boxes by Chris Gannon (@chrisgannon) on CodePen.dark

What are you next goals ?

Currently I sell design and code on Envato’s CodeCanyon. My next goal is to open my own store on and sell my work there instead.

What technologies would you want to discover ?

When I was younger I tried every single piece of software I could get my hands on. I was always experimenting with new technology (which was fun!). The downside of this is that I wasn’t actually learning the underlying skills required to use them properly. I was simply learning how that bit of software worked.


The older I get the more I appreciate the value of those skills and disciplines. Owning a copy of After Effects doesn’t make you a good animator – being observant and studying the way things move and interact with each other is, for me, a much better way to develop the core skills needed to become a great animator. We live in an age when new software, apps and JavaScript frameworks come out every day – these rarely interest me at all. My aim has always been to become skilful enough in a few things so that when I do have a good idea I can execute them with creativity at the heart of it and not be hindered by the technology required to do it.

One last word?

When you are younger you tend to lack confidence which is totally natural. You often don’t have the skills yet that you want and your taste in quality always exceeds your own capabilities. This is a good thing. But in order to build confidence I recommend aiming low. Go for the low hanging fruit. I appreciate this flies in the face of most advice which is to aim high, think big blah blah. The problem with aiming high is that often the goals you set for yourself are just too difficult to achieve with your current skill set. This can lead to failure which in turn can lead to frustration which can lead to giving up (which knocks your confidence even further).


So aim low – pick something that’s easy to do and master it. I still look at the work of the people I admire and I’ll take one small part of their most recent amazing project recreate it. I won’t try to recreate the entire thing because I will most likely fail and get annoyed (and give up). By taking on and completing a small task you boost your confidence, you add a new string to your bow and you enjoy the low hanging fruit. Because the low hanging fruit gives you the energy you need to move onto the next small task and before you know it you have learnt a huge number of techniques. Pretty soon you will have the confidence, skill and ability to create your own original work and nothing is more satisfying than that.


Thanks to Chris Gannon for the time he spent on me and his sympathy 🙂

You can follow Chris on :
Website /  Blog /  Twitter /  Dribbble /  Codepen /  LinkedIn

You could like ....

5 commentaires

  1. I absolutely love your blog and find most of your post’s to be what precisely I’m looking for. can you offer guest writers to write content for you? I wouldn’t mind publishing a post or elaborating on a few of the subjects you write with regards to here. Again, awesome website!

  2. Heya great blog! Does running a blog like this require a large amount of work? I have very little expertise in programming however I was hoping to start my own blog soon. Anyhow, if you have any ideas or techniques for new blog owners please share. I know this is off topic however I simply needed to ask. Cheers!

  3. I think that is among the so much important info for me. And i am satisfied reading your article. But should observation on few basic things, The site style is wonderful, the articles is in reality nice : D. Excellent process, cheers

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *