Soft spot for interactive elements

I have to admit, I have a soft spot for interactive elements. However, I understand that not everyone experiences the web in the same way. Many people either dislike or get distracted and disoriented by animations that cannot be paused. It’s important to me to respect that.

That’s where the prefers-reduced-motion media query comes into play. It’s a simple yet powerful way to tailor the experience for those who prefer less motion.

How its done

I created two classes to either show or hide an element, such as the motion divider.

• My interactive motion divider gets the .motion-hide class, which hides it when the user has a preference for reduced motion.
• My static divider gets the .motion-hide-default class, which is displayed when the user prefers reduced motion.

This way, I can easily control which elements are visible based on user preferences, creating a more inclusive experience.

/* If the user prefers reduced motion, hide elements with the class 'motion-hide' */
@media (prefers-reduced-motion: reduce) {
    .motion-hide {
        display: none; /* These elements will not be displayed */
    }
}

/* By default, hide elements with the class 'motion-hide-default' */
.motion-hide-default {
    display: none; /* These elements are hidden initially */
}

/* If the user prefers reduced motion, show elements with the class 'motion-hide-default' */
@media (prefers-reduced-motion: reduce) {
    .motion-hide-default {
        display: block; /* Change to 'inline' if you want them to be inline elements */
    }
}

The goal

I’m trying to foster a sense of community where everyone can enjoy the content without feeling alienated by design choices. So, here’s to a more inclusive web!