Over the past month, I participated in a workshop led by Cassie Evans and Smashing Magazine called "The SVG Animation Masterclass". It was a fantastic workshop and inspires me to do more with animations for liberate science designs in the future. Watch this space, but until then, here's some things I wanted to share with you about my journey into animated SVGs.
To put it simply, Scalable Vector Graphics (SVGs), are an image file format that, unlike some of their pixel-based counterparts, plot images mathematically and thus can scale up and down infinitely without losing resolution.
As a designer, I work extensively with vector graphics. For both print and digital work, SVGs are one of, if not THE primary format in which we deliver design assets. However, it wasn't until the workshop that I got a glimpse into the fantastic technical and creative potential of SVGs (For a rapid fire and fascinating tour of some of the things that can be done with SVG, check out Sarah Drasner's talk, SVG Can Do That?!).
Up until the workshop, I approached SVGs from a purely static perspective, and being able to dip my toes in the world of SVG animation was not only eye-opening, but immensely inspiring. Crossing the gap from visual designer to animating developer was daunting, but having the resources of the workshop made it much more doable.
Now, let me give you a high level overview of how I started learning the new skill of creating a basic SVG animation.
Start with a concept...
First things first, start looking around for inspiration (a project that you are personally excited about will help immensely when trying to learn something new). I am quite excited for the imminent release of Apex Legends on the Nintendo Switch, so I figured I would make a small Switch themed animation.
I popped into Concepts on the iPad and sketched out the idea I had in my head. Even this simple bit of sketching helped ground me throughout the process and approach the design step-by-step.
Idea sketching in iOS app Concepts
After that I hopped into Affinity Designer to create the actual vector art that I would be animating. It was helpful to take a tactical approach to building the graphic since I will want to be targeting individual elements of the design once we get into code.
You can see on the left the different Switch models I created. The big one on the top left is a 1:1 representation of the console, but I wanted to exaggerate the proportions of the device and make it "cuter", so I went about squashing and stretching it until I found the shape I liked.
Next I created a high fidelity storyboard to imitate how I would want the animation to go.
High fidelity storyboards
I tried to pay attention to the secondary animation like the delay of the joycons in the arc of the jump, or the shadow shrinking as the Switch gets further from the ground plane. Also, in this design I have a cute little "click" on the second to last frame, but as you will see later, I wasn't able to implement that in time for this post to go out, but I most certainly will in the future!
To get a better idea of how the animation looked, I exported all of these frames and joined them together into the GIF you can see here (no SVG animation involved):
Rough GIF
Add a pinch of code...
This is where the SVG animation and the tricky part began for me. Like many, I have dabbled in some basic HTML and CSS learning. I have even looked into JavaScript a bit, but making the connection between the "number garbage" and the motion was a real struggle for someone like me who isn't a developer (YET!). I mean look at this! What does this even mean?!
Raw SVG code
That's the raw SVG code created from my exported Nintendo Switch graphic. A good portion of the workshop was spent on how to make heads or tails of the outputted SVG code. There are lots of tips and tricks that Cassie gave the class and I am quite sure that I accidentally ignored a good portion of them, but that can be improved in time—let's make that console jump!
My strategy was to try to find an analogous animation that I could build upon and modify into my jumping Switch. I found this great article from CSS-Tricks called Making Animations Feel More Natural which was such a fantastic resource.
The image is defined in HTML, but the animation is created in CSS. Here you can see my CodePen setup with my HTML on the left and my CSS on the right and a previewer on the bottom:
My view in CodePen - HTML and CSS side-by-side
It took me a really long time, a lot of trial and error, and a lot of breaking things to get to the point where the Switch was actually jumping. For example, I borrowed some of the code from the CSS-Tricks article, but the Switch wasn't behaving like the example at all. The strategy I employed to try to work it out was to replace the given parameters with wildly exaggerated values and see what direction that was pushing the animation. From there I could make educated guesses as to the approximate value and finely tune it from there. The hardest part of the animation was making the shadow stay in place, but to shrink as the Switch jumps. The most helpful resource for finally solving this puzzle was the MDN Web Docs from Mozilla, in particular, the documentation about the CSS transform property finally got me to my goal. If any of you are aspiring developers, or designers with a hankering to start coding, I can't recommend the MDN Web Docs enough. Bookmarked!
Funnily enough, I was warned by Cassie and the class that the squashing and stretching in CSS was gonna make me want to pull my hair out and they were right! However, now that I've taken the time to figure it out, I feel much more confident for the next project.
Serve result
So without further ado, here's a link to the animation where you can see it running for yourself and if you like, you can poke around in the guts and break a few things yourself:
There is still a lot I would like to do (like the "click" lines!) but for a first attempt, I must say I am pretty proud of how far I've come in just a few weeks. SVG animation is something I would love to invest more time into and I have already signed up for a second SVG animation class, so keep an eye out for more motion content in all things liberate science!
