PROJECT -  Innovate tirelessly to find the optimal solutions to problems



Design new elements in keeping with illustrative elements from their branding and create three versions one for each device shape. 

Ensure playback is smooth across all devices and platforms.

Keep download size to a minimum.


At first I expected to have to design three slightly different versions. Sometimes animations will only truly work at a specific aspect (wide, tall etc). This optimal aspect is often dictated by the content but I quickly realised that creating three different animations at different sizes would mean maintenance and editing of all three would be a nightmare and download size would be almost three times the size.



Having responsibility for both design and animation means design decisions are inspired and informed by their subsequent animation - this is a huge time saver. So in order to avoid the issues of creating three versions I designed the graphics with extra wide bleeds (e.g. the sky, water, mountains).

This meant that I could create one master animation and duplicate it twice in the browser at runtime and make on-the-fly edits to those new instances. I could enlarge or shrink the edges, essentially 'masking / unmasking' more of the sky and water graphics for the phone and tablet devices.

I also set up an edit routine for each new animation that tailored the size for the device.

The result is an animation that weighs in at around 50Kb (gzipped) and looks and performs beautifully on any device and screen density.

Ultimately this solution meant I had full control over the position and size of all three animations which saved me a lot of time and headache, end users were happy because it was smaller to download and ultimately it saved RethinkDB a lot of money.