Back with an update! I wrote a more in depth case study on my portion of the new Dropbox Homepage here: http://tannergodarzi.com/projects/dropbox-homepage.html

Enjoy :)

Hey all!

I'm Tanner, a Web Dev at Dropbox responsible for building the animation sequence on our new homepage. Right now it's being A/B tested so some users will see the animations while others will get a nice static fallback. Here's a reference for those wondering: https://dribbble.com/shots/2028142-Send-Videos-Instantly

I'm in the process of writing a case study on this but I wanted to chime in here.

Before even building the animations we knew these had to play on desktop machines and mobile devices. HTML5 video and gifs were a cop out due to iOS forcing video to play full screen and the performance issues with gifs. I started dissecting the animations (which were originally short videos from After Effects) and prototyping against that. In its simplest form, animation is just a sequence of images moving to create the illusion of motion.

Prototyping these animations was fun as I tried everything from CSS keyframes to painting differences in frames onto a canvas element. WebGL and even APNG were prototyped roughly just so our team could fully understand what the technical limitations were of each animation technique and fully own the final implementation.

CSS keyframes were chosen due to browser support (especially on mobile, that was one of the big deciding factors), solid performance and changing animations are much easier compared to say, something like the canvas animations on the Apple Watch page (http://www.apple.com/watch/technology/) which plot blocks from a massive JPEG sprite.

There are some compromises such as having to create a sprite for each animation sequence and the penalty of loading large JPEGs (PNGs were an absolute no go due to hard dimension limits in iOS and Firefox). The latter is handled by Javascript watching each sprite to make sure it's already loaded (whether it has finished downloading or available in cache) before initiating the sequence. Each animation has a poster (think HTML5's poster attribute that shows an image before a video plays) to give the user something while an animation loads.

Hey all! Back with an update! I wrote a more in depth case study on my portion of the new Dropbox Homepage here: http://tannergodarzi.com/projects/dropbox-homepage.html

Enjoy :)