Motion & Animations

Our Animation Principles

Our animations tend to respect those principles.

Quick & Smart

The animation shouldn't slow down the perceived performance of the interface or system. On the contrary, it should help feel it quick and smart.

Friendly but Smooth and Professional

The animation should bring a bit of friendliness for our end users (both agents and clients). For instance, bouncing animations or squeezing effects are welcome but sparingly. Smooth light animations are prefered.

Supportive & Helpful

Animations are proposed to serve user experience. It helps user better understand the changes over the interface, and give them direct feedback during interaction.

Duration & Easing

The duration and easing we use are defined to serve 2 precise purposes:

• Give a natural feeling to the movement,
• Help the user by making the movement quick and adapted to the element being animated.

Duration of the animations

Well! It depends, but mostly: trust the designer team recommandation. Here are some commonly used duration, defined by our design tokens.

To illustrate the small animation duration, our buttons are the best examples.

Hover and click me Hover and click me

Keyframed / Long animations

There are some more complexe animations that require a bit more duration to process entirely. It's the case for multiple animated element that respect a precise timeline. For example, this house animation used in a "number of rooms" form controls, or the animated Foyer logo (which is a draft not validated yet).

Easing and timing function

We didn't pick a too complexe timing function for our basics animation. We decided to use the ease-in-out as working base. This function feels more natural: in the physical world, an object needs time to start moving, but also to slow down, and in between it has a max movement speed to reach.

The first animated block has an easing applied, while the second one has a linear timing function. See how the first one looks more natural during the animation.

Interface / System Changes

We call a system change in these different cases:

• The interface is changing (new content, content deletion, etc.) with a certain amount of new elements, or removed elements.
• The interface asked something to the system, and the system is processing.
• The system has requested a change to the interface by itself (notification or push principles)

Loaders

The loading principles and waiting time management's topic is discussed in another section of this documentation. (link coming soon)

This section addresses the topic of system status and all the different loading states available to make the user wait, or understand that something is processing.

Minor interface changes

Even for minor changes, animation/transition are mandatory. The smaller the change is, the quicker the animation will be. (3ms, remember?)

Here is a visual example of this principle applied to multiple elements appearing:

This principle applies also on user-controlled element that will be added to the interface, for instance:

See this Pen in a separate window for better scroll interaction.

Major interface changes

For bigger changes, like a panel of an group of several changes…

Direct Feedback

One of the usage of animation is for smooth but direct feedback. For instance, on buttons, we've got inspired by the Ripple Effect of Material Design.

Click on me!

This direct feedback take a little bit of time to end thanks to the animation duration. This help the brain of the user in understanding the changes applied after their own action on the interface.

Attention Keeper

Sometimes when we just need the user to focus on something specific, we use animation to keep their attention. For instance, we worked on several animations that cycle, to invite the user to interact with a precise element on the interface.

Interface Drawing

Another good use of animations is when the interface load a certain amount of data or visual element. Bringing them step by step can help the users understand the different point of interest in the current screen.
It adds a level of fulfillness and delightfulness too.

For any other need, and before deploying a new kind of animation, developers and other team members are asked to get help and advice from the design team.

Go further with:

Accessibility

When you work on animation, you need to be aware that it can lead to motion sickness. This discomfort is mostly caused by a lot of changes at the same time in the interface, or when a big one happens on the screen.

To avoid this discomfort, multiple solutions exist, complementary to each other, or exclusive, among these:

• A play/pause button for loop animation for instance (video, background, video),
• Esc key on the keyboard should also pause the loop animations,
• Take into account the user’s preferences based on prefers-reduced-motion

Prefers-reduced-motion

This easy-to-implement solution can be sum-up with some CSS lines, like so:

@media (prefers-reduced-motion) {
	.animated-elements {
		animation-name: dissolve;
	}
}

With this example, we replace all the animations by something animated based on fade-in/out animations instead of movements. dissolve would be the name of the declared animation.

Build you own solution keeping in mind that a lot of solutions exists to take into account and respect user preferences.