Provide an API to disable animations and transitions

[gyzerok]

Describe the problem

There are couple of cases when it might be sensible to disable animations and transitions:

1. user wants to disable them due to some disability or because they don't want them;
2. user might have a slower device and we would like to gradually degrade in order to keep UI responsive for them

Either I am missing something in the docs or there is no way to disable animations (basically making them noop) in Svelte currently.

Describe the proposed solution

While it's possible to do in user-space by wrapping all the transitions from Svelte inside your own transitions and creating an flag that would make them noop, I believe it'd be unnecessary complex.

Personally don't have an opinion on how this API should look like. I trust Svelte team to have a better vision for this.

Importance

nice to have

[Thiagolino8]

It's simple enough to do in userland
If you prefer, you can also use a library

[Conduitry]

You can also directly access the user's preference without needing to know the relevant media query by using this.

I think I'm leaning toward this being a userland concern. This seems like a hard thing for a framework to be the appropriate amount of opinionated about.

[gyzerok]

Yeah, it's simple enough when you do it in one component. However whenever you have hundreds you need to manually remember to disable it in every single place.

As I mentioned in my initial post, it's possible to create wrappers for every svelte transition and animation, but I think it's kind of impractical. Though of course we will go that way if the feature requests gets declined :)

[gyzerok]

Feel free to close the request if it does not make sense

[david-plugge]

Since reduced motion does not mean no animations at all a global switch would not work if you want some transitions to play. A userland solution should be best as you could even define different levels of animations

[paoloricciuti]

I think especially since we plan to move transitions and animations to attachments we can close this and keep on the back of our mind when we build the new transition and animations...since the new ones would probably be functions that you use like this

<div {@attach fade(...)}></div>

we could probably do something like this

<div {@attach fade.reduced(...)}></div>

adding very little to the framework.

Also as David said reduced means different things for different apps. Let's close it for the moment but will keep this in mind