The Illusion of Life: Disney's principles of animation(the12principles.tumblr.com)

144 pointsby mike_h12 yıl önce31 comments

the12principles.tumblr.com

The Illusion of Life: Disney's principles of animation

http://the12principles.tumblr.com/

12 comments

GuiA12 yıl önce

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)

JoeAltmaier12 yıl önce

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.

applecore12 yıl önce

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

puppetmaster312 yıl önce

#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.

malandrew12 yıl önce

There's nothing inherently special about Into The Arctic that isn't easy to accomplish in both famo.us and GSAP, so I can only conclude that you haven't really used famo.us (which would be understandable since it's only been available publicly for 3 weeks now).

The reason I find the tone of your post interesting is because we just hired someone two weeks ago who has been using GSAP professionally and sees much more promise in what we're doing. Personally I haven't used GSAP enough to render an opinion, so I use his decisions as proxy until I can give GSAP the attention it deserves.

Furthermore, no regular HNer who values the high quality of discourse on this site would say something like "It makes famo.us look like the 80s." That's kindergarten playground smack talking. So, given the tone of your post, do you have any conflicts of interest or biases you should be disclosing to the HN community? Mine are obvious. I work at famo.us.

total karma 80, average karma per post 0.39. That helps be better consider the value of your contribution, but I'll give you the benefit of the doubt. Besides any conflicts of interest, how long have you been using GSAP and how long have you been using famo.us?

puppetmaster312 yıl önce

