With the arrival of CSS transitions, animation is now completely at home on web pages. In animation we need to refer to the properties of momentum, and central to this are the principles of “ease in” and “ease-out”.

Consider a regular mechanical motion, like the movement of a minute hand on a clock, or an automatic metal stamping machine. After one minute passes, the hand on the clock will tick forward suddenly, and the metal stamp will crash down on a plate. If we took this motion and graphed it, with time on the horizontal axis and distance on the vertical, the motion would look something like this:

Note that the units of time and distance are arbitrary: we could be talking about seconds or hours, millimetres or kilometres. What is important is that the graph shows that the object is under constant linear motion. It starts suddenly, remains at a constant speed, and stops just as abruptly.

Movement like this has only been seen since the Industrial Revolution: even now, we tend to consider this kind of motion soulless, mechanical, and jarring. In every other human experience of movement – the swinging of a pendulum, the tossing of a ball, trees bending in the wind – we see a very different kind of movement:

The curve you can see at the start of the graph – plotting the movement of the golfer's club as he begins to swing it, for example – is called “ease-in”. The curve at the end, representing the motion as the object comes to rest (the golf club coming to a stop after the ball flies away) is known as “ease out”. We see this movement as organic, fluid, friendly and natural.

It should be noted that this kind of movement is also true of many mechanical devices. A car does not start at 100kph, and it does not stop on a dime (unless it crashes headfirst into a wall). Rather, it accelerates from a standing start, reaches a certain speed, and then slows down as the brakes are applied. Ease-in and ease-out are still in effect.

Sometimes the ease-in or ease-out portion of a movement may be so fast it is imperceptible to human beings: for example, a golf ball driven from the tee moves too fast to have appreciable “ease-in”, but it definitely has ease-out when it hits the ground and rolls across the green before coming to a rest. If we were to graph that kind of motion, it would look something like this:

The red line on the graphs is known as a “Bezier curve”, and it is used in many programs, both as a mechanism for drawing (for example, in Adobe Flash and Illustrator) and as a means of characterizing movement over time (Autodesk 3DSMax, along with most other applications that have an animation component). What is important is not the means of portraying the concept but the idea itself. By manipulating ease-in and ease-out you can create the impression that an object is slow, heavy and lumbering, or spritely, agile and quick, smooth and fluid or hard and mechanical… and this movement imparts an association in every presentation you make.

Photograph by Kylie Jaxxon, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.