At this year’s Quack Hack, Craig and I teamed up to build ‘Can I Ride?’. Our animated app allows users to check the weather and see if the conditions are best for riding their scooters. More importantly, this project was a way for us to experiment with coding performance-optimised animations.
The Challenge
Addressing your website’s performance (in terms of loading speed) is critical, but easily forgotten against creating eye-catching visual designs and content. Analysing live website data, the HTTP Archive reveals average page weight is rising – by 15% in 2014! – but users are more and more unforgiving. 64% expect complete load in under four seconds on mobile. On Amazon, each 1 second delay in page load speed costs them $1.6 billion a year. Every second really does count.
At Cyber-Duck, we balance great designs with load speed by setting strict performance budgets: targets for the final speed (and size) of a website. Animations are a great way to grab users’ attention, but are one of the culprits behind heavy websites. Many developers turn to .GIF files to create animations, but this can be very expensive for download speeds. We wanted to explore other techniques like CSS and SVG animations, or JQuery plugins (e.g. Transit).
For this year’s Quack Hack, my team wanted to find a different solution that could incorporate animations into websites efficiently. They needed to accommodate extensive scope, and be:
- Lightweight
- Responsive
- Cross-device
Experimenting with SVG Animations
SVG animations were the way forward: they compress well; scale to different resolutions without losing quality; and you can animate individual components at run time. Here’s a nice introduction to SVGs.
Over the weekend, we wanted to reduce animation file sizes with SVGs and explore how to manipulate individual components. So, we wanted a fun project to experiment with animations in practice – and were inspired by Craig’s love for scooter rides… and getting caught in the rain. ‘Can I Ride?’ would animate to show whether conditions were okay to drive, based on the user's location data or specifying a city / country.
We began by distinguishing between the “must-have” and “nice-to-have” features of the app, to ensure that a minimum viable product (MVP) was met in the time allocated. From this, we decided to return 3 different responses: ‘Hot/Warm’, showing the user can ride to work, ‘Cold’; which reveals that riding is risky; and ‘Wet’, which tells users not to bother! Each of these outcomes would be represented by a unique animation. We create 3 storyboards for each weather status and the relevant assets using Illustrator.
Developing ‘Can I Ride?’
Neither Craig nor I are back-end developers. To save time, we used an app our team already created – the popular canibbq application – as our base for returning outcomes. This allowed us to focus on creating the animations.
We researched different plugins for SVG animations and decided to use Snap, as it’s popular and has strong documentation. Using this, we were able to manipulate the same animation to suit the three outcomes by the end of the Hack; adding clouds, removing the sun, changing the colour of the sky, etc. The plugin JavaScript file size is roughly 100k, but the animation itself is only around 12k. So, by using SVG instead of .GIF animations we can achieve a massive reduction in overall file size for websites that incorporate several animations.
'Can I Ride?' animates whether the conditions are okay to drive.
The Final Product
By the end of the Hack, we had successfully boosted our knowledge about performance-optimised SVG animations, and gave a live demo of our working app. Highlighting the benefits this could secure for current and future clients, we came a very respectable second place!
Currently, we are looking further into the Snap plugin: establishing the boundaries for use in future client and internal projects. Over the coming weeks, we’re exploring how to make the app responsive first, as finding ways to reduce website page size for mobile devices (without removing desktop features) is particularly important. We’re getting ready to apply this knowledge for clients! Get in touch with us if you’re looking for an eye-catching, animated website with a high performance, or read more about this year's Quack Hack projects.
