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>
29 lines (28 loc) • 915 B
JavaScript
import { onUnmounted } from "vue";
import { motionValue } from "../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/value/index.mjs";
import { cancelFrame, frame } from "../external/.pnpm/motion-dom@12.23.12/external/motion-dom/dist/es/frameloop/frame.mjs";
function useCombineMotionValues(combineValues) {
const value = motionValue(combineValues());
const updateValue = () => value.set(combineValues());
const scheduleUpdate = () => frame.preRender(updateValue, false, true);
let subscriptions;
const subscribe = (values) => {
subscriptions = values.map((v) => v.on("change", scheduleUpdate));
};
const unsubscribe = () => {
subscriptions.forEach((unsubscribe2) => unsubscribe2());
cancelFrame(updateValue);
};
onUnmounted(() => {
unsubscribe();
});
return {
subscribe,
unsubscribe,
value,
updateValue
};
}
export {
useCombineMotionValues
};