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>
34 lines (33 loc) • 871 B
JavaScript
import { ref, watchEffect, unref } from "vue";
import { unrefElement } from "@vueuse/core";
import { inView } from "../external/.pnpm/framer-motion@12.23.12/external/framer-motion/dist/es/render/dom/viewport/index.mjs";
function useInView(domRef, options) {
const isInView = ref(false);
watchEffect((onCleanup) => {
const realOptions = unref(options) || {};
const { once } = realOptions;
const el = unrefElement(domRef);
if (!el || once && isInView.value) {
return;
}
const onEnter = () => {
isInView.value = true;
return once ? void 0 : () => {
isInView.value = false;
};
};
const cleanup = inView(el, onEnter, {
...realOptions,
root: unref(realOptions.root)
});
onCleanup(() => {
cleanup();
});
}, {
flush: "post"
});
return isInView;
}
export {
useInView
};