Open In App

How to create a rolling die using React and framer-motion ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

  1. JavaScript
  2. HTML
  3. CSS
  4. 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:

reactProjstructure

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: 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



Last Updated : 21 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads