Subtle Animations of Page Elements Using GIFs

By: Chris Coyier on October 10th, 2007 — Posted in: Freebie

I really like it when pages use really subtle animation to enhance different page elements. Check out the E-Junkie site and their little flame dude in the stamp as their logo. Every once in a while he blinks and it’s a pretty cool effect. They use an animated GIF to achieve this effect, so I thought I’d give you an example of my own.

Chris Spooner at Spoon Graphics has designed a very cool “Frankenspoon” monster. I modified ol’ Frankenspoon a bit (and made him blink) and used him in the header of an example site. Also, the highlight on the top border of the site moves back and forth once in a while.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Theoretically Related Articles:

Discussion Elsewhere

GadgetGadget.info - Gadgets on the web » Subtle Animations of Page Elements Using GIFs — October 10, 2007

Responses

1

Thing I like about that is the subtle animation that doesnt irate users but rather ADDS to the design…

So if you are to use flash or animated gifs, first rule: Does it animate and annoy the user??

Comment by Jermayn Parker — October 10, 2007 @ 8:42 pm
2

Yeah animated GIF’s get a bad rap for being annoying. That’s my point I guess, is that they don’t have to be.

Comment by Chris Coyier — October 11, 2007 @ 7:02 am