We can create a die using react with plain CSS and framer-motion library for animating the same using the following approach:
Prerequisites:
- Knowledge of JavaScript (ES6)
- Knowledge of HTML/CSS.
- Basic knowledge of ReactJS.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app rolling-die
Step 2: After creating your project folder i.e. rolling-die, move to it using the following command:
cd rolling-die
Step 3: After creating the ReactJS application, Install the framer-motion modules using the following command:
$ npm install framer-motion
App.js: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Example:
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; |
App.css
body { overflow: hidden; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(180deg, 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, 1fr); grid-template-columns: repeat(2, 1fr); 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/, you will see the following output:
