Designing Motion

So how do these concept translate to code?

Once you’ve established tone and feel of your website, it’s time to start thinking about how to bring that motion to life.

Oh no, not the theatre again…

When starting to think more technically about how to choreograph it’s helpful to break motion down into a kinetic system:

These building blocks also happen to coinside with actual CSS properties of animation:

WHAT DO THESE THINGS MEAN??

Duration

The total span of time a transition / animation takes from start to finish. It sets the temporal footprint and perceived weight of the motion. In web design it’s often expressed in seconds or milliseconds (my personal preference).

Direction

Simply, the temporal flow or trajectory of the motion. Often indicated by forwards, backwards, or alternate.

Easing / Rate of Change

Often expressed as a mathmatical function that describes the speed and acceleration of the motion over the established duration. We’ll cover this more in the next section.

Delay / Stagger

A delay refers to the time between the start of one motion and the start of the next. A stagger is a series of delays usually applied to a collection of elements that are animated together.

Repetition

Does the motion play once, loop forever, or repeat a set number of times? How can repetition or the lack thereof, reinforce our storytelling?

Origin

When i think of origin, I’m reffering to the point in space and shape of the element at the start of the motion. Depending on an element’s origin, a powerful distance is created between two values.

I thought we were talking about ACTION? These all sould like TIME!

At it’s core, motion is movement/action through time. So it makes sense that we often think about it in context to a TIMELINE: a representation of the sequence of events from start to finish, often including keyframes or changes in state.