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.
For over one hundred years,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.
Design animations with graceful easing that has a rhyme and rhythm, giving movements a sprightly sense of alertness.
Design animations to move with maximum productivity and minimum wasted effort or expense.
Design animations to move in linear paths with accuracy and certainty, especially when an object used for inspiration is manmade.
Design animations choreographed to work together. Highest priority elements animate first, followed by lower priority elements.
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.
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.
Properties are essential elements of motion that can be called upon individually or in combination to create animations.