Description
Motion around photography and Glossy UIs as a whole is closely tied with the on load and on scroll behaviour described in the Motion Guidelines (see the Motion section of the old Web DS for full details).
Additional motion and interaction with a flow element can occur after this but should be carefully considered so as to support the user journey and not become purely decorative/reducing user focus.
| On load and on scroll motion will be seen on: | Additional Motion can be be seen on: |
|---|
| Mosaic Hero ImagesSingular Hero ImagesContent containers with customer story and quotes. | Mosaic Hero Images with Flow InteractionSingular Hero Images - full width to right of screen moveCustomer Testimonial carousels. |
Implementing standard motion
Mosaic hero images
Photography and Glossy UIs within a mosaic can, on load as well as a standard load, implement a fast fade and normal slide transition in any direction in order to direct user focus.
In general it is expected that the left most image will slide in to the right and the right most image will slide in to the left. The ordering can be adjusted to give a varied effect and draw the user towards the content on the final transition.
Each transition should be offset by 100ms.
Example showing standard fast fade and slide transitions with mosaic
Key properties
The following properties describe the key motion that is implemented in the example:
| Image/Glossy UI fade-in-fast | Image/Glossy UI slide-up-normal (can also use left, down and right slides) |
|---|
| Property: Opacity 0 to 100%Duration: Very Fast - 200msEasing: ease-out | Property: Opacity - 0 to 100%Property: translate Y from 10vh to 0Duration: Fast - 400msEasing: ease-out |
Dos and don'ts
Don'tUse normal timing for fade in transitions.
Don'tUse longer slides or add uncessary/inconsistant distance.
Warning
Note: For smaller flexboxes, adjust the X/Y translation to a smaller vh so as not to create a moment of focus in the wrong area.
Singular hero images
Singular Hero images can, on load, implement a fast fade in and left or right slide transition.
A left to right slide should be used when the image is on the left half of the screen and right to left move used then the image is on the right hand side of the screen.
The slide should always occur over 600ms (Normal time) giving the user time to focus on the image whilst it moves in to place.
Example showing singular hero loading on scroll
Key properties
The following properties describe the key motion that is implemented in the example:
| Image fade-in-fast | Image slide-left-normal (can also be right) |
|---|
| Property: Opacity 0 to 100%Duration: Very Fast - 200msEasing: ease-out | Property: translate X from 10vh to 0Duration: Normal - 600msEasing: ease-out |
Dos and don'ts
DoTime the image and text components carefully to draw attention the messaging. Consider the use of a capsulae underline when useful.
Don'tUse longer slides than outlined getting user focus in a negative way.
Content containers
Content containers containing photography being loaded should implement on scroll loading as described in the motion guidelines using a staggered delay on each flex item if there are multiple containers in a flexbox.
Either a slide up-fast or slide-up-normal can be used for the load and as described on the linked section between flex items of the same flexbox or inner structure of the same parent page layout, there should be a 0.2 second delay.
Implementing additional motion
Mosaic hero images with flow interaction
Following a standard load, additional motion with photography and glossy UIs can occur as they interact with an element implementing flow motion. These moves consist of the images or glossy UIs being rearranged as the flow passes from left to right across the screen.
There should not be a long gap between the load completing and the flow entering, due to accessibility issues and the risk of animation taking too long and reducing user focus.
Example showing two image swap with the flow
Key properties
The following properties describe the key motion that is implemented in the example:
| Leap flow motion | Image/Glossy UI point-to-point fast |
|---|
| Atom: SmallShape Atom Forms: StrokeColor: Solid GreenDuration: Flow02/Flow03 - 2/3sEasing: Dynamic | Property: Translate X from A to BDuration: Fast - 400msEasing: ease-in-out |
Dos and don'ts
DoDo think carefully about the interim and final lockups of the mosaic and how these will look.
Don'tDon't trigger additional motion using the flow that is not timed well as a whole.
Singular hero images
Singular Hero images can also load full width and then transition to their final position taking up a maximum of 45% width.
This move combines a standard on scroll load with a left to right push into place.
In order to ensure that the person within an image finishes in the centre of the image frame during the left to right move, the image can be moved within the frame as needed.
An animated full width singular hero image
In part 1 of the motion, the image container (and image) loads full width using a lazy load.
In part 2 the image container slides left to right to final position with the image within the container sliding as needed to land in central position of frame. The text slides in from left to right.
Key properties
The following properties describe the key motion that is implemented in the example:
Part 1
| Image frame fade-in-fast | Image frame slide-left (can also be right) |
|---|
| Property: Opacity 0 to 100%Duration: Very Fast - 200msEasing: ease-out | Property: translate X from 10vh to 0Duration: Normal - 600msEasing: ease-out |
Part 2
| Image Frame point-to-point-slow | Image point-to-point-slow |
|---|
| Property: Translate X(frame) from A to BDuration: Slow - 800msEasing: ease-in-out | Property: Translate X(image) from A to BDuration: Slow - 800msEasing: ease-in-out |
| Text lockup Slide-left | |
| Property: Translate X from A to BDuration: Fast - 400ms (Covers last 400ms of 800ms of image moves)Property: Opacity 0 to 100%Duration: Very fast - 200msEasing: ease-out | |
Dos and don'ts
DoDo keep any pause in motion minimal in order to retain user attention. No pause with the full width image should exceed 400ms.
Don'tDon't use an image that is zoomed out and focuses on an entirely different area after the move, or one that requires to extreme a move for the image to retain focus on the person e.g. full left to right adjustment.
Customer testimonial carousels
Carousel patterns are described in full in the Patterns section here and images that are a part of the cards on the carousels should conform to the guidance as described in the design principles tab here.
