useAnimationFrame

1function MovingBall() {
2  // Note: Translating a ball like this is considered
3  // bad practice in React. We shouldn't modify the DOM
4  // directly, but it's just for demo
5
6  useAnimationFrame((time: DOMHighResTimeStamp) => {
7    const seconds = time / 1000;
8    const newPercentage = ((10 * seconds) % 100) + "%";
9    document.getElementById("moving-ball")!.style.left = newPercentage;
10  });
11
12  return (
13    <Box
14      position="relative"
15      height={16}
16      bgcolor="#0000ff"
17    >
18      <Box
19        id="moving-ball"
20        position="absolute"
21        width={16}
22        height={16}
23        borderRadius="50%"
24        bgcolor="#ff0000"
25      />
26    </Box>
27  );
28}

1function MovingBall() {
2  // Note: Translating a ball like this is considered
3  // bad practice in React. We shouldn't modify the DOM
4  // directly, but it's just for demo
5
6  useAnimationFrame((time: DOMHighResTimeStamp) => {
7    const seconds = time / 1000;
8    const newPercentage = ((10 * seconds) % 100) + "%";
9    document.getElementById("moving-ball")!.style.left = newPercentage;
10  });
11
12  return (
13    <Box
14      position="relative"
15      height={16}
16      bgcolor="#0000ff"
17    >
18      <Box
19        id="moving-ball"
20        position="absolute"
21        width={16}
22        height={16}
23        borderRadius="50%"
24        bgcolor="#ff0000"
25      />
26    </Box>
27  );
28}