motion-plus-vue
Version:
Motion Plus Vue
36 lines (35 loc) • 1.12 kB
JavaScript
import { useMotionValue as r, animate as c, useTransform as l, mix as g } from "motion-v";
import { computed as a, watch as v } from "vue";
import { useCursorState as d } from "../hooks/use-cursor-state/index.mjs";
import { usePointerPosition as B } from "../hooks/use-pointer-position.mjs";
function m(n, u, t) {
const s = r(0), e = r(0), o = r(0);
return v(() => t == null ? void 0 : t.value, (i) => {
if (typeof i == "number") {
c(o, 1);
const f = () => {
e.set(u * (n.get() - i));
};
return f(), n.on("change", f);
} else
c(o, 0);
}, {
immediate: !0,
flush: "post"
}), l(() => g(s.get(), e.get(), o.get()));
}
function P(n, u = 0.1) {
const t = d(), s = B(), e = a(() => t.value.targetBoundingBox && t.value.target === n.value), o = m(
s.x,
u,
a(() => e.value ? t.value.targetBoundingBox.left + t.value.targetBoundingBox.width / 2 : void 0)
), i = m(
s.y,
u,
a(() => e.value ? t.value.targetBoundingBox.top + t.value.targetBoundingBox.height / 2 : void 0)
);
return { x: o, y: i };
}
export {
P as useMagneticPull
};