Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

reduceMotion #334

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

reduceMotion #334

wants to merge 3 commits into from

Conversation

mrienstra
Copy link
Contributor

@mrienstra mrienstra commented Jul 12, 2024

I'm submitting a...

[ ] Bug Fix
[x] Feature
[ ] Other (Refactoring, Added tests, Documentation, ...)

Checklist

  • Test your changes (existing tests are passing, feature appears to work, but this PR is missing test coverage for new code)
  • Followed the build steps

Description

Fixes #327.

Basic implementation of respecting user's preference for reduced motion.

I would mark this as "draft" if the option was presented, as it is missing test coverage.

Does this PR introduce a breaking change?

[x] Yes
[ ] No

Sort of, but the default value of this.options.reduceMotion could be changed to false (rather than 'auto'). Kinda think it's better to just break the expectation that this plugin will default to ignoring the user's preference for reduced motion....

Copy link
Owner

@inorganik inorganik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR. Can you please refactor to check the preference once in the constructor, if the option is set? Then we will simply set this.motionOk based on the check, and check motionOk in the start method call.

dispatchEvent: jest.fn(),
})),
});
});
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you go ahead and add a test for the new option

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have bandwidth at the moment, if anyone else does, please go for it.

src/countUp.ts Outdated
@@ -21,6 +21,7 @@ export interface CountUpOptions { // (default)
onCompleteCallback?: () => any; // gets called when animation completes
onStartCallback?: () => any; // gets called when animation starts
plugin?: CountUpPlugin; // for alternate animations
reduceMotion?: boolean | 'auto'; // 'auto' respects user preference
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the property name is misleading, let's change to checkReducedMotionPref. The value should simply be a boolean, defaulting to true.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about respectPrefersReducedMotion?
(boolean, like you suggested, I dropped 'auto' option, now true is what 'auto' was)

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use what I suggested

src/countUp.ts Outdated Show resolved Hide resolved
@mrienstra
Copy link
Contributor Author

mrienstra commented Jul 16, 2024

Sure! On my phone right now, I can do that soon.

The reason I did it the way I did: it will re-check as needed, so if someone lands on a site and decides there's too much motion, they can toggle the setting on their device, and see a change without reloading the website. Note that it isn't checking mid-animation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature Request] Allow for Reduce Motion Accessibility
2 participants