(Rather than your personal attack or your self importance, lets focus on the discussion instead of redirection, m'k.)

Let me underline a stark fact: GSAP can and is used by designers. Famo.us is used by programmers, so it is not a fair fight, designers writer nicer and more creative UI, end of story. Look at Swing apps, they lost out to Web due to programer UI.

Famo.us took too long to develop and the window is now closed shut, that is my prediction. That is the footnote to famo.us investors, too long, too many pivots. Ads are being done in GSAP, google IO (http://www.google.com/events/io ) is GSAP, etc. due to works with existing flow. It's true that something done in GSAP by designer quickly, could be re-done in Famo.us by a programmer later, but it won't be. And games won't be done in Famou.us either, it does not work w/ models, or modelers, but a game engine like http://typescript.away3d.com does.

Famo.us is interesting and fun tech experiment, but it will be the market development (lean) that decides, not me. Famo.us are behind in the market and way slow development velocity to pivot again.

I am a techie and root for such, but famo.us is an example that makes techies look bad, a solution w/o a problem, as just chasing a tech w/o market. I did start out liking famo.us when it first came up, but moved on after the long delays. There are positive examples of techies aligned with a market, that is what we need.

Anyway, I just made a prediction of your market, lets it in 2 more years.

malandrew12 yıl önce

    Famo.us took too long to develop and the window is now 
    closed shut, that is my prediction.

    Famo.us is interesting and fun tech experiment, but it 
    will be the market development (lean) that decides, not 
    me. Famo.us are behind in the market and way slow 
    development velocity to pivot again.

I'm not going to make a prediction myself, since I have a dog in this fight, but you're just spreading FUD and Github can back me up on this. As of today, Sunday May, 4, 2014, GSAP JS libs [0] have 1265 stars and 226 forks, 1 open issue and 35 closed issues. The famous github repo [1], which has been publicly available for 3-4 weeks has 3229 stars, 404 forks, 38 open issues and 119 closed issues (main repo and submodules combined). That's hardly a textbook case of "window [of opportunity] is now closed shut". In fact, in light of this new evidence, you may want to re-evaluate if you are on the right side of the decision being made by the market. Being first doesn't matter. Google wasn't the first search engine, nor was Facebook the first social network. In fact the market is littered with the bodies of first movers.

    And games won't be done in Famou.us either, it does not 
    work w/ models, or modelers, but a game engine like 
    http://typescript.away3d.com does.

FWIW, One of the main creators of [redacted quantity] top 40 highest grossing video games of all times is exploring famous for his next game.

Again, one of my questions still stands, have you even used famo.us? Yes or no?

Also, what do java swing apps have to do with famous and GSAP?

[0] https://github.com/greensock/GreenSock-JS

[1] https://github.com/famous/famous

puppetmaster312 yıl önce

I'll wish you good luck. Please post websites, webapps or games built w/ famo.us when they are. The personal thing of yours, you must work for GSAP and now something else, is not a good approach to evangelize your brand. I gave you specific example where you'll fail: no workflow for designers or modelers. Famo.us was early as it relates to your example, but chose not to release. What year were your first showing those cool videos? Famo.us chose not to do customer development apparently. How do I import a model? ex: http://kurst.co.uk/samples/awayts/tests/?test=js/Intermediat... Most if not all WbGL work w/ Maya, Blender, etc. One game may be written in famo.us? m'k. A few of classic mistakes.

Please be open to learn the lesson of a solution looking for a problem w/ $5M ( http://www.crunchbase.com/organization/famo-us ). The investors made a mistake, it happens.

malandrew12 yıl önce

    The personal thing of yours, you must work for GSAP and 
    now something else, is not a good approach to evangelize 
    your brand.

I normally calmly address negative points people point out (there are some and they are being addressed), but that's not how you began the conversation at all. Instead you began with the comment "It makes famo.us look like the 80s." and no further content backing up that claim. When I challenged on your initial claim, I did so because I knew it could only be rooted in ignorance (i.e. never actually used famo.us) since the people I know who have spent time with both don't hold such beliefs.

My other comments on this thread were there to evangelize a tech product that I work on because it has merit. My comments to you are rooted in no such thing. Instead they are rooted in responding to behavior that is not forthcoming of mature intelligent discussion on HN. I've been in this community for a long time and participate regularly. I care very deeply about it and hate it when people treat it like reddit and lower the quality of discourse. With that in mind, my replies were my own and were composed on behalf of Hacker News and not my employer. It's not different than when a wikipedian challenges an obviously bogus claim on the talk page or with a "citation needed" superscript.

If you want to judge the a piece of technology based on my comments, you are free to do so (despite being very poor methodology). If you don't use famous, because of those replies, that's unfortunate for us both. However, if next time you comment on HN on any topic and choose to give pause and give more thought and consideration to what you write instead of mindless fanboi-ism, I will have considered it a worthy sacrifice.

Regarding the criticisms of the workflow. You're 100% correct. We don't have a workflow for designers or modelers. It's simply not ready for consumption by audiences who can't code. FWIW, our plan is to build out towards those audiences layer by layer since doing so keeps our platform far more extensible and usable by many audiences. If you built out for designers on day one, it's very hard to really be able to then build out lower level foundational APIs. If you instead take a unix philosophy approach, you can build out layer by layer like an onion and each layer can be made of composable parts.

This means that we'll eventually have a layer that makes it very easy to build out the designer tools on top. Not only that, whichever developers (in the company or from the community) build out the layers for designers and modelers, will be working at a higher level of abstraction that affords them more flexibility and speed when creating need features and exploring different directions.

Apple only achieved what they did with UIKit for iOS and AppKit for OS X because they had a very robust base called FoundationKit, that is built on top of Darwin/BSD.

If you play the short game and satisfy higher level customers instead of building out the right code infrastructure, you are more likely to create a platform that is short-lived and can't stand the test of time. Also, by building out for developers first, you create a community that can magnify your capabilities and reach since your initial core community has the skills to contribute back to the commons. If you skip this group, then you are on the hook for the majority of improvements to your platform because someone needs to be a senior developer to understand the code base all the way down to the lower levels.

One day we may have something that works for Maya or Blender. That day isn't today, and people who cannot code and need a capability like importing a model, should definitely go with GSAP. If on the other hand they can code, then they may find famo.us to be the more interesting platform. There's no silver bullet. Given the number of forks, followers and activity in the community so far, we think we've made the right decision by going developer first.

It's not really possible to make the judgement of "a few classic mistakes" until you've made an effort to understand the end-game. For example, if GSAP wanted to build out a true platform, then building out to designers and modelers first, IMHO represents "a few classic mistakes", but that's not their product and not their market, so they've done a great job in reaching that market today. I wish we could serve that market today, but we've made a conscious decision to play the long game here.

We don't think we're a solution looking for a problem, and given the play that smart investors[0] are looking for, we're pretty well positioned [0].

[0] https://twitter.com/pmarca/status/462476067463102465

puppetmaster312 yıl önce

We are going in circles. You need to realize that just because someone disagrees with you does not mean that they are a bad community member. I'm not getting paid for essays or to PR. I predict your corp will fail, prove me wrong.

You agree that ad/agencies won't use it as it does not work for designers, game companies won't use it as it does not work with model pipeline. I repeat that should you guys fail, it makes other tech founders look bad to other investors, and that affects me. You should have done lean process.

malandrew12 yıl önce

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

mike_h12 yıl önce

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!

malandrew12 yıl önce

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...

mkagenius12 yıl önce

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.

malandrew12 yıl önce

Guess it's just a variant of the birthday problem[0] among a sample of the population known for intellectual curiosity without bounds.

[0] http://en.wikipedia.org/wiki/Birthday_problem

[deleted]12 yıl önce

ulisesrmzroche12 yıl önce

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

timdiggerm12 yıl önce

The fake film-dirt noise is really silly.

pdenya12 yıl önce

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...

huxley12 yıl önce

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.

GuiA12 yıl önce

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 ;)

braveheart172312 yıl önce

This is the greatest resource on animation I've found

By Richard Williams

http://www.theanimatorssurvivalkit.com/

Tloewald12 yıl önce

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 :-(

Kiro12 yıl önce

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

jacobolus12 yıl önce

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.

Htsthbjig12 yıl önce

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.

braveheart172312 yıl önce

Sorry, a friend got me the book and videos so had no idea how expensive they were... Guess I have just found out I have a good friend :)

here are some excerpts from the videos:

https://www.youtube.com/watch?v=nbtbbdA4kUM&list=PL1A1FEDA47...

also the book is also amazing

http://www.amazon.com/The-Animators-Survival-Kit-Principles/...

and only $30

if you need any excerpts or advice on this stuff, tweet me @jonathanmatthey happy to help :D

[deleted]12 yıl önce

taigeair12 yıl önce

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

qwerty_asdf12 yıl önce

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

1stexp12 yıl önce

There is a video that goes along with this:

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

aspidistra12 yıl önce

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)

Tloewald12 yıl önce

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.)