Designing with Sketch 3 and fun with animated SVG's

I’ve been a student of TeamTreehouse for quite a while now. I cannot speak highly enough of how polished and refined their courses feel and how much I’ve learned over the past year. So when they launched their course for Sketch 3, I paid attention. I hadn’t heard an awful lot about it, but some cursory Googling revealed it to be the up and coming vector based design tool for web developers, so I thought it worth a look.

Update: Since animating SVG with SMIL animations is being deprecated across modern browsers, I've since moved on to animating with CSS. Check out some examples here, and subscribe for tutorials using the form below or by clicking here

The course itself was up to the usual high TeamTreehouse standard. It was quick, simple, and easy to follow along. In no time I was designing layouts and buttons and exporting them for use on the web. At the time I was developing a web app for the auto industry, and I wasn’t entirely happy with the loading GIF I had on the site. It worked, but I had an idea for something I wanted to try out. So I opened up Sketch 3.

I knew I could animate SVG format images  by editing the code, and I knew Sketch could export as SVG’s. I wanted a loading animation that was befitting of the industry my app was for. I decided I wanted an animation of an engine turning, two pistons and a crankshaft spinning around.

Although I knew animating an SVG was possible, there was a bit of a learning curve to get it implemented, but after much toiling, and late nights and YouTube videos, I finally got something worth sharing. It’s not perfect, but it’s pretty damn close! I’ll tweak it over time, changing the colours and speed possibly, and fixing the slightly errand bezier curve figures to make it perfect, but I’m quite happy with it for now.