How can i increase Material UI overall animation speed

Question

How can i increase the overall animation speed of Material UI, for example there is a drawer component inside the material UI, and it can be opened or closed, how can i increase that animation speed ?
Even better how can i increase all the animation speeds in the material UI?

Answer 1

Local overwriting

You can change transition duration for <Drawer> by adding transitionDuration prop to component.

<Drawer transitionDuration={1000}>  // time for entering and leaving in ms

If you want different time for entering and leaving then:

<Drawer transitionDuration={{ enter: 500, exit: 1000 }}>

Documentation

Live demo:

Global overwriting (MUI 5)

As for global overwriting. You can use <ThemeProvider> and createTheme to inject your custom theme to application. Then you can overwrite many things, one of them is animation duration:

import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
    transitions: {
        duration: {
            enteringScreen: 2000,
            leavingScreen: 100,
        }
    }
});

function App() {
    return (
        <ThemeProvider theme={theme}>
            <RestOfYourApp />
        </ThemeProvider>
    );
}

Live demo

Global overwriting (Material-UI <= 4.x)

Unfortunately it does not work in Material-UI version 4 (and older)

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";

const theme = createMuiTheme({
    transitions: {
        duration: {
            enteringScreen: 2000,
            leavingScreen: 100,
        }
    }
}); 

function App() {
    return (
        <MuiThemeProvider theme={theme}>
            <RestOfYourApp />
        </MuiThemeProvider>
    );
}

It works... for some components, for example <Button>. But other (like <Drawer>) has transition properties hardcoded in source code.

So, only way to change <Drawer> transition duration in Material-UI 4, is adding transitionDuration prop to component.