Web Animation Optimization - Making Things Look Good Everywhere

A blog post written by Theo Keeler, Lead Developer

A great way to make interactives more engaging is by adding animation; making things move and react to the user organically rather than showing static output draws users into the interactive experience. The problem lies in implementing these animations in a way that ensures they’ll run well even on old devices, as we discovered while developing interactives for Astro 101: Black Holes.

astro-fuel

We overcame these issues in a few different ways; firstly, in our animation design. Initial prototypes of the interactives featured lots of small, detailed animations on screen at once, but this quickly slowed to a crawl even on newer laptop computers - let alone older iPads! So our first task was to distil those animations into larger chunks that conveyed the same information, or eliminating them altogether; Removing a moving weather system on a planet here, making a space ship’s engine shoot fire all in a single line there. Simplifying the animations gave us a lot of performance back.

astro-escape-velocity

But, of course, eliminating all small details isn’t practical and it doesn’t look nearly as nice, so we got to step 2: moving big things to make it look like small things moved. Rather than animate each individual star in a moving starfield, for instance, we would instead draw all the stars on to a large rectangular block, and move that one block. While that might sound like it’s the same thing, on older systems it helped immensely as only one moving object (a bunch of stars stuck to a big bluish black thing) needed to be kept track of instead of 50 or 100 individual stars. This gave us a huge boost in performance, and let us restore some of the finer details we lost in the first optimization pass.

astro-black-hole

There were some technical considerations as well. We re-wrote all of our animations to purely use GPU-accelerated rendering on platforms that support it, using only CSS parameters like transform and opacity that can be hardware accelerated. This sped up overall animation, but left us with a small problem: when GPU accelerated animations started, there was a small hitch as the acceleration kicked in. Fortunately, we were able to flag all of our animating elements to precomposite (read: to “start” animating immediately rather than waiting for motion), removing the hitch and actually speeding animation a little further. While this did mean that target systems needed a little more video memory, we were able to carefully design our assets so that even our baseline system (a 6 year old tablet) could run the interactive happily.

So there you have it! With some careful design work and a little technical ingenuity, we were able to build some of our most animated interactives to date and make sure that those interactive experiences could be enjoyed by learners with a broad range of hardware.


Share this



Onlea

Onlea

#TeachTheWorld #OnlineLearningRedefined #AccessibleKnowledge