Motion

Kelp automatically disables motion effects when the user has the prefers-reduced-motion setting enabled in their OS.

If your effect is CSS-driven, you don’t need to do anything to respect this setting. It happens automatically as long as the /css/utilities/accessibility.css class is included in your stylesheet (its automatically included in the main kelp.css file).

/**
 * Remove all animations and transitions for people that prefer not to see them
 */
@media (prefers-reduced-motion: reduce) {
	*, :after, :before {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}