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>
60 lines (59 loc) • 1.78 kB
JavaScript
import { onMounted, watch } from "vue";
import { warning } from "hey-listen";
import { scroll } from "../external/.pnpm/framer-motion@12.5.0/external/framer-motion/dist/es/render/dom/scroll/index.mjs";
import { motionValue } from "../external/.pnpm/motion-dom@12.5.0/external/motion-dom/dist/es/value/index.mjs";
import "../external/.pnpm/motion-utils@12.5.0/external/motion-utils/dist/es/errors.mjs";
function refWarning(name, ref) {
warning(
Boolean(!ref || ref.value),
`You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref.`
);
}
function createScrollMotionValues() {
return {
scrollX: motionValue(0),
scrollY: motionValue(0),
scrollXProgress: motionValue(0),
scrollYProgress: motionValue(0)
};
}
function useScroll({
container,
target,
...options
} = {}) {
const values = createScrollMotionValues();
onMounted(() => {
refWarning("target", target);
refWarning("container", container);
});
watch(
[container, target, () => options.offset],
(n, o, onCleanup) => {
const cleanup = scroll(
(_progress, { x, y }) => {
values.scrollX.set(x.current);
values.scrollXProgress.set(x.progress);
values.scrollY.set(y.current);
values.scrollYProgress.set(y.progress);
},
{
...options,
container: (container == null ? void 0 : container.value) ?? void 0,
target: (target == null ? void 0 : target.value) ?? void 0
}
);
onCleanup(() => {
cleanup();
});
},
{
immediate: true,
flush: "post"
}
);
return values;
}
export {
useScroll
};