Use All Five Squiggle Graphic

The Process Page Animation Discovery

Our search for a solution to the technical challenge of a particular animation design led us to write a JS library that eliminates network latency between requests. Here we share the library and the story of how it came about.

When we sat down to reimagine our website’s process page, we wanted to visualize the dynamic nature of our process with a whimsical animation that responded to a user scrolling the page. After some preliminary research, we realized the development would be an intensive undertaking so we decided upon a two step approach. We would go live a solid temporary solution to meet our target launch date and in tandem develop a more robust permanent solution.

Our designers quickly mocked up an animatic to demonstrate the desired movement of the squiggle animation. While scrubbing through the video in Quicktime, something about the ease of scrolling through the video with the trackpad felt very natural. Which raised the question, what if we were able to replicate the functionality of scrubbing through an actual video on our site?

We sketched a quick javascript proof of concept, but the performance wasn’t great. While it technically worked, the animation was choppier than scrubbing the video in Quicktime. After digging into the issue, we realized continuously scrubbing the video in browser was computationally expensive and creating performance issues.

In search of ways to optimize, we found that adding keyframe indexes to the video file significantly improved the animation. Keyframe indexes helped us to easily locate individual frames as the user scrolls, similar to the Dewey Decimal System in a library. With the indexes in place, scrubbing the video in browser nearly resembled Quicktime.

However, when we deployed our experiment to our staging server, the performance was even worse than before. Through some more debugging, we found the new problem was how HTML5 <video> implements prefetching. The video player made new requests for content every time the user scrubbed and the content requests sent over the network were returning exponentially slower than the local requests.

Solution: we wrote a library which uses a cached-in-browser memory version of the video to eliminate network latency between requests, called scrub.js.

Check It Out

Blob and URL.createObjectUrl to the rescue!

We make an XMLHttpRequest for the video file, and specify that the response should be of type ‘blob’. ‘A Blob object represents a file-like object of immutable, raw data’. Thus, when the response is returned, we have a handle to the raw video file as a javascript Blob. The returned response is then passed to URL.createObjectURL(), which, ‘creates a DOMString containing a URL representing the blob object given in its parameter’, in our case, the video blob. This means we have a valid URL to the now in-memory video file. Plug in this URL to the video.src property, and you’ve got virtually no network overhead (after initial download of course). Combine this with a well indexed video file, and it’s all smooth scrubbing from there!

https://github.com/UseAllFive/scrub.js


Zach Brown is a Developer at Use All Five.
Follow Zach on Twitter

Get new perspectives and the latest information delivered to your inbox: