fix(typed effect): allow fade effect with reduced motion (@d1rshan)

[d1rshan]

Current Behavior for Reduced Motion

1. keep - Letters stay (No change)
2. hide - Letters vanish instantly (No change)
3. fade - Letters stay (Effect is lost)
4. dots - Letters become dots instantly (has a Fallback)

Changes

This PR makes sure that fade effect works for reduced motion by adding it to the global exclude list for reduced motion.

Closes #7847

[fehmer]

I think fade should fade even with reduced motion applied.
Selecting fade is a user choice and it is okay to override reduced motion.

[d1rshan]

makes sense, i misunderstood it. will update this pr accordingly

[fehmer]

hi @d1rshan,

please revert the changes for the dots effect. Just replace with dots without the animation is fine for reduced-motion.

Can this be fixed by adding the.typed-effect-fade to the exclude list for reduced motion

monkeytype/frontend/src/styles/media-queries.scss

Line 46 in 5f43b94

*:not(.fa-spin, .animate-\[loader\], .preloader) {

?

[d1rshan]

hey @fehmer, i reverted the changes for dots effect and yes adding fade effect class to exclude list also works, so i did that too.

also can i get clarification regarding what behavior should this new typed effect #7793 follow (for reduced motion) ? - currently i updated it so that it behaves the same on reduced motion by adding to exclude list.

[fehmer]

also can i get clarification regarding what behavior should this new typed effect #7793 follow (for reduced motion) ? - currently i updated it so that it behaves the same on reduced motion by adding to exclude list.

Should be fine, the tumble effect does not make sense without any motion.

[Miodec]

Thanks