Sign in Subscribe
ReactJS

Creating Stunning Bounce Animations in React with Material-UI and Framer Motion - Part 2

Kaviyarasu k

• 3 min read
Creating Stunning Bounce Animations in React with Material-UI and Framer Motion - Part 2

Welcome back to the second part of our tutorial on building captivating bounce animations in React using Material-UI and the powerful framer-motion library. In the previous part, we explored bounce-in transitions, and in this section, we'll delve into creating equally impressive bounce-out animations. Furthermore, we'll guide you through integrating these animations into a React project. Let's dive in!

Understanding Bounce-Out Transitions

Bounce-out transitions are essential for animating elements leaving the screen. They add a visually appealing effect as elements scale down, move in different directions, and fade out simultaneously. Let's break down the key components of these bounce-out transitions

1. varBounceOut

This animation smoothly scales down an element while decreasing its opacity, resulting in a bounce-out effect.

export const varBounceOut = { animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] } };

2. varBounceOutUp and varBounceOutDown

These animations move the element vertically (up or down) while also scaling and fading it out.

export const varBounceOutUp = { animate: { y: [-12, 24, -720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] } }; 
export const varBounceOutDown = { animate: { y: [12, -24, 720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] } };
# to install a specific version

3. varBounceOutLeft and varBounceOutRight

These animations move the element horizontally (left or right) while scaling and fading it out.

export const varBounceOutLeft = { animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] } }; 
export const varBounceOutRight = { animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] } };

These animations provide a versatile set of bounce-out effects that can be customized based on your design preferences.

Combining Bounce-In and Bounce-Out Transitions

To create a seamless transition between elements entering and leaving the screen, we can combine both bounce-in and bounce-out transitions. Here's an example of a combined transition called varBounceInAndOut.

import { varBounceIn, varBounceInUp, varBounceInDown, varBounceInLeft, varBounceInRight } from './BounceIn';
import { varBounceOut, varBounceOutUp, varBounceOutDown, varBounceOutLeft, varBounceOutRight } from './BounceOut';
// Combine bounce-in and bounce-out transitions

export const varBounceInAndOut = { 
initial: { opacity: 0, scale: 0.8 },
animate: { opacity: 1, scale: 1, transition: varBounceIn.animate.transition },
exit: { opacity: 0, scale: 0.8, transition: varBounceOut.animate } };

This combined transition seamlessly handles both entrance and exit animations, ensuring a smooth and visually appealing user experience.

Integrating Bounce Animations into a React Project

Now, let's guide you through the process of integrating these animations into a React project using Material-UI and framer-motion.

Step 1: Initialize a New React Project

npx create-react-app my-bounce-project cd my-bounce-project

Step 2: Install Dependencies

npm install framer-motion

Step 3: Create a Component with Bounce Animations

Create a file called ExampleComponent.jsx:

import { motion } from 'framer-motion'; 
import { varBounceInAndOut } from './your-animation-file'; 
// Replace with your actual animation file 
const ExampleComponent = () => 
{
return ( 
<motion.div initial={varBounceInAndOut.initial} animate={varBounceInAndOut.animate} exit={varBounceInAndOut.exit} >
{/* Your component content goes here */} 
<h1>Hello, Bounce World!</h1> </motion.div> ); }; 

export default ExampleComponent;

Step 4: Use the Component in App.js

Modify App.js to include the ExampleComponent:

import React from 'react'; 
import ExampleComponent from './ExampleComponent'; 
function App() { 
return ( 
<div className="App"> <ExampleComponent /> </div> 
); 
} 
export default App;

Step 5: Start the Development Server

Use the command npm start to start the server

Visit http://localhost:3000 to see your React app with stunning bounce animations in action.

Congratulations! You've successfully explored bounce-out transitions and integrated them into a React project. In this tutorial, we've combined bounce-in and bounce-out animations to create a seamless user experience. Feel free to customize and experiment with these animations to enhance the visual appeal of your React applications. Stay tuned for more tutorials on creating engaging user interfaces with React and animation libraries!

Mulecraft Footer