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:
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.
Javascript
//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; |
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
Contact Us