4 Disney Principles That Will Make Your Web Animations More Lively
In ’80s Disney published a book titled “Disney Animation — the illusion of life”, which covers 12 principles of good animation. Even though, those principles were made with cartoons in mind, they apply pretty well to Web Design & Development too. Here are 4 of them which, in my opinion, can make your web animations much more attractive.
The modal animation presented below is a standard CSS fade-in and fade-out effect. Standard is the keyword here. We’ve seen that many times and it’s fine. Nothing special. Like most animations used on websites it doesn’t have any purpose. Developers add them just to make something move and look nicer. But good web animations should feel natural and living, just like in Disney’s cartoons.
Check out the source code here
As you probably know we can animate things using CSS rules. It’s very easy to use these properties, but it’s also very easy to overuse them. And then you can end up with chaos on the page. The 4 principles below will help you organize the chaos and make your web animations more Disneyish.
The 4 principles below will help you organize the chaos and make your web animations more Disneyish.
1. Timing
Timing refers to a factor which describes how much time takes one animation. In CSS we call it duration. Setting proper duration for our animation can be difficult, especially when we deal with quite complex animation. The general rule is that — our animation should have from 0.2s to 0.5s duration. The lower end is meant for quick animations, like changing background on button’s hover. The higher end is suitable for more complicated motions. Bounces, springs, etc. needs more to time to be readable.
2. Spacing
Basically it’s three Disney’s principles (Staging, Anticipation and Squash & Stretch) combined into one. Spacing affects every property connected with object size and space taken by it. In CSS we use easing for spacing adjustments. We can use standard CSS’s easings, but it’s better to use cubic-bezier function. It gives us more control of animated element’s spacing. Generally, ease-out fits better for input action, for example when we show something.
3. Follow through
This principle applies to element’s movement. In real world, when something is moving it doesn’t stop at once. It must overshoot it’s postition a little when it stops. Especially, when moving with high speed. That effect can be easily observed in cartoon’s, when character stops after running. In CSS to achieve that, we can use back-out easing.
4. Secondary action
Secondary action occurs, when some element responds to its neighbour’s movement. For example one element hits other. Or one element contains other elements, exposed on its movement. In HTML and CSS world, we don’t have any sophisticated tools to apply secondary action. But we can delay animations to chain them (in Javascript we can actually chain animations). Chaining animations will help us to create fake effect of elements responding to actions of other elements.
The Final Effect
The above are 4 important principles, which in my opinion are extremely useful for making impressive CSS web animations. Let’s apply them to the previous demo.
Check out the source code here
The animation above is far more Disney-like than before. Sure, it’s not on The Lion King’s level, but it looks much more attractive and will grab attention of more users than the standard one. The important part here is that every movement has it’s purpose and defined direction.
The important part here is that every movement has it’s purpose and defined direction.
Summing up, web animations are important in drawing users’ attention, but also make our website lively. Disney provided 12 principles for good animation, that apply for both web and cartoons. Taking inspiration from cartoons can help a lot during web animation design process. They imitate nature very well and you want the website to feel natural to people too. I hope that you’ll find the above useful.
Share your opinions in comments!
