Presets
Transition Presets
A collection of motion attributes combined into a preset to define reusable motion transition from one state to another.
Overview
Transition Presets define attributes such as the visual style, size, or position of an element across multiple states over time. Transition Presets can be reused through the system on multiple elements.
Transition Preset properties
Transition Presets use a combination of the following Transition Preset properties:
| Token name | Accepted Values | Example | Description |
|---|
Predefined Transition Presets
Below is a collection of Transition Presets that come out of the box with NewsKit that can be applied to elements:
| Example | Token | Description | Implementation |
|---|
Transition Preset States
States are used to define the CSS property, duration, delay and transition timing, and the initial and final styling of an element.
There are two distinct approaches to defining transitions based on the following:
1. States for transitions triggered upon user interaction
Transition presents applied to elements upon user interaction e.g. changing the background colour of a Button on hover. The following states are used for transitions triggered upon user interaction:
| Example | Name | Type | Description |
|---|
2. States for transitions triggered upon enter and exit of a component
Transition presets applied to mount and unmount components e.g. Modal on-screen appearing and disappearing. The following states are used for transitions triggered upon enter (mount) and exit (unmount) of a component. The states represent class names applied to an element:
| Example | Name | Type | Description |
|---|
Apply Transition Presets
The Component Defaults page details the different ways in which you can override and apply Transition Presets to NewsKit components. For more advanced use cases, these values can be accessed from the theme by calling getTransitionPreset (a function used to retrieve values from the component defaults or overrides objects) or getTransitionPresetFromTheme (a function used to retrieve token values from theme or component props).
Transition presets triggered upon user interaction
1. This example demonstrates a Transition Preset backgroundColorChange.
1transitionPresets.backgroundColorChange = {
2 base: {
3 transitionProperty: 'background-color',
4 transitionDuration: '{{motions.motionDuration050}}',
5 transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
6 },
7};2. When combined with the following stylePreset the background colour will transition between states.
1stylePresets.box = {
2 base: {
3 backgroundColor: '{{colors.purple030}}',
4 },
5 hover: {
6 backgroundColor: '{{colors.purple070}}',
7 }
8};3. This example demonstrates applying backgroundColorChange Transition preset to a simple box element.
1const Box = styled.div`
2${getStylePresetFromTheme('box')}
3${getTransitionPresetFromTheme('backgroundColorChange')}
4 width: 100px;
5 height: 100px;
6`;Combining Transition Presets applied to background and border colours
1. This example demonstrates two Transition Presets, backgroundColorChange and borderColorChange
1transitionPresets.backgroundColorChange = {
2 base: {
3 transitionProperty: 'background-color',
4 transitionDuration: '{{motions.motionDuration030}}',
5 transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
6 },
7};
8
9transitionPresets.borderColorChange = {
10 base: {
11 transitionProperty: 'border-color',
12 transitionDuration: '{{motions.motionDuration050}}',
13 transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
14 },
15};2. When combined with the following stylePreset the background and border colours will transition between states with different durations.
1stylePresets.box = {
2 base: {
3 backgroundColor: '{{colors.purple030}}',
4 borderWidth: '{{borders.borderWidth030}}',
5 borderStyle: 'solid',
6 borderColor: '{{colors.green020}}',
7 },
8 hover: {
9 backgroundColor: '{{colors.purple070}}',
10 borderColor: '{{colors.green040}}',
11 }
12};3. This example demonstrates applying backgroundColorChange and borderColorChange Transition preset to a simple Box component.
1const Box = styled.div`
2${getStylePresetFromTheme('box')}
3${getTransitionPresetFromTheme(['backgroundColorChange', 'borderColorChange'])}
4 width: 100px;
5 height: 100px;
6`;Note
These example only applies to a single instance. Use Component Defaults if you want to apply to all instances of a component.
Transition Preset triggered upon mount/unmount
1. This example demonstrates a Transition Preset, slideLeft. This Transition Preset is used to slide an element in from the left edge of the screen.
1transitionPresets.slideLeft = {
2 base: {
3 transform: 'translateX(-100%)',
4 },
5 enter: {
6 transform: 'translateX(-100%)',
7 },
8 enterActive: {
9 transform: 'translateX(0)',
10 transitionProperty: 'transform',
11 transitionDuration: '{{motions.motionDuration020}}',
12 transitionTimingFunction: '{{motions.motionTimingEaseIn}}',
13 },
14 enterDone: {
15 transform: 'translateX(0)',
16 },
17 exit: {
18 transform: 'translateX(0)',
19 },
20 exitActive: {
21 transform: 'translateX(-100%)',
22 transitionProperty: 'transform',
23 transitionDuration: '{{motions.motionDuration020}}',
24 transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
25 },
26 exitDone: {
27 transform: 'translateX(-100%)',
28 },
29};2. Applying the transition preset to the Drawer in the defaults.
1export const Drawer = styled.div`
2 ${getTransitionPreset(
3 `drawer.panel.left`,
4 'panel',
5 'nk-drawer',
6 )};
7`;
8
9 <Drawer
10 open
11 onDismiss={close}
12 header="Drawer"
13>
14 <div>Content</div>
15</Drawer>Extending or overriding Transition Presets
Transition Presets can be overridden or combined to achieve different combinations.
Code example
The example below demonstrates overriding a transition preset applied in the defaults of the Drawer component.
1 <Drawer
2 open
3 onDismiss={close}
4 header="This is a drawer header"
5 overrides={{
6 panel: {
7 transitionPreset: 'slideRight',
8 },
9 }}
10>
11 <DrawerContent />
12</Drawer>The example below demonstrates extending two predefined Transition presets - fade and moveUp applied to a Modal component. The Duration value and Timing function of both Transition Presets are overridden and delay is added to thefade Transition Preset when the component appears on the screen.
For both Transition Presets, the Duration and Timing functions are updated from the enter to the exit state of the transition.
1<Modal
2 open={true}
3 onDismiss={close}
4 header="This is a modal header."
5 overrides={{
6 panel: {
7 transitionPreset: [
8 {
9 extend: 'fade',
10 enterActive: {
11 transitionDuration: '{{motions.motionDuration010}}',
12 transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
13 transitionDelay: '{{motions.motionDuration010}}',
14 },
15 exitActive: {
16 transitionDuration: '{{motions.motionDuration010}}',
17 transitionTimingFunction: '{{motions.motionTimingLinear}}',
18 },
19 },
20 {
21 extend: 'moveUp',
22 enterActive: {
23 transitionDuration: '{{motions.motionDuration010}}',
24 transitionTimingFunction: '{{motions.motionTimingEaseOut}}',
25 transitionDelay: '{{motions.motionDuration010}}',
26 },
27 exitActive: {
28 transitionDuration: '{{motions.motionDuration010}}',
29 transitionTimingFunction: '{{motions.motionTimingEaseIn}}',
30 },
31 },
32 ],
33 },
34 }}
35>
36 {modalContent}
37</Modal>Adding custom Transition Presets to the theme
Custom Transition Presets can be added to the theme. See the Creating a theme guide for more details.
Communicating Transition Presets in Figma
The inability to communicate motion in static layouts has been a long-standing problem in the design world. In the absence of this information, it is often up to the developer to interpret how to implement it.
To alleviate this problem with page-level transitions we recommend designers refer to the documentation provided in Figma.
For additional guidance on how to communicate a design to the product team for engineers to build, refer to the NewsKit Handoff guidance.
Accessibility considerations
Considering users that may have a sensitivity to motion (perceived movement on the screen), is core to the NewsKit motion system. By following the guidelines below, we ensure that any users who experience sensitivity to motion have the option to view a more basic experience that reduces motion where possible.
Reduced Motion for motion sensitivities
The prefers-reduced-motion CSS media feature detects if the user has requested that their operating system or browser minimises the amount of non-essential motion displayed to the user. To ensure experiences are inclusive it is recommended to implement the prefers-reduced-motion feature to elements that have motion. By default, we support this feature for components in the NewsKit Design System that have motion applied to them eg. the Drawer, & Modal components.
To see which browsers support this feature, please refer to this link.
Code example
To implement this feature manually by using CSS:
1@media (prefers-reduced-motion: reduce) {
2 /* reduced behaviour */
3}