Subscribe

  • Subscribe  

The 20% Animation Rule

Posted by Sravan | July 23, 2008 .

You should read these wonderful Flash Animation Tips post by Hakim Elhattab on the media blog of Fi. Though the title has ‘Flash’ in it, they are all generic enough to be applied in any RIA with animation.

The tip that grabbed my attention, and all others’ who read it, was the 20% rule.

“When an animation feels excessive, you can apply what we call the 20% rule. This means that you show only the last portion of an animation flow to the user. For instance, imagine a drop down… instead of animating it expanding all the way down – animate only the last bit where it falls into place. This leads to a shorter animation which focuses on where the dropdown lands and still feels smooth.”

Very sensible. It makes use of human perception, which can fill in the gaps between images and make motion seem continuous.

There have been comments asking for, and suggesting, some examples. To my understanding, all Tom & Jerry cartoons e.g., use this rule whether during Tom chasing Jerry or Tom falling off a cliff during that chase. The initial take-off and final few milliseconds are shown with clarity, while the actual action passes off in a blur accompanied with appropriate sound effects. Like in the video below.

Can you think of any other examples? From applications that we use daily?

Leave a Comment

If you would like to make a comment, please fill out the form below.


Name

Email

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Comments

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Related Posts

<

Direct TV Offers - usdirect has the best directtv deals