motion-v
Version:
<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion for Vue</h1>
28 lines (27 loc) • 719 B
JavaScript
import { inView } from "framer-motion/dom";
import { ref, unref, watchEffect } from "vue";
import { unrefElement } from "@vueuse/core";
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 };