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>
32 lines (31 loc) • 1.06 kB
JavaScript
import { useMotionConfig } from "../../components/motion-config/context.mjs";
import { createScopedAnimate } from "framer-motion/dom";
import { computed, onUnmounted, ref } from "vue";
function useAnimate() {
const dom = ref(null);
const domProxy = new Proxy(dom, {
get(target, key) {
if (typeof key === "string" || typeof key === "symbol") {
if (key === "current") return Reflect.get(target, "value");
return Reflect.get(target, key);
}
},
set(target, key, value) {
if (key === "value") return Reflect.set(target, key, value?.$el || value);
if (key === "animations") return Reflect.set(target, key, value);
return true;
}
});
domProxy.animations = [];
const config = useMotionConfig();
const scopedAnimate = computed(() => createScopedAnimate({
scope: domProxy,
skipAnimations: config.value.skipAnimations
}));
const animate = ((...args) => scopedAnimate.value(...args));
onUnmounted(() => {
domProxy.animations.forEach((animation) => animation.stop());
});
return [domProxy, animate];
}
export { useAnimate };