[feat]: skipAnimation at the component level
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 29.1k
- Forks
- 1.2k
- PR merge metrics
- No merged PRs in 30d
Description
A clear and concise description of what the feature is
skipAnimation currently exists at the Global level which is very useful when used with useReducedMotion to be a good a11y citizen. But what if there are animations we don't want skipped regardless of user preference? Currently we can only block all animations or allow all and selectively block a few. This feature would allow one to maintain skipping animations for folks with reduced motion turned on but allow you to selectively allow certain animations to proceed.
Why should this feature be included?
The alternative is to selectively block animations. In a large codebase where many animations can exist this is not only cumbersome but also exposes the developers to shipping a poor a11y experience by forgetting to check reduced motion setting for new animations added.
Please provide an example for how this would work
// when the property exists and it's set to false the animation will not be skipped regardless of the global setting.
useSpring({ skipAnimation: false });
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the useSpring entry point and trace how the existing global skipAnimation setting is applied. Define how a component-level skipAnimation: false interacts with the global setting, then add coverage showing that reduced-motion users still skip other animations while this component animation proceeds.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100