Fluid Motion
01
Morphing does mean that shapes can shift. Morphing does not get paired with a dramatic effect like flipping.
Renter Resume
▶
Renter Resume
▶
In Fluid Motion, we try to retain states for our viewer. This means that elements can be transformed from one state to another. If you have a button, for instance, that a user clicks to submit something, we can transform that element into a confirmation.

Morphing

02
Note how the button call to action becomes the title in the second state. We keep spatial awareness for the user and try not to break it.
$147k
$147k
context-house
▶
$147k
$147k
context-house
▶

One of the primary tenets of Fluid Motion is being sure to retain context for the viewer. Users are constantly scanning an interface in an event called saccade- we create spatial maps of where things are and how to find them. Fluid motion helps guide the user by keeping elements as consistent as possible during an interaction.

In recent years, employers have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website works the same way.

Changing the placement of elements in the UI completely upon interaction asks our users to readjust to an entirely new view. This lack of context is an anti-pattern: we’re not gracefully showing the user what changed and why.

The associations of space, time and placement helps an interaction seem more fluid and intuitive.

Context-Shifting

03
Entrances and Exits must be consistent. Entrances start from a 90% scale so as not to be too jarring for the user.
▶
▶

Fluid motion has standardized entrances and exits. Sometimes it’s difficult to have one element turn into another. In these cases, we will use a slight of hand. The element can come into view, and start at 90% scale while fully bringing up opacity, so that it subtly looks like it “grew” from the place that it came from.

We use common easings across all platforms for entrances and exits.

The cubic bezier for entrance is:
cubic-bezier(0.39, 0.575, 0.565, 1);

The cubic bezier for exit is:
cubic-bezier(0.47, 0, 0.745, 0.715);

Math.easeOutSine = function (t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
};
          
Math.easeInSine = function (t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
};

Entrances and Exits

04
Fluid Motion ensures that best practices for interaction and fluid movement are used. Touch events don't wait 300MS for secondary action.
% % % % % %
▶
% % % % % %
▶

Fluid motion is not just the way things move but how things move. A beautiful animation can become unsuccessful when there are unnecessary repaints and elements are not properly hardware accelerated. This involves thinking about the element itself along with the way we animate it. Animations should be performed with transforms and opacity where possible. Animated elements must be hardware accelerated (see the docs for our .accelerate class).

Mobile web pages should specify initial-scale=1.0 in the meta tag so that the device is not waiting the required 300MS on the secondary tap before calling action. Interaction for touch events must either start from a larger touch-target (40px x 40px or greater) or use @media(pointer:coarse) when support increases.

SVG should be used in place of jpg, png, or gif for animated elements due to their small filesize when properly designed for performance. The exception to this rule being an element that has to grow many scales higher than its original state, which is a poor use case for SVG due to the cost of that rerender. SVG must be properly optimized with tools like SVGOMG, SVGO, or Peter Coolinridge's SVG Editor.

Developer Standards