Grow your CSS skills. Land your dream job.

Subtle Animations of Page Elements Using GIFs

Published by Chris Coyier

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.

monsterpage.png

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Comments

  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??

  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.

  3. Permalink to comment#

    Many times people overuse animated elements and they end up taking away more from the design that enhancing it.

  4. Permalink to comment#

    we used a animated gif to give our alter ego’s a blink too! see it here Nomar about page.

    In our opinion there’s nothing wrong with animated gif’s just as long as its not used to add myspace glitter!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".