In the last few years, we’ve been seeing more and more CSS animations on websites.
Some designers seem to have made it their mission to cram in more animations in creative ways. Until you as a user can see nothing but animations and flying/appearing/shooting objects when browsing.
Even Apple, a company that used to do great design, is animating everything from their watch graphics to their phones, etc..
The top themes on Themeforest are also all selling themselves based on the sheer amount of gee-whiz animations that they can pile on to a template.
The problem is that this is bad design in 97% of cases.
Why do animations suck?
So why is using animation a mistake? Well, we have to start with the purpose of a website. In a majority of cases, a website is designed to communicate. Whether it’s to publish media or sell a product, generally the web is a communication medium.
Now, look at any website using animations and/or HTML5 background videos.
Do the animations help them communicate anything?
Or are the animations simply distracting you from what the site is trying to say.
That’s what I thought.
97% of the time, animations suck because the designer added them to show off their CSS skills not because it helps with communication.
In the case of Apple’s current watch page, it’s almost impossible to read the content since the animations are so all over the place and intrusive.
Animation-itis In WordPress Themes
WordPress themes are typically sold based on the merits of a demo.
(Since a lot of technical work is required to create these demos, is completely incorrect thinking for people to buy themes based on a demo, but nonetheless, that is the way it is currently working. )
Anyway, because content is irrelevant in this scenario, the only thing left is the layout and way things move as you use the demo.
Therefore, theme designers throw in every animation under the sun to try and impress you into buying the theme.
This inevitably propagates to people’s end websites where they spend way WAY too much time worried about parallax effects, and jumping icons when designing their sites. Because in the end, parallax and pop animations are only going to hurt your clients results anyway.
Animation in PageLines 5
I’m a student of Edmond Tufte, the godfather of graphical communication. One of his primary guidelines is to remove all unnecessary ‘data-ink’ and to orient all remaining ‘ink’ in a way that’s easily processed by the viewer.
As such, I’ve removed all unnecessary animation from the upcoming PageLines 5.
Parallax effects and popping icons are only going to distract your visitors from what you’re trying to say. So ask yourself, should you want that? Should your clients want that?
With this decision we’ve made things simpler, higher performance while giving you better results with your visitors.
Where Animations Are Useful
So where do animations fit in?
Well, animations are useful in one scenario where animations are useful. And that is to draw attention and to orient the user when something changes.
The best use of animation is in the iOS operating system. When icons shake or move, generally it’s to direct the user as to what is changing.
On a website, this can have utility.
A good example, might be a cart icon/number animating when someone adds something to their cart. This is good feedback that is also inline with what you probably want, to make them empty that cart via purchase ;)