📝 CSS-Tricks 230: Animate Everything by 1%

View this newsletter on the web.

[Robin]: Animations are important, but deadly. They can focus our attention on certain bits of information at just the right time, they can be for fun when you’ve hit a button, and animations can also be used to make you trust a website, app, video game, or bit of software even more than if they weren’t there are at all.

When the animations are smooth and don’t get in the way, that’s the sign of a truly outstanding website (to me).

But! When I use a site with too many animations I feel like it slows me down and I start to distrust it all. Video games do this too—the character crouches to pick up an item, reaches out to grab it, then they look at it, then stash it away. It’s exhausting! Just let me have fun!

Web designers like us can learn a lot about animations from video games, especially because a lot of these animations are unnecessary and feel just like load screens to me. As I’ve been thinking about all this, it’s sort of led me to this completely un-researched and un-scientific conclusion: I feel like we should animate absolutely everything, but only by 1%.

Take big swooshy animations that pop up when a page loads. Those are extremely distracting to me—I begin to notice the animation instead of the content—and it feels like a barrier to entry. But a tiny swoosh that animates in or out quickly? That’s extremely elegant and my attention is drawn to the content more so than how cool the developer was when they wrote that complex SVG animation.

Subtlety is important when it comes to animation design because otherwise they can get in the way and frustrate folks. It only takes a tiny bit of movement for your eye to notice it too, and just because we can animate everything on a webpage in and out, doesn’t necessarily mean we should.

(Except by 1%.)

Animation is like typography in that way: you can make a big and bold declaration with a flash of something interesting but you can’t keep doing it over and over again. It gets both boring and annoying. So I’ve been trying to keep this in mind whenever I crack open my text editor and jump into @keyframes and the like.

When it comes to animations, subtlety is the key.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s