UI Animation—How to Apply Disney’s 12 Principles of Animation to UI Design

UI Animation is an important ability in a designer’s toolkit. You can utilize UI animation results to minimize cognitive load, in addition to including character and appeal to a user interface. More significantly, animation will assist you get rid of language and culture barriers in interaction style

Nevertheless, if done badly, animation can appear disruptive and even nauseating! So, how can we guarantee we utilize animation efficiently? Who much better to gain from than Disney, the leaders of computer system animation.

As a UI designer, you require to master the concepts of animation to produce experiences that feel familiar, user-friendly and genuine The trick to effective animations, for that reason, is to produce feelings.

Probably, nobody understands this much better than Disney.

The “attempt not to smile” video collection by Disney.

What are Disney’s 12 Concepts of Animation?

What appears genuine to the mind can be as essential as any product reality. We live by the spirit and the creativity in addition to by our senses. Cartoon animation can offer dream the very same truth as those things we can touch and see and hear.

— Walt Disney

Disney animators Ollie Johnston and Frank Thomas established the 12 Concepts of Animation to produce more reasonable animations. They released them in 1981 in the book, The Impression of Life: Disney Animation which is frequently described as the “Bible of Animation.”

Disney Animation: The Impression of Life is a book by Frank Thomas and Ollie Johnston.

Those 12 concepts integrate the basic laws of physics– that all animations require to follow to be credible– with cognitive psychology concepts, planned to produce feeling.

So, how can you use Disney’s result in take your UI animation style abilities to the next level?

1. Squash and Stretch

The squash and stretch concept is vital to producing animations with the impression of gravity, weight, mass and versatility. A bouncing ball frequently exhibits this concept; the ball extends when it takes a trip up and down and crushes when it strikes the ground. Just how much it extends and crushes depends upon the product that the ball is expected to be made from. The result will be really noticable if the ball is made from rubber, whereas if it’s imitating a bowling ball, the result will be really subtle.

Illustration of a button that squashes and streches on click.

In digital user interfaces, the squash and stretch concept makes aspects feel tactile and offers visual hints or feedback concerning offered affordances For instance, if you ‘d like your users to effectuate a purchase, you can utilize the squash and stretch concept to stimulate the pay button to draw the users’ attention and attract them to “push” the button.

When utilizing squash and stretch, keeping the things’s volume constant is necessary. So, when you extend something, it requires to get thinner, and when you squash something, it requires to get larger.

2. Anticipation

Anticipation assists to prepare the audience for what will take place, and it’s crucial to making any movement feel genuine Can you inform somebody will leap right prior to they do it? Most of the times, yes, due to the fact that they’re flexing their knees and moving their arms in a specific method. The very same phenomenon occurs with a lot of movements. There are numerous anticipatory motions that our brain procedures at a subconscious level.

Hover animation, when hovering UI element moves to the left.

In digital user interfaces, you can utilize the anticipation concept to notify the user about what will take place if they carry out a specific action. Among the primary applications of this concept is hover animations: if users hover over a button, it transfers to reveal the users that it can be clicked to carry out an action.

3. Staging

The staging concept describes using movement to direct the audience’s eye and accentuate what is necessary within the scene.

Animation of a music UI where the motion makes the user focus on the play button.

Envision you were developing a user interface with great deals of animations. It would most likely puzzle the user because all the aspects are completing for attention. Usage animation to reveal your user where to focus within the user interface and keep the movement of whatever else (that’s not as essential) to a minimum.

4. Straight Ahead Action and Position to Position

This concept describes 2 various techniques to the procedure of producing an animation. Straight ahead animation is developed, drawing frame-by-frame from start to complete.

The pose-to-pose method includes producing the crucial frame initially– a frame, in the start, middle and end. Then, when it comes to computer system animation, the animation software application finishes the rest instantly for you.

Two mobile screens side by side, one where a sun transforms into a moon step by step and the other one where the transformation is sudden.

In UI style, you will more than likely usage the pose-to-pose technique– for example, to produce part states– other than if you’re aiming to stimulate something uncommon.

5. Follow Through and Overlapping Action

This concept shows the reality that not all parts of an item relocation at the very same time. For example, take a look at yourself in the mirror and shake your head. You’ll see your hair motion is a bit postponed to the motion of your head, and your eyes may move in a different way (an overlapping action). This phenomenon is crucial when things come to a dead stop after remaining in movement. In the very same example, your hair will most likely still remain in movement somewhat after you have actually stopped moving your head (follow through).

Mobile screen where the movement of the titles and descriptions follow the movements of the images with a small delay.

