motion-v
Version:
<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>
21 lines (20 loc) • 682 B
JavaScript
import { onBeforeUpdate, onUnmounted } from "vue";
import { frame, cancelFrame } from "../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
function useAnimationFrame(callback) {
let initialTimestamp = 0;
const provideTimeSinceStart = ({ timestamp, delta }) => {
if (!initialTimestamp)
initialTimestamp = timestamp;
callback(timestamp - initialTimestamp, delta);
};
const cancel = () => cancelFrame(provideTimeSinceStart);
onBeforeUpdate(() => {
cancel();
frame.update(provideTimeSinceStart, true);
});
onUnmounted(() => cancel());
frame.update(provideTimeSinceStart, true);
}
export {
useAnimationFrame
};