They're very smooth. Is AfterEffects used when doing these? Anyone know of a good tutorial?
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.
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
Thanks! Looking forward to part 2.
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
Thanks for the explanation! Top-notch work :)
Thanks for a detailed answer! Looking forward reading more about the prototype process!
Does this link answer your question?
Thanks for this! It's quite insightful – some clever work at hand here.
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?
Yes, I believe the actual image was first animated and the keyframes exported before creating a timeline animation with css.
with css keyframes http://cl.ly/image/0C0h2x18041r
Do you know who was the illustrator who made the actual animation?
I can't see any animations on the Dropbox page. Can you point out how to see them?
I think he's talking about this animation: https://dribbble.com/shots/2028142-Send-Videos-Instantly but I'm not sure
Not sure how they do the dropbox page but here is a look at how they built the Dropbox Carousel page