1

I noticed that the left half of Dropbox's homepage includes an animation (a fairly slow-paced one), with:

  • gradually-revealed complex drawing, such as a "handwriting" animation
  • cross-compatibility across a bunch of browsers that I tested
  • fast loading time

When I right-click and try to open it in a new tab, it opens a PNG and not a GIF, and only shows the still portion of the "animation".

What is used to create this type of animation? Javascript? CSS3? Canvas-based?

1

There are a few things taking place on that Dropbox home page.

There is a stack of images, both png and svg, aligned with CSS. Then Javascript, specifically jQuery, is used to show/hide and animate the images.

The static image you get when you try and save it, is the default background for everything going on above the background.

Inspecting the code of the page may reveal more:

enter image description here

3
  • Thank you. I didn't notice any SVGs; I tried the page inspection, and noticed that there are only PNGs (at least within the scope of this animation). Also, the "page with the handwritten text" for example is a static PNG, so how do they make those words animated-reveal line by line? Is it really possible to animate something so specific with Javascript? – boardbite Jun 24 '14 at 23:27
  • 1
    @boardbite They are using svg images to mask out / animate things. For example the div.doc element has svg image that masks out 3 rows of text from the background image (document img) within that div. The svg has 3 polygons that each form one solid line with the background color, therefore hiding those 3 text rows. When the animation starts, the polygons start to shrink down from left to right, revealing the letters one by one. – Joonas Jun 25 '14 at 7:50
  • @Joonas: You are the one who coded that page, aren't you. Just kidding; but that is a very smart technique! – boardbite Jun 25 '14 at 16:42
1

Here is solution from Adobe (Edge Animate) for creation of JS animations with Flash-like workflow. Then animation can be embedded in any HTML page.

https://helpx.adobe.com/creative-cloud/learn/tutorials/animate.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.