
The Illusion of Life: Disney's principles of animation - mike_h
http://the12principles.tumblr.com/
======
GuiA
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...](http://watchingapple.com/2007/06/are-apple-ui-designers-learning-
from-pixar/)

I've been maintaining a blog where I document animations that I find
particularly interesting: [http://www.ui-animations.com](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](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
Can you recommend any high-level libraries to incorporate motion into web UIs?
It's annoying to work directly with CSS3 animations.

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

It makes famo.us look like the 80s.

~~~
malandrew
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?

~~~
puppetmaster3
(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](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](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.

~~~
malandrew

        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](https://github.com/greensock/GreenSock-JS)

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

~~~
puppetmaster3
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...](http://kurst.co.uk/samples/awayts/tests/?test=js/Intermediate_PerelithKnight.js)
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](http://www.crunchbase.com/organization/famo-us) ). The investors made a
mistake, it happens.

~~~
malandrew

        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](https://twitter.com/pmarca/status/462476067463102465)

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

------
pdenya
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...](http://en.wikipedia.org/wiki/12_basic_principles_of_animation)

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

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

------
braveheart1723
This is the greatest resource on animation I've found

By Richard Williams

[http://www.theanimatorssurvivalkit.com/](http://www.theanimatorssurvivalkit.com/)

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

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

~~~
braveheart1723
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...](https://www.youtube.com/watch?v=nbtbbdA4kUM&list=PL1A1FEDA47ADC18D4)

also the book is also amazing

[http://www.amazon.com/The-Animators-Survival-Kit-
Principles/...](http://www.amazon.com/The-Animators-Survival-Kit-
Principles/dp/086547897X/ref=sr_1_1?ie=UTF8&qid=1399122684&sr=8-1&keywords=animator+survival)

and only $30

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

------
aspidistra
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...](http://en.wikipedia.org/wiki/World_of_Illusion_Starring_Mickey_Mouse_and_Donald_Duck)

and Disney's Aladdin (1993)

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

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

------
1stexp
There is a video that goes along with this:

[http://www.centolodigiani.com/117722/3078861/work/the-
illusi...](http://www.centolodigiani.com/117722/3078861/work/the-illusion-of-
life)

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

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

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

------
timdiggerm
The fake film-dirt noise is really silly.

