use-animation-frame.mjs 782 B

123456789101112131415161718192021
  1. import { frame, cancelFrame } from 'motion-dom';
  2. import { useRef, useContext, useEffect } from 'react';
  3. import { MotionConfigContext } from '../context/MotionConfigContext.mjs';
  4. function useAnimationFrame(callback) {
  5. const initialTimestamp = useRef(0);
  6. const { isStatic } = useContext(MotionConfigContext);
  7. useEffect(() => {
  8. if (isStatic)
  9. return;
  10. const provideTimeSinceStart = ({ timestamp, delta }) => {
  11. if (!initialTimestamp.current)
  12. initialTimestamp.current = timestamp;
  13. callback(timestamp - initialTimestamp.current, delta);
  14. };
  15. frame.update(provideTimeSinceStart, true);
  16. return () => cancelFrame(provideTimeSinceStart);
  17. }, [callback]);
  18. }
  19. export { useAnimationFrame };