Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
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.

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.

XYZ
Colour

Time: 0.4s
Easing: Linear

Examples: Links, Buttons, Step Nav, Tabs.

XYZ
Opacity

Time: 0.4s
Easing: Linear
Increment: +0.15

Examples: Video player controls, Signpost.

XYZ
Scale

Time: Relative to distance*
Easing: Ease out
Increment: Relative to size*

Examples: Quiz progress nav, Course block, Progress toggle.

* See relative palette

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.

XYZ
Energetic pulse

Time: Relative to distance*
Easing: Ease out
Increment: Relative to size*

Examples: Progress toggle.

XYZ
Subtle pulse

Time: Relative to distance*
Easing: Ease out
Increment: Relative to size*

Examples: Like button.

XYZ
Wiggle

Time: Relative to distance*
Easing: Ease out

Examples: Step nav.

Emoticon

Time: Relative to distance*
Easing: Ease out

Examples: Motivational placeholder.

XYZ
Grow

Time: Relative to distance*
Easing: Ease out

Examples: Notifications count badge.

* See relative palette

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.

XYZ
Slide up/down

Time: Relative to distance*
Easing: Ease out

Examples: Achievement card

XYZ
Fade in/out

Time: 0.4s
Easing: Ease out

XYZ
Fade in up/down

Time: 0.4s
Easing: Ease out

Examples: Popover

XYZ
Collapse/expand

Time: Relative to distance*
Easing: Ease out

Examples: Video transcript

* See relative palette

Palettes

Sometimes applying pre-defined effects above won’t feel right. For example, two elements animated with the same speed can feel completely different if they are different sizes or have varying distances to travel.

Animation is not about perfect technical consistency but making sure that the feel of animation is consistent. To achieve this we have a timing, easing and scaling palettes, set up based on the Fibonacci proportions.

Timing

Most of the animations on FutureLearn use Base timing of 0.4. If this timing doesn’t feel right, most likely your object travels 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, cards, 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