Newskit Logo
View Github

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 nameAccepted ValuesExampleDescription

Predefined Transition Presets

Below is a collection of Transition Presets that come out of the box with NewsKit that can be applied to elements:

ExampleTokenDescriptionImplementation

You can also add your own Transition Presets. See the Creating a theme guide for more details.

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:

ExampleNameTypeDescription

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:

ExampleNameTypeDescription

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}

Typography Presets

A collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.

Typography Presets

A collection of foundational font design tokens combined into a preset to define reusable typography styles for specific text elements.