translate-x-fc.js

import React, { useCallback, useEffect, useRef, useState } from "react";

const intervalTime = 1000 / 60;

function TranslateX({ children, from, to, duration }) {
  const [x, setX] = useState(from);

  const lastTickRef = useRef(0);

  useEffect(() => {
    if (x >= to) lastTickRef.current = null;
  }, [x]);

  const animTick = useCallback((now) => {
    if (lastTickRef.current === null) return;

    if (now - lastTickRef.current >= intervalTime) {
      const stepX = (to - from) / (duration / intervalTime);
      setX((preX) => Math.min(to, preX + stepX));
      lastTickRef.current = now;
    }

    requestAnimationFrame(animTick);
  }, []);

  useEffect(() => {
    requestAnimationFrame(animTick);
  }, [animTick]);

  const style = { transform: `translateX(${x}px)` };
  return children(style);
}

export default function App() {
  return (
    <TranslateX from={0} to={500} duration={1000}>
      {(style) => {
        return <h1 style={style}>Translate Demo</h1>;
      }}
    </TranslateX>
  );
}