Animation on the web.
As a junior developer I have spent most of my time knee deep in html and CSS. I have played with some basic CSS animations but now I am exploring javascript the options for web animation start to stretch off towards the horizon.
Given the infinite options, the masters of web animation seem to focus on what looks natural and feels comfortable. Small touches can quickly transform a site from simple, effective but slightly mundane, to modern, exciting and interesting.
Too much movement and it can quickly become confusing and overwhelming.
Resources
Two resources that I find myself returning to for inspiration, include:
The 12 Principles of animation is something which I am constantly referring back to. It is a good resource to check whether my animations can be improved.
Google also has some lovely design guidance for making on screen materials feel intuitive and realistic. They set out the rules by which they follow material design within their various applications.
There are various methods for adding animation to the web. Smashing Magazine offers some good guidance of the best approach to take, such as this article. There are also endless examples of developers experiments on CodePen. This animation example using only CSS recently caught my eye.
Examples
Some nice examples I have stumbled across on the web include:
- The animated transitions on this Japanese interiors site are very smooth and maintain a good user experience.
- The hover state in the Work section of Leed’s based animators Hungry Sandwich Club is unique but very user friendly.
- I am not generally a fan of scrolling sites but the text hover animation on this Canadian festival site is playful without being confusing. The menu navigation also uses very nice animation.