Animation on FutureLearn has two main purposes. Firstly, it helps the user understand how the product works. Secondly, it helps to express and reinforce our brand.

• Animation should have a clear purpose, such as showing a change of state, bringing emphasis, or revealing hidden content.
• Animation should not slow a learner down or prevent them from completing a task.
• Keep physical metaphors consistent (e.g. if something enters from the left, it should exit to the left, rather than flying up).
• Check that the feel of animation complements FutureLearn’s brand. Generally animations on FutureLearn feel calm, soft, and balanced, apart from the "Emphasis" type which are meant to be energetic and lively.

Timing

Most of the animations on FutureLearn use a base timing of 0.4s. If this timing doesn’t feel right, most likely your object travels a shorter distance (in which case use “Shorter time”) or a longer distance (in which case use “Longer time”).

• Shorter time: 0.3s 
  Shorter distance travelled 
  E.g. quiz progress nav
• Base: 0.4s 
  E.g. buttons, collectables, popovers
• Longer time: 0.6s 
  Longer distance travelled 
  E.g. full screen transitions

To get the correct duration you can use the duration function and pass in 'short', 'long', or a blank argument for the base.

transition: transform easing('motion') duration('short');

Easing

We have two types of easing, depending on whether an animation involves physical movement of an object.

• Static: Linear 
  For things that don’t move 
  E.g. opacity and colour changes
• Motion: Ease out 
  For things that move 
  E.g. scale changes and slide up/down

To get the correct easing you can use the easing function and pass in 'static' or 'motion';

transition: transform easing('motion') duration();

Scaling

When using a scaling animation, the smaller an object is the more it needs to scale in proportion to its size, for the change to be visible. Therefore we have a palette for scaling objects, also based on the Fibonacci proportions.

• Small: ×0.025 
  Large objects 
  E.g. course blocks
• Base: ×0.1 
  Medium objects 
  E.g. progress toggle button
• Large: ×0.25 
  Small objects 
  E.g. like button

In FutureLearn’s interface we defined three animation patterns based on their purpose: state change, emphasis, and reveal.

State Change

A state change indicates that an object has changed state due to user interaction. For example, a state can change on hover or on click. Animation helps to soften the transition between states. State change animations are brisk, soft and subtle and they shouldn’t draw too much attention to themselves.

Emphasis

Emphasis animations are used to draw attention to specific information or an action, for example a notification or a nudge to encourage learners to progress to the next step. Emphasis animations have a more lively, playful feel, as they’re meant to be more noticeable than the state change animations.

Reveal

Reveal animations are used to hide and reveal extra information, such as the menu being hidden to the left, the drop down, or pop over menu etc. This is especially important on small screens where space is limited and content can’t all be displayed at once.