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
You can do it with style prop change on box without keyframes
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 class="box" 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*/
}
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);
}}
onMouseUp={() => 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.