Elements

Animation creates energy within an interface and lets the user know what’s happening before, during and after an action.

Direct and intentional

Thoughtfully applied animation should be straightforward, helping users as they interact.

An arrow pointing right, with animating triangles all moving to the right. An arrow pointing right, with animating triangles all moving to the right.

Rationale

Make sure your animations are backed by user needs.

Animation of a circular pin dropping onto a surface and then fading

Orientation

Animation provides users a sense of space and orients them in place.

Animation of a perpetual motion Newton's Cradle

Awareness

Animation prepares users for an action by giving them insight into what happens next.

Navigation

Animation offers a sense of direction and understanding for how to get around.

Animation of blocks shifting to the left

Storytelling

Animation that moves in sequences over time creates a narrative that gives users context for where they are and how they got there.

Animation of circles getting bigger and then smaller, indicating points pressed

Focus

Animation helps users prioritize what is important by guiding their attention and reducing peripheral distractions.

Animation of a two dimensional block becoming a three dimensional block and back again

Meaning

Animation assists users in making sense of information by reinforcing the significance of content through movement.

Animation of shapes smoothly shifting in to other shapes

Personality

Animation breathes a lively sense of character into the interface, creating an emotional connection that is not only seen, but felt by the user.

Animation of two shapes, with a circle on the left and on the right the shapes are shifting until an identical circle comes up, and then both circles turn green

Correlation

Animation shows relationships between information and help the user make a mental model of related content.

Style

For over one hundred years, IBM crafted business machines for professionals around the world. Today, our software animation demands the same attention to detail. Machine motion drives the speed and subtlety of our product experiences.

We take inspiration from our heritage to define our animation style. Machines have solid planes, rigid surfaces and sharp, exact movements that are acted upon by physical forces. They don’t go from full-stop to top speed instantly or come to an abrupt stop, but instead take time to accelerate and decelerate. They have an inherent mass and move at different speeds in order to accomplish the tasks they were designed for.

Agility

Design animations with graceful easing that has a rhyme and rhythm, giving movements a sprightly sense of alertness.

Efficiency

Design animations to move with maximum productivity and minimum wasted effort or expense.

Precision

Design animations to move in linear paths with accuracy and certainty, especially when an object used for inspiration is manmade.

Order

Design animations choreographed to work together. Highest priority elements animate first, followed by lower priority elements.

Drawer animation

Our side-to-side animations are influenced by the carriage of the IBM Executive electric typewriters. We extracted qualities like precision and accuracy from the machine. The carriage slings smoothly as it returns to the left margin, stopping exactly in the same place every time.

IBM 729 magnetic tape unit

The rhythmic oscillations of tape reels in motion got us thinking about a user’s waiting experience. If a user watches search results load, showing the machine at work relays a sense of efficiency. The swift and even balance of the spinning circles indicates that progress is being made.

IBM 2560 multi-function card machine

The sliding of the multi-function card machine is used as inspiration for the mobile drop down. As a punched card is fed from the hopper, it gracefully pushes out from the left side. Then, the card halts for a split second and slides out of sight, the way the drop down zips back up into place.

Movements

From the powerful strike of a printing arm to the smooth slide of a typewriter carriage, each machine movement serves a purpose and every function responded to a need.

Animation of two horizontal squares merging together at the center, then merged with another rectangle moving from the bottom to create a larger square.

Attract

Move with the pull of a magnet. Attraction draws elements together. It can be used to snap pieces in place or show relationships.

Animation of a larger square breaking into 4 smaller squares moving diagonally, to then have those 4 squares break into 16 smaller squares in the same motion.

Repel

Imagine a set of elevator doors opening. Repulsion pushes elements away from one another or breaks a whole into parts.

Animation of 3 squares aligned horizontally, that rotate to the right with the far right square disappearing as a new square appears far left to create a feeling of unlimited squares.

Unlimited

In production, the precision of a conveyor belt is mesmerizing. Unlimited elements move with efficiency by continuously advancing in a linear sequence.

Animation of a circle appearing in the center by rotating to fill in its shape.

Limited

With the weight of a pendulum, limited elements start slow, speed up and slow again to reach an end point.

