Hi Chris! You’re a leader in animated SVGs. And you call your craft “Designing in Code” — can you describe what it means?

The beauty of SVG is that it’s all code — yes a complex SVG image is a LOT of code but it’s still just letters and numbers that can be altered in the browser very easily.

This means it’s a brilliant language to design with because I can create visual elements like circles, rectangles and lines just by writing a line of code; I don’t need to keep going back to a vector art app to create assets. For more complex shapes (paths, polygons) I jump into Adobe Illustrator (AI) and draw what I need but the fine tuning is done in the browser and to me, the fine tuning, the details, are what make something really shine.

Here’s a shiny example ¬ Pod Slider

Pod Slider, by Chris Gannon

Click around ↓

Have you always designed in code?

I haven’t always designed in code — I’ve always drawn graphics, historically in Flash and now in AI and then animated the individual elements so designing in code is a fairly recent development for me.

Lots and lots of practise has allowed me to get my skill level up enough so that I don’t have to worry so much about the technicalities (although I still trip up). This means I can concentrate on visualising what I want and write the code in a text editor or directly in the browser to create something that (hopefully) looks graphically pleasing.

What are the advantages?

As far as advantages go I’d say the immediacy of SVG and the fact it’s rendered in the browser are two big ones. Couple that with CodePen’s instant previewing and GreenSock powering the whole thing and you can iterate over and fine tune ideas really quickly. Changing the code and seeing the result immediately means you get to where you want to be far quicker; it also means you can try and subsequently dismiss a bad idea quickly too.

Other advantages are that I can create very complex animations that I could never have drawn (or even visualised) — designing in code really gives me the freedom to play around and do impossible things and I love this freedom.

¬ Interactive Info Graph

(Click around ↑)

So, what’s your design process?

When I first have an idea for a project I always sketch on paper. Sometimes but not often it’s a full blown storyboard (albeit badly drawn) and sometimes it’s nothing more than a few rough circles, lines and arrows that only I can understand — if anyone else looked at it they wouldn’t have a clue what it was but I usually need to get that initial idea down on paper to make it a real live ‘thing’.

Once it’s on paper it’s often immediately apparent that the idea just won’t work or won’t look the way I want. And sketching isn’t just useful to try things out — I also use it as a reference or reminder. It’s easy to disappear down a digital rabbit hole trying stuff out in code and going off on tangents when you’re designing something (which isn’t a bad thing!) so having a sketch of the initial idea is a good way to stay focused and keep the process on track. I find I execute my best ideas very quickly when the idea is clear and well formed; this is when the creative process flows and I disappear into the zone. If I’m having to force things to work and spending hours and days on one little part then I’ll probably bail out. I get bored VERY easily so I have hundreds of unfinished projects laying around!

As far as tools goes I try to use as few as possible. Becoming too dependent on proprietary software has bitten me on more than one occasion (Flash, Edge Animate) but it’s not always possible to be completely independent of software.

My SVG workflow is: Paper -> AI -> SublimeText -> Browser (CodePen/GreenSock)

Just to expand on that and to acknowledge that by using AI I just contradicted myself about dependencies, I sketch on paper, rough it out in AI, copy it into a text editor (currently SublimeText which I use to tidy up, reorder and rename SVG graphics but any text editor is fine), copy that into the browser (CodePen specifically) and animate everything with GreenSock (yes, yes another dependency but a damn fine one!).

I can create everything I need with these but if they all disappeared tomorrow I could still create SVG animations although it would be MUCH more difficult and they wouldn’t look or perform nearly as well. And I would probably quit and become a bus driver.

¬ All Devices

All Devices, by Chris Gannon

Is it fundamentally different than designing in Photoshop or Sketch?

I don’t design in Sketch, partly because I work on a PC and it’s not available and I don’t use Photoshop either because Illustrator is better suited for me. Designing in a graphics app will only take me so far, so usually I draw out a few things to get a sense of layout and colours and then pretty quickly hop over to SublimeText and CodePen and get cracking. I save all my Illustrator project files and if you compared the final animation’s look and feel to what’s in the AI file they hardly resemble each other at all.