• Tanner Godarzi, over 8 years ago (edited over 8 years ago )

    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 :)

    37 points
  • Andrew ZimmermanAndrew Zimmerman, over 8 years ago

    Does this link answer your question?


    3 points
  • Erik Larsson, over 8 years ago

    I can see that the animation is done with css moving a long strip on the x-axis. But is the actual image strip somehow first animated in AfterEffects or something else?

    2 points
    • Ernest Ojeh, over 8 years ago (edited over 8 years ago )

      Yes, I believe the actual image was first animated and the keyframes exported before creating a timeline animation with css.

      0 points
  • John ChouraJohn Choura, over 8 years ago

    JPG Sequence


    with css keyframes http://cl.ly/image/0C0h2x18041r

    1 point
  • Brent Lagerman, over 8 years ago

    Do you know who was the illustrator who made the actual animation?

    0 points
  • Ed LeaEd Lea, over 8 years ago

    I can't see any animations on the Dropbox page. Can you point out how to see them?

    0 points
  • Reuben IngberReuben Ingber, over 8 years ago

    Not sure how they do the dropbox page but here is a look at how they built the Dropbox Carousel page

    0 points