Skip to main content

Motion

The Norton design system has fully implemented the Material Design's motion system and it is highly recommended that you reference Material's guidance when designing for motion. All motion tokens and utilities are available in the @wwnds/core library.

Design Tokens​

TokenDefault ValueUsage
duration-scalar11a multiplier used for increasing/decreasing all motion speed
duration-simple100mssimple animations such as selection controls
duration-simple-enter150mssimple entrances such as fade-ins
duration-simple-exit75mssimple exits such as fade-outs
duration-complex200mscomplex animations such as shape changes
duration-detailed500msdetailed animations such as icon transformations
duration-open250mselements that open from a closed state, such as a sidebar
duration-close200mselements that close from an opened state, such as a sidebar
duration-expand300msused when an element expands (grows)
duration-collapse250msused when an element collapses (shrinks)
duration-smallduration-simpleelements with small transition areas, such as icons and selection controls, have short durations
duration-medium-expandduration-openexpanding elements with larger transition areas, such as bottom sheets and expanding chips
duration-medium-collapseduration-closecollapsing elements with larger transition areas, such as bottom sheets and expanding chips
duration-large-expandduration-expandexpanding elements that traverse a large portion of the screen
duration-large-collapseduration-collapsecollapsing elements that traverse a large portion of the screen
easing-standardcubic-bezier(0.4, 0, 0.2, 1)elements that begin and end at rest
easing-decelerationcubic-bezier(0, 0, 0.2, 1)incoming elements that end at rest
easing-accelerationcubic-bezier(0.4, 0, 1, 1)elements that begin at rest and exit the screen
easing-sharpcubic-bezier(0.4, 0, 0.6, 1)elements that temporarily exit

Duration Scalar​

We've introduced the duration-scalar token to help modify transition durations on the fly. It is highly recommend that you use the transition Sass function in @wwnds/core to set your transitions, as it will automatically multiply your duration by the duration-scalar token.

@use '@wwnds/core' as nds;

.my-sidebar {
	/*
	 * Easing is omitted because the transition function uses
	 * var(--nds-easing-standard) by default.
	 */
	transition: nds.transition(transform, var(--nds-duration-close));
}

.my-sidebar.open {
	transition: nds.transition(transform, var(--nds-duration-open));
}

Alternatively, if you'd like to skip the transition function, you can multiply your durations by the duration-scalar yourself.

@use '@wwnds/core' as nds;

.my-sidebar {
	transition:
		transform
		calc(var(--nds-duration-scalar) * var(--nds-duration-close))
		var(--nds-easing-standard);
}

.my-sidebar.open {
	transition:
		transform
		calc(var(--nds-duration-scalar) * var(--nds-duration-open))
		var(--nds-easing-standard);
}

Reduced Motion​

To ensure that prefers-reduced-motion is always followed, the duration-scalar value is automatically set to 0 when the user prefers reduced motion. Manually setting a duration that isn't multiplied by the duration-scalar token will result in that duration not being 0 when the user prefers reduced motion.

If you'd like to set reduced motion manually, you can also do so with the .nds-reduced-motion utility class or the reduce-motion Sass mixin.

@use '@wwnds/core/full' as nds;

.no-motion {
	@include nds.reduce-motion;
}

Debugging motion​

During development, it can be useful to slow down durations and easings to ensure so that you can see the animations in greater detail. Because the duration-scalar token is set as a CSS custom property, it can be used to increase or decrease all motion speeds across your application.

To modify it during development, simply open your dev tools, click on the <html> element, and change the value of the --nds-duration-scalar CSS custom property to any number greater than 1 to slow down and less than 1 to speed up.

Footnotes​

  1. The duration-scalar token is not part of Material Design's motion system. ↩