How to create a rolling die using React and framer-motion ?
We can create a die using react with plain CSS and framer-motion library for animating, Framer Motion library helps to animate the UI elements.
Prerequisites:
- JavaScript
- HTML
- CSS
- ReactJS
Steps to Create the React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app myapp
Step 2: After creating your project folder i.e. rolling-die, move to it using the following command:
cd myapp
Step 3: After creating the ReactJS application, Install the framer-motion modules using the following command:
$ npm install framer-motion
Project Structure:
Project Structure
package.json:
"dependencies": {
"framer-motion": "^10.16.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Approach: This React component creates a dice-rolling animation using Framer Motion. It defines animations for the container and individual discs on the die. The `rollTheDie` function generates a random number representing the die face. The component uses the `useState` hook to manage the random number state and the `useEffect` hook to update it. The UI displays a list of discs based on the random number and a button to trigger a new roll. Framer Motion is utilized for smooth animations, and the code is structured for readability and reusability.
Example: Below is the practical implementation of the of the rolling die using ReactJS and framer-motion.
Javascript
import React,
{
useState,
useEffect
}
from "react" ;
import { motion }
from "framer-motion" ;
import "./App.css" ;
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
scale: [0, 1],
opacity: 1,
transition: {
staggerChildren: 0.5,
delayChildren: 0.5,
},
},
};
const discsOnTheDie = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: [0.2, 1],
},
};
const rollTheDie = () => {
return Math.floor(Math.random() * 7 + 1);
};
const App = () => {
const [randomSize, setRandomSize] =
useState(rollTheDie());
const discNumbers = new Array(randomSize);
for ( var i = 0; i < discNumbers.length; i++) {
discNumbers[i] = i;
}
useEffect(() => {
setRandomSize(rollTheDie());
}, [randomSize]);
return (
<div>
<motion.ul
className= "square-container"
variants={container}
initial= "hidden"
animate= "visible"
>
{ }
{discNumbers.map((index) => (
<motion.li key={index}
className= "disc"
variants={discsOnTheDie} />
))}
</motion.ul>
<button
onClick={() => {
setRandomSize();
}}
>
{ " " }
ROLL{ " " }
</button>
</div>
);
};
export default App;
|
CSS
body {
overflow : hidden ;
width : 100 vw;
height : 100 vh;
display : flex;
justify- content : center ;
align-items: center ;
background : linear-gradient( 180 deg, green , white );
}
.square-container {
display : grid;
width : 200px ;
height : 300px ;
border-radius: 50px ;
padding : 30px ;
gap: 20px ;
list-style : none ;
grid-template-rows: repeat ( 3 , 1 fr);
grid-template-columns: repeat ( 2 , 1 fr);
background : rgba( 255 , 255 , 255 , 0.2 );
}
. disc {
background : white ;
border-radius: 100% ;
justify- content : center ;
align-items: center ;
}
button {
text-decoration : none ;
display : inline- block ;
margin-left : 80px ;
border : none ;
color : white ;
padding : 15px 32px ;
text-align : center ;
font-size : 16px ;
font-weight : 900 ;
border-radius: 50px ;
background-color : #4caf50 ;
}
|
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000
Last Updated :
21 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...