Control CSS keyframes animation progress with React-CodePudding

Let’s say I have a simple keyframes animation to move a box from left to right:

@keyframes mymove {
  0% {
    left: 0px;
  }
  20% {
    left: 200px;
  }
  100% {
    left: 250px;
  }
}

Is there a way to control this animation with a slider ranging from 0-100% in React? Meaning, the animation should always represent the state of the slider. If the slider is moved from 20% to 40% the animation should also be moved from 20% to 40% during that time.

Yes, I know that’s not the intended purpose of keyframes animations but I’d like to find a way regardless.

Here’s a CodeSandbox link: https://codesandbox.io/s/keyframe-experiment-96x5qy

CodePudding user response：

You can do it with style prop change on box without keyframes

Sandbox

Note that I'm using percentage for calculating left position, if you want to make it move further, you can modify left: progress "px" with your own calculation

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [progress, setProgress] = useState(0);

  return (
    <div>
      <h1>Progress: {progress}%</h1>
      <div  style={{ left: progress   "px" }}></div>
      <input
        type="range"
        min="0"
        max="100"
        value={progress}
        step="1"
        onInput={(e) => setProgress(e.target.value)}
      />
    </div>
  );
}

The style modification

.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  transition: left 1s; /*Added transition*/
}

CodePudding user response：

It is difficult to do it the way you want...

In case you only want to stop the keyframe while moving the range slider try this: sanbox

CSS:

.box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}

.animate {
  animation: mymove 5s infinite;
}

App.js:

export default function App() {
  const [progress, setProgress] = useState(0);
  const [moving, setMoving] = useState(false);

  return (
    <div>
      <h1>Progress: {progress}%</h1>
      <p>is moving: {moving ? "true" : "false"}</p>
      <div
        className={`box ${!moving && "animate"}`}
        style={{ left: `${progress}px` }}
      ></div>
      <input
        type="range"
        min="0"
        max="100"
        value={progress}
        step="1"
        onInput={(e) => {
          setMoving(true);
          setProgress(e.target.value);
        }}
        onm ouseUp={() => setMoving(false)}
      />
    </div>
  );
}

After the mouseUp event on the range slider, the keyframe animation starts all over again (from the 0%). You can also define keyframes as CSS in JS and change the values depending on the current position of the slider to start the animation from place where the box was moved.