I'm looking for a new web animation
Tuesday, December 29, 2015 by Dave Winer

On the original Mac there was an Alarm Clock desk accessory. There's a screen shot of it in the right margin of this post. 

In the upper right corner there's an icon of a mailbox flag. When it's down, the contents of the window is revealed. Flip it up to reduce the window to just the top line, showing the current time.

The flip is animated. Meaning the icon appears to flip up and down in steps, the same way the jQuery slideUp and slideDown calls make a div appear to roll down and up.

I want to use this animation in a web app I'm doing. I think it should be a standard design element, the same way wedges are for expand and collapse. This just reveals the contents of an object that can be summarized in one line. For example the message you're reading right now.

It could be implemented as a set of four characters:

  1. The flag is vertical.
  2. The flag is 1/3 vertical.
  3. 1/3 horizontal.
  4. The flag is horizontal.

Update

Ted Howard's suggestion that I use CSS animation worked. Here's a demo. Only works in Chrome, not in Safari.

  • I bet you could do it with one image and a css rotation animation. http://www.the-art-of-web.com/css/css-animation/

    • Looks promising!

    • It worked! 

    • `transform-origin: 8px 7px` makes it pivot around its post properly, but you'd want to move the click target to an outer element to make toggling easier.