Animation of a circle appearing from the center point , growing into a larger circle to then disappear.

Advance

Like blowing up a balloon, expansion causes a swift scale shift. Draw users’ attention by bringing an element forward in space.

Animation of a circle shrinking from a larger circle, disappearing to its center point.

Recede

When elements recede, they reduce in size on all sides and appear to push back in space as they shrink.

Animation of a triangle at the bottom of the image rotating from the left, in which an arc of three circle outlines appears and rotates in simultaneously.

Wind

Like the numbers of a dialing rotary phone, winding elements push forward, then snap counterclockwise into place with speed.

Animation of a triangle at the bottom of the image rotating to the left, in which an arc of three circle outlines rotates out and disappears simultaneously.

Unwind

As your hand grabs the subway turnstile, unwinding elements pull back, swing clockwise and move out of the way.

Animation of a circle darting on-screen into the center from the right side.

Enter

Entering elements accelerate with full force, slightly overshoot and reset firmly in place.

Animation of a circe darting off-screen from the center to the right side.

Exit

Exiting elements tilt slightly back to get started and then propel forward.

Properties

Properties are essential elements of motion that can be called upon individually or in combination to create animations.

Position

When an object is placed on an axis, it informs the path on which it travels. Positioning can be influenced by forces such as resistance, thrust and gravity.

Scale

The relative size of an item can make an object appear closer or further away in space, signifying an object’s importance and drawing users’ attention.

Opacity

Using transparency in a moving object can create smoother transitions or make the layer where an object lives apparent.

Hierarchy

A motion hierarchy helps to create a path, or motion layout, of the information on the screen, allowing the eye to focus on what’s important.

Give users control

Consider the wide range of mental and physical abilities of your users. For animations that are longer than five seconds, we must provide the ability to pause, stop, or hide animations for users who can be severely distracted, particularly those with attention deficit disorders. If the animation has audio longer than three seconds, provide audio control for users that have screen reading software, as it will make it easier for them to understand their screen reader.

Don’t be flashy

Do not include anything that flashes, or can be considered a flash, more than two times in any one second for those prone to seizures.

Timing

Use timing and spacing to set the pace and personality for an animation.

A perfect union

Time and space are the atomic units of measurement for animation. Combining them in different ways gives an object character. Subtle changes in rates can shift an object’s personality from feeling frantic and anxious to eager and excited. Paying attention to these details can give an animation a comfortable feel.

Timing is crucial to convey the intent of the interface to your users. Use an appropriate speed that feels natural to the user when elements move, appear or disappear. Movement that is too fast causes confusion, and movement that is too slow irritates people. For example, scrolling through lists on a mobile device uses easing to make it appear as though the scroll movement is governed by inertia.

Design for the in-betweens

When moving an element from one point to the next, decide the length of time an action takes and how an element will travel in a given amount of space. Start by defining the “in-betweens,” the states that live between an action. In-betweens add the value of what happens between static wireframes. Each in-between has a hero shot, a still frame that captures the most dynamic pose in the action.

  • What elements are common between the screens?
  • How might the elements change over time?
  • Does an animation created to convey the change between elements add value to the user interaction?

Delays

Delays are the period of time which an animation is postponed and there is no movement. They are important when creating the hierarchy for a transition. Delays should be consistent across similar content types.

Ease in

Ease in has more space at the beginning and less at the end, with the object starting slow and then gaining momentum. Ease in is a way to create a graceful acceleration and can be combined with ease out to make a complementary deceleration.

Ease out

Ease out has less space at the beginning and more at the end, with the object accelerating fast and then losing momentum. This makes an object feel like it is pushing against a natural force like wind or gravity.

Easy ease

Easy eases have less space at the very beginning and end, with the object starting and ending with slightly faster movements. When looking for a subtle way to give an object a bit of life, slight eases feel more natural than abrupt starts and stops.

Linear spacing

Linear spacing is identical, with the action going the same speed from start to finish. Linear spacing makes an object feel consistent and even with attention to detail, but cold and mechanical if not carefully considered.

Variable spacing

Variable spacing is inconsistent, where the object moves at different speeds across the action. Variance can make an object feel organic or erratic.

Back to top