Garmaine Staff asked 2 years ago

So, I'm coding a roulette that spins sideways (right to left) and I want to know if there is any way I can dynamically use @keyframes, so I can use the translateX() with values according to the round result (The Roulette is in a background image). E.g: The round result is 5. The client receives the result from the server and the roulette translates X pixels to stop in the corresponding number.

Here is the roulette code:

import React, { useState, useEffect } from "react";
import { socket } from "../../App.js";

import "./roulette.css";

export default class Roulette extends React.Component {
  constructor(props) {
    this.socket = socket;
    this.roulette = React.createRef();
    this.state = {
      result: null,

  componentDidMount() {
      backgroundPositionX: (this.roulette.current.offsetWidth - 78) / 2
    this.socket.on("roulette.roll", position => {
      //TODO: Retrieve from the server how much pixels should be translated  

  render() {
    return (
      <div className="main-r flex items-center justify-center">
        <div ref={this.roulette} className="roulette relative">
            style={{backgroundPosition: this.state.backgroundPositionX + "px" + "0"}
            className="roulette-bg h-full w-full" //The roulette background image, that is suposed to translate when the result is give is in this div
          <div className="roulette-marker absolute"></div>