Are Apple UI designers learning from Pixar?
Squash and Stretch animation in Apple’s UI
Apple UI designers have learned how to grab your attention using a classic physical animation technique called squash and stretch. Think of a cartoon nose squishing exaggeratedly as it bumps into a wall, then going pop! as it pulls away—that’s squash and stretch. Animators have been using it for decades to give their drawn figures depth and weight. It’s entertaining, too.
iChat in Tiger already uses this technique to tell you someone’s saying hello. 
When an iChat invitation pops! open to tell you someone wants to talk, the window starts small, zooms quickly to larger than full-size, then snaps! back to its proper size. That final snap! is squash and stretch in action, and passes so quickly you usually don’t notice. The effect of zooming out like that, then back in, is rather like someone leaning towards you, their face growing exaggeratedly in size, then shrinking again as they lean back and away.
That’s how Apple’s use of the technique grabs your attention: it looks like it’s coming towards you.
Squash and stretch in Leopard
Squash and stretch animation appears throughout Leopard. Mail automatically outlines dates, addresses, and phone numbers it detects in your mail and displays a little popup menu with commands to operate on them. Choosing Add to existing contact or Create new iCal event opens up a miniature edit window with an exaggerated zoom like iChat’s.
Same for Mail’s To Do options: click the little arrow button next to a To Do item, and the options window zooms out with squash and stretch.
And it looks as though Leopard’s new Stacks feature exaggerates its fan-out slightly.
Squash and stretch in iPhone
In Google Maps on iPhone, little push pins fall from the sky to land on the map. When they land, they dip a little, then bounce back up to their full height. And when the site marker appears (”Pacific Catch”), it too pops! open beyond full-size, then settles back a bit. Both of these use squash and stretch to exaggerate motion, and both are effective and fun.
You get the feeling that Core Animation might really be opening up new possibilities for designers. Just as the Log In window uses elegant animation to refuse usernames and passwords you’ve mistyped, Core Animation may be opening up a new toolbox of possibilities for Apple’s UI designers, giving them more sophisticated and creative options for solving problems. And it’s wonderful that animation adds fun and liveliness to the designs, too.
Wait until we see what third-party developers dream up. If they can come up with something like CoverFlow without Core Animation, imagine what will be possible with it.
This is also found in the new Safari 3.0 beta. When doing a text search on a page, all instances of the search term are highlighted on the screen and the first instance gets an orange box around it. The orange box expands to a size larger than the text, then quickly shrinks back to be just large enough to contain the text.
Excellent observation!
“Squash and stretch” wasn’t invented by Pixar. If you get a copy of Disney’s “The Illusion of Life” (it comes in two versions, one intended for casual readers, the other for prospective animators) squash and stretch is shown as one of Disney’s fundamental animation concepts, dating from very early in Disney’s history (not the very first Mickey Mouse cartoons, but certainly Snow White).
Pixar was built around John Lasseter, a former Disney animator.
You may credit Pixar, but this type of animation has been around since the days of Tex Avery and any Warner Bros. cartoon.
I would say Pixar learned from the golden age of cartoons (Bugs and other luney tunes). The medium has changed but
old site gags are “reborn” in current animation studios as well as animated icons. Old is new.
If you want animation, look no further than Beryl.
Beryl is animation on steroids. I find it a little bit “too much”…
Practically every flash site on the web has been doing this since the nineties. It’s a cute effect and it’s nice to see it migrating from animation to flash to OS, but I’s expect a little something more from Apple’s great designers
The neat effects you get with Beryl and Compiz are neat looking, but less than functional. A spinning cube with the matrix stretched and playing over 3 of the faces while rain looks like it’s comming down is nice, but seems to be cool for cool’s sake. Apple OS animations, make alot more consistant sense in the context of the OS. Most of them serve as either prodution enhancing tools (exposé) or visual cues to assist in ease of use of the OS. Beryls best features seem to be shoplifted from os x.
Very interesting I didn’t notice that. Does look cool though.
I agree there elements are a great thing as they hold a strong entertainment value. Aside from that they also lead the user’s eyes in the right direction and overall the experience helps them to retain and understand the information better (even if they don’t realize it). I wouldn’t say they are learning from Pixar. Pixar is an awesome company with powerful ideas and product but a good designer with the time and resources is all you need to spur these ideas.
Good article though!
Beryl’s got nice animation, but I am yet to actually find it useful, and it gets annoying after a while
… Well, Pixar wasn’t the first to use this, look back at Frank Thomas and Ollie Thompson. They were two of the original 9 old men. The men who revolutionized 2D animation. They invented Squash and Stretch along with the other 11 principles of animation.
I was about to say the same thing. In beryl, when you zoom in and out of your desktop, it always zooms a little too far, then snaps back
Why specifically Pixar??? They’re using traditional animation techniques yet this is attributed to Pixar.
I use Beryl and it is awesome. Highly customizable and with the right theme just beautiful to look at. The desktop has become a lot livelier and the visual feedback makes it easier to understand what is happening on your desktop.
Dorian: it’s not the *possibility* of animation, it’s the *use* of animation. Beryl’s defaults make me seasick at times.
@Dorian
Beryl is a compositing window manager not a “widget” set that can be taken advantage of by other applications. Core Animation is a huge step forward in terms of having a fluid and usable interface.
I love the new search in Safari 3 - I wrote a blog article about it which can be read here: http://blog.frater.com/apple/awsome-search-in-safari-3-beta/ if you like
Hmm, nice. I think these effects are also used a lot on the Wii too, are they not?
Anyway, I think its definitely in fashion. It does give nice feedback to the user. A bit more natural and friendly compared to having things appear instantly, or come to a sudden stop in your face.
Interesting take on things. I noticed that as the little push pins fall from the sky on the iPhone ad, the two initial drop shadows overshoot their mark.
Yeah. Right. Beryl. It’s awful and unstable. A total joke.
Yes it’s a great technique, but are they being taught by Pixar?? Maybe, but I doubt it. It’s a simple animation/design technique that most designers are taught in design school, I know I was (and I didn’t go to an animation school).
Lets not forget about all of those Flash websites out there that have been using this ‘physics’ type of technique for years now.
The title of your article is catchy though, so nice work.
@ Dorian:
Yes Beryl can have all the bling that you like. But IT IS NOT USEFUL.
It is not how much effects you add to a UI, is how to correctly implement them, and this is where Apple excels.
Mac OSX has the foundation to do those Beryl Effects, but they are not useful.
Too much time watching the spinning cube, and less time to do what you ere really supposed to do. Then again, after a while the wow effects grow tired on people.
Yeah, Beryl is -very- nice and very fun. I doubt they learned it from Pixar.
In an article entitled “Are Apple UI designers learning from Pixar?”, Pixar is not mentioned one time. Instead, we are told that Apple is using “a classic physical animation technique” that has been used “for decades”. What does Pixar have to do with this?
Considering Jobs started Pixar, then sold it off… I would assume he still has ties to Pixar which would allow him to implement something like this.
Mike’s right. And thus is also the reason why you regularly see “adverts” for Pixar films quite often around Apple’s site.
this is a dreadfully bad article and you should be ashamed for publishing it, the fact that this story currently has over 430 diggs only reflects on the fact that people dont actually read the stories that they digg.
@beryl haters:
I’m guessing you guys have never used Beryl then, or that you used it for a few minutes and then dismissed it. First of all, I don’t know where the claim about it being unstable came from, but for a pre-1.0 release it’s actually pretty stable. It also runs great on old hardware and takes up a small amount of resources, which is a plus. But anyway, if you’re complaining about the “bling” in Beryl, you’re completely missing the point - the great thing about Beryl is how customizable it is, so you can turn off the bling if you want to. Now I know you guys are probably used to Macs, where Steve Jobs gets to decide how you use your computer, but once you get used to the customizability of things like Beryl, you’ll find you can be pretty productive in Linux, too. And I don’t care that customizability isn’t a word.
Actually, the effect - at least in the digital realm - is used to make 1’s and 0’s feel more organic. In real life, things hardly ever move and stop with perfect precision. They’re acted upon by several forces of the physical world. Concepts such as squash/stretch and easing are used to mimic forces like gravity, friction and acceleration and deceleration, and in the case of squash/stretch - the concept of inertia.
“Squash and stretch” was very very big in the first ever Disney animation. The First One….
Terrible article. Exactly what does this have to do with Pixar? You simply describe a common animation technique a few times. Hope you’re not having to write any college term papers.
They’re learning from classic animation techniques, same as Pixar did.
Jenny
‘Watching Apple’ is perceptive in noting the stylistic influences of Pixar on Apple. But there are some deeper similarities. The Quartz layer in Mac OS X has a lot in common with Pixar’s RenderMan, notably in their use of alpha-channel compositing. The ancestor of Mac OS X - NextStep - supported RenderMan directly in the window server. Since Steve Jobs owned both Pixar and NeXT, it’s not surprising that some synergy exists between both companies in their technical methods.
As for Beryl - In some ways, it is a shameless ripoff of the visual effects in Mac OS X, and it is probably infringing on Apple’s patents. If any of the major Linux distros deploy Beryl as the standard user interface, I wouldn’t be surprised if Apple sued them. Some of Beryl’s other effects, like the spinning cube, are absurd and tasteless as everyday user interface features.
you guys are freaking out a little bit over the pixar comparison. let me give you a hand. the author is not implying that pixar invented this technique. in the beginning he references cartoons in general. the title is just saying that apple is learning from pixar (an animation company who uses this technique) because they are so close to them.
it’s like saying “i learned to sing from jennifer”. does that imply that jennifer invented singing? well, it could, if you’re a moron. so, calm down. he’s not implying that pixar inveted it. we’ve all seen a bugs bunny cartoon. we get it.
Have people who uses Digg complete gone mad? If someone sees an intern at Apple sneezes he will get dugg.
Animation is “punching up” and pushing what already exists in the real world. When you create something artificial like say a window opening, doing so from a strict interface redraw or mathmatical formulation yields a sterile result. Just like moving something around isn’t “Animation” Really Animation is about giving things a grace and elegance that computers can’t do by themselves. Understanding that goal of elegance in technology and how it relates to us as humans is understood by both companies, something I have no doubt Steve Jobs keeps both companies on track to produce.
This isn’t exclusive to Pixar, or cartoon animation. Flash designers have been doing stuff like this for years. It’s sad that software UI designers have only recently started utilizing techniques like this.
Nowhere did anyone claim Pixar invented this stuff. Apple has been getting interface ideas from the animation world, and Pixar has a close relationship with Apple, so it’s reasonable to suppose that that cross-connection is meaningful.
[...] Are Apple UI designers learning from Pixar? [...]
You know it’s ironic that you’re running an Apple site but your sidebar CSS doesn’t display properly in Safari.
[...] Watching Apple: Are Apple UI designers learning from Pixar? Not necessarily learning from Pixar, maybe just learning in general. (tags: animation apple coreanimation ui hci pixar watchingapple) [...]
Wow that makes me wanting to see the pins dropping on the iphone.
[...] But, are Apple UI Designers learning from Pixar? [...]
Another note, the CSS doesn’t display well in other browsers ether. It’s funny that the apple community, who hides ineptitude behind style (taking after apple itself of course), cant even get simple STYLE SHEET code right.
@ian: it doesn’t work in Opera either :/ lame
[...] techniques. NASA makes use of Pixar’s technology, and some even speculate that their ideas are used by Apple and others for user [...]