Motion

Getting started

• Download AEUX to import product UI from Figma to AfterEffects
• AEUX settings should be set to import @2x comps sizes and at 60fps
• Clean up of static UI visuals may be required as every group within Figma imports as an individual comp within AE
• Icons may need to be copied as an SVG in Figma and pasted to Illustrator > import as an AI. file format or by using Overlord to push vectors
• Accessibility guidance recommends that animated product UI are no longer than 5 seconds / 300 frames in duration - edit comps should be no longer
• Product UI will be exported through Lottie as .json files so care should be taken to workflow and effects compatible with this format.

Glossy UI figma folder

The following motion guidelines serve to create consistency across a family of animated product UI that use common elements - any outlier use cases are left to the animator but should adhere to a similar style.

Outline flow

Motion diagram

The single stroke implementation uses flow motion effectively, creating a flow reveal type easing. As the final export will be Lottie, linear gradients are applied in opposite directions to give the appearance of a fading trail.

| Flow animations are used to mimic the idea of device frames e.g. desktop & mobile. | The Flow is only used on black backgrounds and within page hero areas. In-page product UI should not use the flow. | The Flow should fade out before panel build up begins. The entire duration including fade out should be 84 frames. | | --- | --- | --- |

Implementing motion

The following properties describe the key motion that is implemented in the example:

The following properties describe the key motion that is implemented in the example:Glossy UI RevealAtom: Pico (4px width)Shape Atom Forms: StrokeColour: Gradient with transparencyProperty: End Trim 0 to 100%Property: Rotation -70 to 0Duration: Flow01 - 1400msEasing: Reveal type effectGlossy UI fade-out-fastProperty: Opacity 100% to 0%Duration: Fast 400msEasing: Linear

Dos and don'ts

Don'tLeave the flow in place with it acting as a border.

Don'tUse alternative line weights for the flow.

Build up

Aside from where a Glossy UI has graphs the main panel and sub panels will rise and build up over a short amount of time.

Implementing motion

Panels

The base frame first appears as empty and is fixed in position.Glossy UI fade-in-fastProperty: Opacity 0 to 100%Duration: Fast - 400msEasing: ease-out
The stacking order should be from top to bottom, with panel columns animated left to right. Each element should animate with a ‘lift’ motion.Glossy UI lift-up-fastProperty: Opacity 0 to 100%Property: translate Y from -20px to 0Duration: Fast - 400msEasing: ease-out
Initial build up duration should be 24 frames with a gap of 12 frames between each layer - though this can be shorter for complex sequences.
Panels and content motion diagram
Panels should animate before any content appears.
Content mimics the element sequence animating one-by-one, top to bottom.

Motion Example

Dos and don'ts

DoBring in using a subtle lift over specified time period.

Don'tUse drops or slide to bring animate in a UI.

Overlay cards

Implementing motion

To create focus on areas of content, an overlay panel may have a ‘rise’ motion.
Scale value is dependant on static visual, though note that the shadow opacity changes 0% > 100%.overlay-scale-normalProperty: Scale 100 to ~150% (Variable)Property: translateY from Y to 0Property: Drop shadow opacityDuration: normal 600ms durationEasing: ease-in-out

Motion example

Dos and don'ts

DoCheck text and image legiability when card is scaled.

Don'tScale card such that the edge is lot beyond the bounds of the image.

DoKeep animations neat and simple such that they don’t take longer than needed to complete.

Don'tUse data that looks erroneuous or unbelieavle in context.

Modals

Implementing motion

To recreate in-product interactions modal animations differ to overlays.
A dark overlay utilises a black solid with 60% opacity that transitions in over 400ms.Overlay fade-in-fastShape: Black solidProperty: Opacity 0 to 80%Duration: Fast - 400msEasing: ease-in-out

Motion example

Buttons

Implementing motion

To recreate in-product interactions, button animations should trigger a new action.
Buttons ‘clicks’ should use a scale motion to appear larger for maximum focus.The button should scale to 125% of its original value.

Motion example

Graphs

Implementing motion

To recreate in-product graphs, each frame within the UI should scale and graphs should animate in.A graph can also appear in an overlay card to draw further attention to a key part of the UI - animation should follow the same style.
Frames should scale in from 50%, at the same rate, from their centres. Opacity should transition from 0 to 100%.All outlines, text and subgraphs should scale in with the frames but particular graphs should animate on as follows:Graph scale-fade-in-fastProperty: Opacity - 0 to 100%Duration: Normal - 600msProperty: Scale - 50% - 100%Duration: Very Slow - 1200msEasing: Reveal Type (0.2, 0, 0.2, 1)

Motion example

Types of graph

Bar ChartsWith the axes already in place, the data bars should rise vertically appearing from the X axis. This effect can be created using a matte that is the same size as the graph area.
Pie ChartsAn anti-clockwise reveal from 12 o’clock with a rotation on the graph so as to create an effect where the graph draws itself in. This can be achieved by animating a matte to follow the head of the graph as it rotates 360 degrees or a more complex set of trimmed paths for each section where a grey trim path completes a full 360 degree animation in followed.
Line ChartsWith the axes already in place, lines and their solid colour (with 15% opacity) that sits below the lines animate in left to right. The solid colour should animate in as close to possible ahead of the line. The effect can be achieved utilising a rectangle matte that animates left to right. The points should start to scale as the line passes and have a short ease out and heavy ease in. They should take 400ms to reach full size.

Transitions

Implementing motion

To ensure clean transitions between frames cards within the UI should all transition out right to left leaving space for new UI elements to transition in as described in the build up section.
When an action such as button click or an action completing requires a new screen to be shown the cards and text animate out over 600ms.Card transition point-to-point normalProperty: Translate X from A to BDuration: Normal - 600msEasing: ease-in
The new cards and transitions in should start during the last part of the transition out or immediately after the cards have disappeared

Motion example