Comments (5)
We've been discussing this internally — I'm not sure making animations less distracting is the direction we want to go in. Partially because "less distracting" is a very subjective metric and partly because the way the prefers-reduced-motion option is described on many operating systems is "disable motion".
That said, we think there may be times when it makes sense to override the existing behavior but with a verbose pejorative option name much in the way React allows dangerouslySetInnerHTML
. Current favorite is:
cost [ref] = useAutoAnimate({
disrespectUserMotionPreference: true
})
from auto-animate.
This is available: https://auto-animate.formkit.com/#configuration
from auto-animate.
A general enabled
or disabled
option (#27) could work as well and would leave the decision to disable potentially distracting animations to the library users.
const prefersReducedMotion = usePrefersReducedMotion()
const [ref] = useAutoAnimate({ disabled: prefersReducedMotion })
from auto-animate.
+1 to this!
In my use case, I work in a company that sets reduced motion as default for all computers, however in some cases we need to enforce animation, to make list transitions clearer.
I can submit a PR if necessary.
The package is currently unusable because of this, but I would love to switch all my manual animations with this godsend of a library.
from auto-animate.
Yeah I'd like to request this too, and I also want to recommend adding a button on the main website demo/#examples/showcase section to enable animations even if reduced mode is enabled.
I don't like to change my whole system settings in order to only check the demos, and even worse, the whole time I'm developing using this library... I'm personally an animations-off guy on my own system, but I am "requested" to use animations in some projects, so... .
Thank you.
from auto-animate.
Related Issues (20)
- Memory Leak
- Bug when deleting element of the array in React 18
- Inconsistent jumping inside flex item HOT 1
- Not working HOT 4
- Vue Virtual Scroller
- Wrong arguments order in AutoAnimationPlugin declaration
- Animate across lists? Across all elements inside a `ul`?
- How should I use fixed centering layout? HOT 1
- Incorrect rounding of element sizes while animating HOT 2
- When the page is refreshed, the component has no animation.
- Vue useAutoAnimate not working with v-if
- does not provide an export named 'autoAnimate'
- Animation starting coords are buggy when the container has transitioned positions
- How to add auto-animate to custom components (NuxtUI) HOT 1
- Headless UI + Auto-Animate | Issue with auto-animate conflicting HOT 1
- nuxt3 3.10.3 does not provide an export named 'autoAnimate' HOT 1
- I added the element from the front but the animation still appears from the last one HOT 1
- React.Children.map issue HOT 1
- How to animate single element? HOT 3
- The compatibility of TR tags is a bit difficult to use, and the TR animation effect has become distorted
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from auto-animate.