6 ms·

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

by GuiA 13y 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-learning-from-pixar/ 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 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 13y ago
Can you recommend any high-level libraries to incorporate motion into web UIs? It's annoying to work directly with CSS3 animations.
- malandrew 13y ago
  Didn't see your comment until after I commented. See my sibling comment.
- puppetmaster3 13y ago
  #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 13y ago
    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 13y ago
      (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.
mike_h 13y 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 https://github.com/facebook/pop Also their quartz composer prototyping framework: http://facebook.github.io/origami/ http://facebook.github.io/origami/ Awesome collection at your tumblr!
malandrew 13y 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/ 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 https://www.youtube.com/watch?v=QXeFl093_FI Here's our github repo: https://github.com/famous/famous https://github.com/famous/famous Besides your site, ui-animations, there is also http://capptivate.co/ http://capptivate.co/ [0] http://en.wikipedia.org/wiki/12_basic_principles_of_animation http://en.wikipedia.org/wiki/12_basic_principles_of_animatio...
- mkagenius 13y 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.
  - malandrew 13y ago
    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 http://en.wikipedia.org/wiki/Birthday_problem
JoeAltmaier 13y 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.

by GuiA 13y ago

applecore 13y ago

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

malandrew 13y ago
Didn't see your comment until after I commented. See my sibling comment.
puppetmaster3 13y ago
#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 13y ago
  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 13y ago
    (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.

mike_h 13y 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 https://github.com/facebook/pop Also their quartz composer prototyping framework: http://facebook.github.io/origami/ http://facebook.github.io/origami/ Awesome collection at your tumblr!

malandrew 13y 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/ 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 https://www.youtube.com/watch?v=QXeFl093_FI Here's our github repo: https://github.com/famous/famous https://github.com/famous/famous Besides your site, ui-animations, there is also http://capptivate.co/ http://capptivate.co/ [0] http://en.wikipedia.org/wiki/12_basic_principles_of_animation http://en.wikipedia.org/wiki/12_basic_principles_of_animatio...

mkagenius 13y 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.
- malandrew 13y ago
  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 http://en.wikipedia.org/wiki/Birthday_problem

JoeAltmaier 13y 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.