demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Essential Animation Concepts: Ease-In & Ease-Out

css / animation

Estimated reading time: 3 minutes

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”.

A graph of linear motionConsider 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:

A graph of showing ease in and out of an animated objectThe 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.

A graph of showing ease out onlySometimes 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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.