Accessible Motion

Allow styles to be conditionally applied depending on the user's prefers-reduced-motion configuration. View prefers-reduced-motion documentation (opens new window) for more details.

• How to
  • SCSS Example:
• SCSS

How to

To conditionally apply SCSS styles based on a user's prefers-reduced-motion configuration, use the mixin like this:

SCSS Example:

.your-element-that-should-support-reduced-motion {
  @include accessible-motion($default-enabled: true) {
    // Transitions/animations styles
  }
}

SCSS

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';

@include accessible-motion($default-enabled);

Output

Parameters

$default-enabled: <boolean>