MUI Animations & Transitions

1. Built-in Transition Components

MUI provides five transition components built on top of react-transition-group. Each wraps a single child element and controls its enter/exit animation based on the in prop.

Fade

Opacity transition from transparent to opaque.

import { Fade, Box, Button } from '@mui/material';
import { useState } from 'react';

function FadeExample() {
  const [visible, setVisible] = useState(false);