The Illusion of Life: Disney's principles of animation

http://the12principles.tumblr.com/

by mike_h • 12 years ago

144 31 12 years ago

the12principles.tumblr.com

pdenya• 12 years ago

Very cool animations and most fit the principals nicely but there's very little info on this page. I found the wikipedia page helpful and relevant - http://en.wikipedia.org/wiki/12_basic_principles_of_animatio...

huxley• 12 years ago

I'm not generally a big Disney person but the books on animation theory from them that I've bought are quite enjoyable.

There is book that the linked-to animation is based on: The Illusion of Life: Disney Animation by Frank Thomas

Two other Disney animation resources that I've picked up over the years include:

* The 2 volumes of Drawn to Life: 20 Golden Years of Disney Master Classes by Walt Stanchfield

* Walt Disney Animation Studios: The Archive Series in 4 volumes: Story (about storyboards not writing), Animation, Design, and Layout & Background

I haven't seen the flip books they released recently for each of Disney's "Nine Old Men" but it sounds interesting.

GuiA2• 12 years ago

I own all of the books mentioned above, as well as the flipbooks. They're really great, but you have to have a certain appreciation of animation beforehand to enjoy the details. It's really just the flipbooks - no accompanying text or anything. It gives you great insight into how talented animators animated certain movements, but you have to know what to look out for.

Not Disney, but the Animator's Survival Kit is also heavily recommended. Also recommended: Timing for Animation. I also have been meaning to check out "Elemental Magic" (2 volumes, about animating substances such as water, fire, etc.), and "Setting the Scene".

/signed a computer scientist who wishes he can retire and attend CalArts on his startup millions ;)

braveheart17232• 12 years ago

This is the greatest resource on animation I've found

By Richard Williams

http://www.theanimatorssurvivalkit.com/

Kiro• 12 years ago

So you would say it's worth the price? ($959.50)

Htsthbjig• 12 years ago

Obviously it depends on what you do for a living.

If you are an animation pro, $1000 could be even cheap if you earn way more money thanks to it.

jacobolus• 12 years ago

For a professional animator (including e.g. video game graphics/physics programmers), absolutely. For someone who makes a career doing user interface works, it’s a bit harder to say.

At some point there was a large portion of it on YouTube but I think it’s been (quite rightly) taken down as copyright violation.

Anyway, the parts I watched were really really good.

Tloewald2• 12 years ago

It's a great and practical book, but I'd say it serves a different role than Illusion of Life. I take it from one of the other replies that it's fallen out of print :-(

GuiA2• 12 years ago

Those animation principles absolutely apply in UI work, and I wish digital designers were more exposed to it. There is still a lot to be explored with what can be done with quality animation in UIs, and digital designers should absolutely pay attention to this. If you're a designer, doing motion well will do wonders to your career.

Motion has always been extremely important, but with the faster processors and GPUs we have in our mobile phones we finally have the extra cycles for it - Apple's latest iOS does really well on that front (far from perfect of course, but they're trying really hard and getting places). It's no coincidence that UIDynamics shipped with iOS7. CSS3 brings its lot of cool things too.

Also no coincidence is that Apple and Pixar grew very close together - a lot of OSX's charm comes from subtle and delightful animation (genie effect, apps bouncing on the dock, etc.) that Windows didn't even try doing until Vista. Relevant article: http://watchingapple.com/2007/06/are-apple-ui-designers-lear...

I've been maintaining a blog where I document animations that I find particularly interesting: http://www.ui-animations.com (no throbber/loading spinners, those are very rarely interesting from an animation standpoint, even though they may be cute from a graphic design point of view).

For the more academic minded of us, I like this CHI 1995 paper: http://dl.acm.org/citation.cfm?id=974941&coll=DL&dl=GUIDE (ACM paywall, but Google Scholar is your friend. Also, you should get an ACM membership- it's really worth it and will make you a better computing professional)

applecore• 12 years ago

Can you recommend any high-level libraries to incorporate motion into web UIs? It's annoying to work directly with CSS3 animations.

malandrew6• 12 years ago

Didn't see your comment until after I commented. See my sibling comment.

puppetmaster34• 12 years ago

#1 by far: GSAP! Lots if not most award winning stuff w/ them, ex, spend a few minutes on http://intothearctic.gp

It makes famo.us look like the 80s.

mike_h• 12 years ago

I agree, and it does seem like these ideas are catching on. The frameworks you mention, and also a big push by Facebook on iOS in the past year are notable examples. The FB "pop" framework was just made public (I think) this week: https://github.com/facebook/pop

Also their quartz composer prototyping framework: http://facebook.github.io/origami/

Awesome collection at your tumblr!

malandrew6• 12 years ago

Totally, it's funny how this was posted today because I tweeted the wikipedia article for the 12 principles[0] today to someone. I was telling him about using "anticipation" and "follow-through" to make the a mapping animation from one point on a map to another like on Google Earth. The anticipation not only gets people ready to zoom out (blast off), but it buys a little more time while map tiles load at the destination, without making people think the animation is too slow.

At http://famo.us/ we're huge believers in the use of the 12 principles in not only making interfaces delightful but also provide usability affordances. If anyone is a front-end webapp engineer, you should check out what we've built because it makes these kinds of interactions easy.

Plugg.me is one of the best examples built so far (we've only been public a few weeks). It should be released shortly. Here's a demo video of the app:

https://www.youtube.com/watch?v=QXeFl093_FI

Here's our github repo:

https://github.com/famous/famous

Besides your site, ui-animations, there is also http://capptivate.co/

[0] http://en.wikipedia.org/wiki/12_basic_principles_of_animatio...

mkagenius• 12 years ago

You are not alone there, today morning I read first 100 pages from the book The animators' survival kit. Good book and a lot of references to initial Disney and other big company artists. In the first 100 pages, I can relate to couple of principles mentioned in the post.

JoeAltmaier• 12 years ago

I guess that stuff appeals to some, and used subtly it can be an aid to understanding transitions.

But when it gets cutesy, what was helpful becomes repellent. Famous examples abound - clippy, the stupid dog, cursor animations.

I for one deny the 'charm' of OSX. It is repellent to me. Yet others love it. So use 'charm' with care, because you're dividing your customers into those who adore you, and those who wouldn't buy your stuff if it was on sale at Goodwill.

taigeair• 12 years ago

Very neat. Not really sure how to appy this though.

qwerty_asdf• 12 years ago

Do you need to present a series of images in rapid sequence, to the user, in a seamless manner, evocative of a particular concept?

1stexp• 12 years ago

There is a video that goes along with this:

http://www.centolodigiani.com/117722/3078861/work/the-illusi...

aspidistra• 12 years ago

For great examples of these principles in videogames, see World of Illusion Starring Mickey Mouse and Donald Duck (1992)

http://en.wikipedia.org/wiki/World_of_Illusion_Starring_Mick...

and Disney's Aladdin (1993)

http://en.wikipedia.org/wiki/Disney%27s_Aladdin_(video_game)

Tloewald2• 12 years ago

There are two editions of the book which is a masterpiece (the longer edition is intended for serious animators). If you have any interest in animation you owe it to yourself to grab a copy.

I don't think that two of the principles are dealt with well in the animations — staging and pose-to-pose. The morphs are too subtle to really illustrate the principle well. (The elegance of animating a cube for each principle is fantastic.)

ulisesrmzroche• 12 years ago

Hey, nice. This was one my favorite books in film school! Also, 'In The Blink of An Eye' by Walter Murch.

timdiggerm• 12 years ago

The fake film-dirt noise is really silly.

The Illusion of Life: Disney's principles of animation

Related Stories