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>
26 lines (25 loc) • 803 B
JavaScript
import { createScopedAnimate } from "framer-motion/dom";
import { 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 animate = createScopedAnimate({ scope: domProxy });
onUnmounted(() => {
domProxy.animations.forEach((animation) => animation.stop());
});
return [domProxy, animate];
}
export { useAnimate };