Overview

Animating a dialog box with MUI is an awesome feature that is easy to implement. Adding some animation to certain components can make a website more engaging. Just don’t over use it.

From mui.com, the following components can be animated.

• Modal
• Dialog
• Popper
• Snackbar
• Tooltip

Animations available from MUI.

• <Collapse />
• <Fade />
• <Grow />
• <Slide />
• <Zoom />

Source Files – Coming Soon

Libraries Needed

MUI – Material UI v5.4.3

Material UI library for React

npm install @mui/material @mui/lab @emotion/react @emotion/styled

Dialog Component with Zoom Animation

Using a combination of Material Dialog Box and Zoom, we can animate a how the component will appear on the initial and exit render.

Imports from MUI need for the example Dialog with Zoom.

import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

import Zoom from '@mui/material/Zoom';

Imports Needed for Dialog with Zoom

All the imports need for the Dialog with Zoom example.

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Zoom from '@mui/material/Zoom';
import Stack from '@mui/material/Stack';
import CancelIcon from '@mui/icons-material/Cancel';

Setup a Transition to zoom in using MUI’s Zoom.

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Zoom timeout={500} ref={ref} {...props} />;
});

Using the TransitionComponent property we can pass the Transition constant defined above.

 <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-describedby="alert-dialog-slide-description"
      >

Source for the entire dialog component. In this example the component is labeled DialogZoom.js

import * as React from 'react';
import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import Zoom from '@mui/material/Zoom';
import Stack from '@mui/material/Stack';
import CancelIcon from '@mui/icons-material/Cancel';

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Zoom timeout={500} ref={ref} {...props} />;
});

export default function DialogCancelConfirm(props) {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };


  return (
    <div>
      <Button color="error" startIcon={<CancelIcon/>} onClick={handleClickOpen}>
      <b>Cancel</b>
      </Button>
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={handleClose}
        aria-describedby="alert-dialog-slide-description"
      >
        <DialogTitle>Zoom Dialog</DialogTitle>
        <DialogContent>
          <DialogContentText id="alert-dialog-slide-description">

          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button variant="outlined" onClick={handleClose} color="primary">Close</Button>

        </DialogActions>
      </Dialog>
    </div>
  );
}

Just import and render the Dialog Component in the _App.js.

import DialogZoom from './components/DialogZoom'

...

return (
<>
  <DialogZoom />
</>
)

Other Animations

Fade Transition

Define a Fade Transition

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Fade timeout={500} ref={ref} {...props} />;
});

Slide Transition

Define a Slide Transition

There is a direction property to start the animation from down, left, right, or up.

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction="down" ref={ref} {...props} />;
});