Reduced motion
How CoreUI for React honours the prefers-reduced-motion setting in its transitions, animations and scrolling.
CoreUI for React includes support for the prefers-reduced-motion media feature. In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in CoreUI for React (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.
On browsers that support prefers-reduced-motion, and where the user has not explicitly signaled that they’d prefer reduced motion (i.e. where prefers-reduced-motion: no-preference), CoreUI for React enables smooth scrolling using the scroll-behavior property.
Options
| Variable | Default | Description |
|---|---|---|
$enable-reduced-motion | true | Wraps every component transition in prefers-reduced-motion: no-preference, so the transition runs only for users who have not asked for less motion. |
$enable-smooth-scroll | true | Applies scroll-behavior: smooth, except for users asking for reduced motion. |
See options for the other global switches, and transitions for how components run their transitions.
Your own animations
Wrap the animations and transitions you add in the same query, so they run only for users who have not asked for less motion:
@media (prefers-reduced-motion: no-preference) {
.banner {
animation: slide-in .3s ease-out;
}
}An animation that starts by itself and lasts longer than five seconds also needs a way to pause or stop it (pause, stop, hide), whatever the user’s setting. The carousel has one.