How to create animations for the Floating action button in Material UI?

A floating action button is a shape, with an icon at the center that appears in front of all screen content. Material UI is a known React component library that offers a range of pre designed and customizable UI components. Among these components the Floating Action Button (FAB) is quite popular.

To enhance the user experience, we can add animations to the FAB making it more visually appealing and engaging. In this article, we will explore how to create animations for the Floating Action Button in Material UI.

What is a Floating Action Button?

Now let's understand what a Floating Action Button is. These buttons are included in an app's user interface to represent actions that are prioritized by the developer. It is important to use a FAB only if it is truly the way to present the main action of a screen.

Typically, it's recommended to have one FAB per screen for the common action. There are two types of FABs; extended. It's worth noting that floating action buttons differ slightly from buttons.

Steps to create animations

Below, we have outlined the step, by step process for creating animations for Floating action buttons in Material UI using React.

Step 1: Create a new react app and Install MUI

First, let's start by creating a React app and installing Material UI. Follow these steps −

Open your terminal and run the command −

npx create react app projectname

After the project is created, navigate to the project directory by running −

cd projectname

Install Material UI and its dependencies by running −

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

Step 2: Import the required components into React

Now, when the new React app is created, in the src folder there is a main App.js file. Open it and import the required components.

import React from "react";
import { Fab } from '@mui/material

export default function App() {
   return (

   )
}

Now we have gone through all the steps to create and import the required components. Let's explore some examples that illustrate creating animations for Floating action buttons with different approaches.

Floating Action button API

• <Fab> − This API is used to add a Floating action button to the project using Material UI.

Props

• children − This prop defines the content of FAB.

• classes − This prop is used to override or add styles to an element.

• color − This prop is used to add color to the floating action buttons. It includes primary, secondary, success, info, error, warning, etc.

• component − This prop defines the component of FAB.

• disableFocusRipple − If this prop is set to true, the keyboard focus will ripple.

• disabled − This prop is used to disable the FAB.

• disableRipple − This prop is used to disable the FAB ripple effect.

• href − This defines the URL to which the FAB when clicked, will go.

• size − This prop is used to change the FAB size.

• sx − This prop is used to add custom styles to the material UI components.

• variant − This prop is used to choose which FAB to use, like circular, string, or string.

Example

In this case, we've incorporated animations to the floating action buttons. Whenever we toggle the switch the floating action buttons gracefully appear with these animated effects.

import { Box, Fab, FormControlLabel, Switch } from "@mui/material";
import React, { useState } from "react";
import Zoom from "@mui/material/Zoom";
import { Add } from "@mui/icons-material";

export default function App() {
   const [checked, setChecked] = useState(false);
   const handleAnimate = () => {
      setChecked((pr) => !pr);
   };

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormControlLabel
            control={<Switch checked={checked} onChange={handleAnimate} />}
            label="Animate FAB"
         />
         <Box sx={{ display: "flex", gap: 10 }}>
            <Zoom in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Zoom>
            <Zoom in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Zoom>
         </Box>
      </div>
   );
}

Output

Example

In this example, we have added three different animations to the floating action buttons. When we click the switch, the floating action buttons pop up with the Fade, Zoom, and Grow animations, respectively.

import { Box, Fab, Fade, FormControlLabel, Grow, Switch, Zoom } from "@mui/material";
import React, { useState } from "react";
import { Add } from "@mui/icons-material";

export default function App() {  
   const [checked, setChecked] = useState(false);
   const handleAnimate = () => {
      setChecked((pr) => !pr);
   };

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <FormControlLabel
            control={<Switch checked={checked} onChange={handleAnimate} />}
            label="Animate FAB"
         />
         <Box sx={{ display: "flex", gap: 10 }}>
         
            {/* Fade animation of floating action button */}
            <Fade in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Fade>
            
            {/* Zoom animation of floating action button */}
            <Zoom in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Zoom>
            
            {/* Grow animation of floating action button */}
            <Grow in={checked}>
               <Fab color="info" size="medium">
                  <Add />
               </Fab>
            </Grow>
         </Box>
      </div>
   );
}

Output

Example

In this example, we've integrated animations into the floating action buttons. To achieve this, we utilized the react swipeable views library to create two tabs. Whenever a tab is clicked the floating action button smoothly transitions, with a fade animation.

import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import { useTheme } from "@mui/material/styles";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Fab from "@mui/material/Fab";
import Typography from "@mui/material/Typography";

import { useState } from "react";
import { Add } from "@mui/icons-material";
import { Fade } from "@mui/material";

function MyCustomTab({ children: items, value, index, ...other }) {
   return (
      <Typography component="div" hidden={value !== index} {...other}>
         {value === index && (
            <span style={{ fontSize: 20, color: "green", padding: 4 }}>
               {items}
            </span>
         )}
      </Typography>
   );
}

MyCustomTab.propTypes = {
   children: PropTypes.node,
   index: PropTypes.number.isRequired,
   value: PropTypes.number.isRequired,
};

export default function App() {
   const [val, setVal] = useState(0);
   const theme = useTheme();

   const handleChange = (event, newValue) => {
      setVal(newValue);
   };

   const handleAnimateIdx = (idx) => {
      setVal(idx);
   };

   const transitionDuration = {
      enter: theme.transitions.duration.enteringScreen,
      exit: theme.transitions.duration.leavingScreen,
   };

   const fabData = [
      {
         id: 1,
      },
      {
         id: 2,
      },
   ];

   return (
      <div
         style={{
            display: "flex",
            marginTop: 30,
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: 10,
         }}>
         <div
            style={{
               backgroundColor: "white",
               width: 500,
               position: "relative",
               height: 300,
            }}>
            <AppBar color="inherit" position="static">
               <Tabs
                  value={val}
                  onChange={handleChange}
                  indicatorColor="primary"
                  textColor="secondary"
                  variant="fullWidth"
               >
                  <Tab label="Java" />
                  <Tab label="C++" />
               </Tabs>
            </AppBar>
            <SwipeableViews
               axis={theme.direction === "rtl" ? "x-reverse" : "x"}
               index={val}
               onChangeIndex={handleAnimateIdx}
            >
               <MyCustomTab value={val} index={0} dir={theme.direction}>
                  Java
               </MyCustomTab>
               <MyCustomTab value={val} index={1} dir={theme.direction}>
                  C++
               </MyCustomTab>
            </SwipeableViews>
            {fabData.map((fab, index) => (
               <Fade
                  key={fab.id}
                  in={val === index}
                  timeout={transitionDuration}
                  style={{
                     transitionDelay: `${
                        val === index ? transitionDuration.exit : 0
                     }ms`,
                  }}
                  unmountOnExit
               >
                  <Fab
                     sx={{ position: "absolute", bottom: 16, right: 16 }}
                     color="success"
                  >
                     <Add />
                  </Fab>
               </Fade>
            ))}
         </div>
      </div>
   );
}

Output

Conclusion

In this article we explored the process of animating action buttons in Material UI using React. We discussed the steps involved in creating these buttons and how various animations, like Zoom, Grow, Fade and others can be applied to add appeal. By incorporating these animations your application becomes visually appealing and engaging for users resulting in increased user engagement, on your website.