Chris Gannon

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. His portfolio is linked 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.

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.

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 or use cases of 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.

How do you go about animating, any techniques or hacks or source of inspiration 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.

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 just getting in 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.

— Chris Gannon

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.

Custom Workstation Setup of Chris Gannon. (We are wondering about the giant Lego too)

Author/Copyright holder: Pixabay

An interview is a process that helps recruiters to find out a suitable person who can fulfill their requirements in a desirable way. It includes a set of questions and answers to get an understanding of the other person about his/her skills, interests and attitude.

Being a professional UX designer, you must have to appear in multiple interviews when you are searching for a job. At times, you rock in an interview and get a positive outcome in the form of your favorite job, while sometimes you might not be able to perform well and hence do not get the required results. However, taking these chances as learning opportunities help you improve yourself and try harder for your next interview. 

There are different ways to show outstanding performance in an interview. Few useful tips that can help you for your next interview are listed below.

1. Prepare well

The first and most important thing that you can do before going to an interview is to prepare as much as you can. There is a lot of material available on the internet related to UX, including useful interview questions along with best possible answers. 

To make sure that a lot of information may not overwhelm you, find few sites that serve you with the required content and are enough to follow to prepare well. Read the given questions and answers carefully and try to map those answers to your own knowledge and practical experience. A good source for UX related interview questions can be found here.

It is always important to prepare well that includes understanding your potential employer and may be the kind of interview questions employers ask. Glassdoor is a good source that contains interview questions for different companies as well as reviews from their former and current employees. 

When you have a good collection of interview questions, organize them in the form of a document by listing all the questions and answers into it. Then, tweak the answers by adding your own experience in each answer. Keep on adding the questions/answers in the same document so that it becomes your interview glossary. 

When you are called for an interview, you can go through this glossary thoroughly and practice your answers multiple times in your mind. This will be your guide for interview preparation that helps you save a lot of time.  

2. Know about the company and your interviewer

Another important step in interview preparation is to research about the company where you are going for your interview. For this purpose, go to the company’s website and discover their goals, products and interests. It is also helpful to find information about company on Linkedin, Glassdoor, Quora and other related sites. Using this information, modify your portfolio and include keywords from the desired job description to make it more relevant and appealing to your recruiters.

In some interviews, you would already receive an email a few days before the interview regarding who is sitting in your interview panel. Knowing about the interviewers is also as important as doing research about the company. In this digital world, it is not difficult to find a professional on the internet. Go to Linkedin, and search their profiles. Get to know their experiences, their past work and their portfolios as this will help you get familiar with the person and their achievements. 

An interesting tip is to look at the recommendations that they have either received or given to others. This will help you understand their working style, their relationships with peers, and their values. This knowledge will allow you to make a better and effective communication with them during the interview. Not just this, it would also help you reflect if this is really the job you are looking for. If you are uncomfortable with someone’s working style, do you really want to apply for the job?

Author/Copyright holder: SEJ

3. Revise UX basics, even if you’re an experienced UX designer

You might have done a lot of practical work in UX field for a number of customers. You will have many projects to show and describe in your interview. However, make sure to revise your basic concepts of UX design, as sometimes we absorb too much in practical work that we ignore the usage of related terms and phrases.  

The recruiters may not ask you the definition of information architecture or interaction design, but it will give a good impression if you use similar terms while explaining your design process.

Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use

Use a language with UX keywords and show them you have a good command over UX concepts, and you can help your customers to realize the value of UX design and you can mentor your juniors to understand them about the creation of amazing experiences.

4. Take along with your portfolio and make sure to include your UX process

To earn a UX job, bring your design portfolio with you including all necessary elements in it. To create an impressive portfolio, it is better to research a few useful tips that can help you when you organize your work in portfolio. Review portfolio examples from professional UX designers and see how they explain their projects. Behance and Dribble are two most common sites that contain hundreds of good portfolios from professionals around the world. 

Make sure to discuss the process that you follow while working on your design projects. Start with an idea, and explain your process of converting that idea from wireframes and images into prototypes, and how you get client’s feedback. If you just add finalized graphics to your portfolio without explaining the process of creation, this will not add much value to your interview. It is better to prepare a balanced mix of examples, like having a user flow, a couple of prototypes (both low-fi and high-fi), few mockups, a case-study, an AB test that went well etc. This would give a general impression about not just your UX but also your thought process. 

Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use

It is also a good idea to include recommendations that you get from your clients or from your organization. Explain the value that you add to business through your design work, and also describe the impact of your work on your user’s lives. Add links to your professional social media profiles to support your experience.

5. Answer the questions that you are asked

At times, there are candidates who are eager to share their experiences with much detail. The right length for interview answers is one to two minutes, as it is difficult to listen to someone for too long and your recruiter may get bored.

Try to give clear and precise answers that are specific to the asked questions. You can provide examples to support your answers, but don’t try to speak each and everything you know about UX.

If you provide solid information in your answer, you can deliver more in less time and its impact will be greater. Providing long answers containing irrelevant information can spare extra time, also it may not help you in any way in your interview. 

6. Take your time to solve a design problem

It is a common approach to have a design task or exercise as part of your UX interview. This helps recruiters gauge your thinking process, imagination power and creativity. This is a tricky part of your interview and requires an attentive mind.

When you get a design problem to solve, always ask for a few minutes to understand it, though most of the time you will get it without asking. Read or listen to the problem carefully. Whatever has been asked in the interview, translate it in your mind to your own words and thoughts. Ask questions to clarify the problem.

One useful tip here is to try to relate the problem to any of the design tasks that you have already worked on. This will help you to go through the same process of ideation, user flows, sketches and layout. It would become easier for you to solve the problem and present it to the interview panel.

Keep in your mind that there is no right or wrong answer to a design problem. However, it is a good chance to show your design process, your way to solve the problem, and how you reach towards the solution. 

Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use

7. Always think aloud

When you are asked a question in your interview, always think aloud as this will help the interview panel to understand your problem-solving approach, an essential requirement for a UX job. This is an important protocol when you are solving a design problem. 

Lengthy silent periods can harm you as it will give no clue to the recruiter about your thought process. This is even more essential for a remote interview where face-to -face conversation is not possible.

Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use

8. Be honest, be confident and be positive

During an interview, always be honest in your answers, be confident about your knowledge and skills, and be positive in your communication.

We all know that UX skill is a mandatory qualification to earn a UX job. However, your attitude matters a lot. A big mistake that a person can do in an interview is not presenting himself as a professional worker. Good UX skills but an undesired behavior can harm you in an interview.

Be honest when you are explaining your work. If you don’t know the answer to a question, there is no harm to admit it. However, don’t forget to show your willingness to learn new concepts and trends. Be confident when giving your answers. You have the required knowledge and skills, that’s why you are called for the interview. 

Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use

Think positive and behave positively. Everyone in the room wants to see you successful in the interview and that is the reason you are sitting with them. No one is there to make you feel bad or inferior. 


Giving a UX interview needs a lot of preparation, whether you are an experienced or a fresh graduate. So, take time, prepare notes, study well, behave confident and perform excellently.  

Make sure to follow up after the interview as this will show your interest for the job and thus leave a positive impact. Whether you are successful or not, make sure that you always get feedback from your recruiters as this can be a good learning experience useful in another future interview.


Want to learn more?

Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Then please consider signing up for Online UX Design courses from the Interaction Design Foundation (IDF). The online courses from the IDF will equip you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research – Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!