Animations
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.
Guiding principles
- 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
Patterns
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.
Duration: 0.4s
Easing: Linear
Category: State Change
Duration: 0.4s
Easing: Linear
Category: State Change
Increment: +0.15
Duration: Relative to distance
Easing: Ease out
Category: State Change
Increment: Relative to size
Duration: Relative to distance
Easing: Ease out
Category: Emphasis
Increment: Relative to size
Duration: Relative to distance
Easing: Ease out
Category: Emphasis
Increment: Relative to size
Duration: Relative to distance
Easing: Ease out
Category: Emphasis
Duration: Relative to distance
Easing: Ease out
Category: Emphasis
Duration: Relative to distance
Easing: Ease out
Category: Reveal
Duration: 0.4s
Easing: Ease out
Category: Reveal
Duration: 0.4s
Easing: Ease out
Category: Reveal
Duration: Relative to distance
Easing: Ease out
Category: Reveal