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:
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:
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.
//App.js import React, { useState,
useEffect
} from "react" ;
import { motion } from "framer-motion" ;
import "./App.css" ;
// Animation properties for the container // which is the face of the die const container = { hidden: { opacity: 1, scale: 0 },
visible: {
scale: [0, 1],
opacity: 1,
transition: {
staggerChildren: 0.5,
delayChildren: 0.5,
},
},
}; // Animation properties for the disc(s) that // denote(s) the number player gets after rolling the die const discsOnTheDie = { hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: [0.2, 1],
},
}; // Utility function to get the random number // from 1 t0 6 just like a physical die const rollTheDie = () => { return Math.floor(Math.random() * 7 + 1);
}; const App = () => { // Managing state of randomSize aka number on the die
// using useState hook
const [randomSize, setRandomSize] =
useState(rollTheDie());
const discNumbers = new Array(randomSize);
// Assigning 0 to randomSize to the array
for ( var i = 0; i < discNumbers.length; i++) {
discNumbers[i] = i;
}
useEffect(() => {
// This will fire on every change of randomSize
setRandomSize(rollTheDie());
}, [randomSize]);
return (
<div>
<motion.ul
className= "square-container"
variants={container}
initial= "hidden"
animate= "visible"
>
{ /* Mapping javascript array discNumbers */ }
{discNumbers.map((index) => (
<motion.li key={index}
className= "disc"
variants={discsOnTheDie} />
))}
</motion.ul>
<button
onClick={() => {
setRandomSize();
}}
>
{ " " }
ROLL{ " " }
</button>
</div>
);
}; export default App;
|
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