Disabling animations either per-component or globally

I find the performance really suffers on some mobile devices whenever any animations are happening.

I’d ideally like to be able to disable animations per component, or if not, globally.

Ideally there’d be an option like so:

<ExpansionPanel animate={false}>
    ...
</ExpansionPanel>

As far as I can tell, this is not currently possible.

Firstly - is there a workaround where I can disable animations with css overrides?

Secondly - should this be considered for being added as a feature?

• I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.33
React	16.2.0
browser	any on low-powered devices

Thanks in advance!

[oliviertassinari]

@jacobweber Yes, of course. You can do the following.

import { createMuiTheme } from '@material-ui/core';

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButtonBase: {
      // The properties to apply
      disableRipple: true, // No more ripple, on the whole application 💣!
    },
  },
  transitions: {
    // So we have `transition: none;` everywhere
    create: () => 'none',
  },
});

Some peope will want to enable this behavior conditionally, for instance when serving an android user. In these cases, they can dynamically change the theme value.

I think that it would be breat to have a demo in the documentation or at least have this use case listed under the FAQ. Anyone wants to work on it? Thank you!

[oliviertassinari]

@tom-james-watson We use theme.transitions.create() almost everywhere to create the transitions, by overriding this method in the theme, you should easily be able to disable the transition globally. Adding the fact that the theme can be nested, you should be able to build a <DisableTransition /> component easily to cherrypick.

@xemasiv The ripple can be disabled globally as documented here: https://material-ui.com/customization/themes/#properties.