In UI animation style, you can have aspects that relate to each other, however that might move at various rates For instance, you might have an image, a title and a description. The initiator of the motion will be the most essential component, in this case, the image. Then the title and description follow. This concept assists you develop a hierarchy in a user interface.

6. Slow In and Slow Out

The very best method to comprehend this concept is to picture how a cars and truck begins and stops. Any car begins moving gradually prior to speeding up and accelerating, and the reverse takes place when the vehicle brakes. Include more frames at the start and end of a movement series to attain this result.

Two mobile screens side by side with a scrolling effect with and without an easing effect.

This concept is essential to make any movement in your style feel natural and genuine. Without relieving in and out, your animations will feel robotic.

7. Arc

In the real world, a lot of things move following a small arc. Think about how you stroll or the movement of a ball you toss into the air.

Animation of files travelling through an arc path to the recycle bin when deleted.

In UI animation style, you can breathe life into your animations by utilizing arcs as animation courses rather of straight lines. A terrific example of this concept is the Mac’s dock bar hover animation, that makes navigation through the various apps anchored in the dock user-friendly and enjoyable.

8. Secondary Action

Secondary actions are utilized to support or stress the primary action going on within a scene. The addition of secondary actions includes another measurement to your animations.

Animation of a submit button that when clicked generates confetti to congratulate the user.

In UI style, you can utilize secondary actions to generate feelings in your users. Envision your user has actually sent a long type. You can stimulate the send button to have a secondary celebratory animation (for example, confetti) to praise your user for finishing a lengthy job.

9. Timing

How rapidly or gradually an item moves offers us a great deal of details. If we saw a snail moving quick, we would be puzzled and perhaps believe we have actually found a brand-new types!

Two screens side by side, one shows a file being uploaded fast and the other one shows a larger file that is uploaded more slowsly.

In UI style, you can utilize timing to notify your users. For example, you can connect the speed of a file filling animation to how huge the file is. This will offer your user a sense of for how long the procedure will take and why– so the upload will be slower if you’re submitting a huge file, and much quicker if it’s a little file.

10. Exaggeration

This concept offers the animations an enjoyable character and assists the audience concentrate on what is necessary.

Animation of a button that when clicked fills the whole screen.

In UI animation style, you can overemphasize particular aspects to make it clear to users how they are expected to connect with the user interface. In addition, exaggeration constantly includes an amusing element to the style. Just how much you can overemphasize a component will depend upon the function of the item and its general feel and look.

A excellent animation result will be unnoticeable to the audience Nevertheless, if you overemphasize excessive, it might frustrate users. If that takes place, think about making the animation more subtle.

11. Strong illustration

Comprehending the fundamentals of illustration– or when it comes to UI, the concepts of visual style– will assist you develop more effective animations in general.

Two screens side by side, one shows a UI with inconsistent buttons, and the other one shows a constistent button design.

Envision you develop a button with a shadow, and the shadow does not follow a correct point of view. The user would right away believe that there was something incorrect with the app.

This phenomenon is a lot more obvious in skeuomorphic style, where aspects mimic their real-world equivalents.

While you can press the limitations here, it’s vital to stay constant, and any distortion in your style requires to be warranted and feel deliberate to the user.

12. Appeal

Animations require to interest the audience. There is no mathematical formula to get this right, however any animation ought to activate the audience’s attention and produce a pull. Research study and screening are essential elements of getting the appeal of your animations perfect.

UI with an animated cute cat to create appeal for the user.

In UI style, the appeal is crucial to stick out There are numerous items that might take on yours. You can for that reason utilize animation to specify your item’s character and produce a psychological connection with the user.

Some digital items like Mailchimp produce real animated characters to include character and visual interest their user interfaces which can produce a much deeper connection with the user.

The Eliminate

UI animation is an important part of UI style. Fantastic animation has the power to bring your digital user interfaces to life, assist your items stick out and construct a more user-friendly and fascinating experience for your users.

Nevertheless, getting it incorrect, and producing an animation for the sake of animation will lead to a bad interface.

So, as a UI designer, usage Disney’s 12 concepts of animation as a structure to produce significant animations that engage your users and improve your item’s success.

Where To Get More Information

Check out the book The Impression of Life: Disney Animation by Frank Thomas and Ollie Johnston to find out more about Disney’s 12 concepts of animation.

Watch Michal Malewicz’s Master Class Beyond User Interfaces: The UI Style Abilities You Required to Know to find out more about how to develop terrific interface.

Discover more about visual style in the IxDF Visual Style: The Ultimate Guide course

Discover More about UI style and its patterns by checking out the Leading 10 UI Trends Every Designer Must Know piece.