Moving images on the Web have now come full-circle–first fashionable in the early 2000s, becoming passé in the mid- to late 2000s, and now back in style thanks to sites like Tumblr and BuzzFeed. Not only that, but a new format has arisen to possibly challenge the GIF format for its animation crown. The WebM Project describes a new compressed video format, much smaller than typical videos and yet still delivering higher-quality picture than GIFs, with audio to boot.

Because of this, the temptation to overuse animated image formats is again going to soar. But let’s not throw ourselves back into the “bad ole days” of pages so crowded with Flash movies and GIFs that they load slower than molasses. Here are some ideas for (carefully) using animations in your web design:

Feature Just a Few Large Animations Per Page

Since GIFs especially can be large files, don’t clump them all on one page; even super-fast connections will balk trying to load these heavy pages. Instead, have only a few animations load at a time, using separate pages.

If Animations Are Your Main Content, Let Them Shine Alone

When you’re working with animations as your main attraction, make sure the rest of your site doesn’t distract from them. Too many animations (even lots of small ones) equals a busy page!

Subtler Ways to Use Animations

Link Rollovers

Links with subtle movement when the user hovers over them, like a gradient of color washing from left to right behind the text, can give your site a little boost. It’s also fairly easy to incorporate using GIFs and CSS–here’s the W3Schools post on :hover, and a tutorial on hover animations for image links.

New Content Alert

When you have new content, a little animated graphic pointing your users to the updated content can be a cute way to draw their attention without having to write out “Hey, I updated this and this, go check it out.” A simple arrow moving back and forth beside your updated content can be all it takes, for example.

A Site Brand

Since you want to make sure your site sticks out in users’ minds (so they return), you could have a little bit of animation in your site’s symbol, like an animated avatar that you use for all your social media sites connected to your website. That way, when users see that animation, they know they’re on a page that’s associated with your site, and they’ll remember it. Just don’t make it too gaudy or overpowering!

Summary

Web animations are back, but we still have to look out for common pitfalls. Try a few of these tips and see what works for your site!