@juleshry/vue-animejs 0.1.0

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License
+
+Copyright (c) 2025-present Jules Hery
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,304 @@
+<div align="center">
+  <img src="./docs/src/public/icon.png" alt="vue-animejs" width="120" />
+
+  <h1 align="center">vue-animejs</h1>
+  <p align="center">Vue 3 composables for <a href="https://animejs.com/">Anime.js</a> v4 — reactive animations that integrate naturally with Vue's reactivity system and component lifecycle.</p>
+</div>
+
+> [!WARNING]
+> This library is a work in progress. The API is not stable and may change at any time.
+
+## 🚀 Overview
+
+**vue-animejs** wraps Anime.js v4 as idiomatic Vue 3 composables. It integrates with Vue's reactivity system — pass a `ref` as a target or option and the animation updates automatically. Lifecycle cleanup is handled for you.
+
+**Before** — raw Anime.js in a Vue component:
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef, onMounted, onUnmounted } from 'vue'
+import { animate } from 'animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+let animation
+
+onMounted(() => {
+  if (!el.value) {
+    console.warn('Targets element is null or undefined')
+    return
+  }
+  
+  animation = animate(el.value, { translateX: 250, duration: 800 })
+})
+
+onUnmounted(() => {
+  animation?.cancel()
+})
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
+**After** — with vue-animejs:
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useAnimate } from '@juleshry/vue-animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+useAnimate(el, { translateX: 250, duration: 800 })
+</script>
+
+<template>
+  <div ref="el" />
+</template>
+```
+
+## 📦 Requirements
+
+- Vue 3.5+
+- Anime.js 4+
+- @vueuse/core 14+
+
+## 🦄 Composables
+
+| Composable      | Description                                       |
+|-----------------|---------------------------------------------------|
+| `useAnimate`    | Animate a DOM target with reactive params         |
+| `useTimer`      | Drive a timer with full playback control          |
+| `useTimeline`   | Sequence multiple animations on a shared timeline |
+| `useAnimatable` | Create a reactive animatable object               |
+| `useDraggable`  | Make a DOM element draggable with full control    |
+| `useLayout`     | Animate DOM layout changes (reorder, add, remove) |
+| `useScope`      | Create an Anime.js scope with lifecycle management |
+| `useText`       | Split text into animatable lines, words, and chars |
+
+## 🚀 Usage
+
+### `useAnimate`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useAnimate } from '@juleshry/vue-animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+const { play, pause } = useAnimate(el, {
+  translateX: 250,
+  duration: 800,
+  easing: 'easeInOutQuad',
+})
+</script>
+
+<template>
+  <div ref="el" />
+  <button @click="play">Play</button>
+  <button @click="pause">Pause</button>
+</template>
+```
+
+### `useTimer`
+
+```vue
+<script setup lang="ts">
+import { useTimer } from '@juleshry/vue-animejs'
+
+const { play, pause } = useTimer({
+  duration: 3000,
+  onUpdate: (self) => console.log(self.currentTime),
+})
+</script>
+```
+
+### `useTimeline`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useTimeline } from '@juleshry/vue-animejs'
+
+const box = useTemplateRef<HTMLElement>('box')
+
+const { add, play } = useTimeline({ loop: true })
+
+add(box, { translateX: 100 })
+add(box, { translateY: 50 }, '+=200')
+play()
+</script>
+```
+
+### `useAnimatable`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useAnimatable } from '@juleshry/vue-animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+const { animatable } = useAnimatable(el, {
+  x: 0,
+  opacity: 1,
+})
+</script>
+```
+
+### `useDraggable`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useDraggable } from '@juleshry/vue-animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+const { disable, enable } = useDraggable(el, {
+  onGrab: () => console.log('grabbed'),
+  onDrag: () => console.log('dragging'),
+  onRelease: () => console.log('released'),
+})
+</script>
+
+<template>
+  <div ref="el" />
+  <button @click="disable">Disable</button>
+  <button @click="enable">Enable</button>
+</template>
+```
+
+### `useLayout`
+
+> **Note:** Vue's DOM updates are asynchronous. Use `await nextTick()` between the state change and `animate()` so Anime.js reads the updated positions.
+
+```vue
+<script setup lang="ts">
+import { nextTick, ref, useTemplateRef } from 'vue'
+import { useLayout } from '@juleshry/vue-animejs'
+
+const list = useTemplateRef<HTMLElement>('list')
+const { record, animate } = useLayout(list, {})
+
+const items = ref([1, 2, 3, 4, 5])
+
+async function shuffle() {
+  record()
+  items.value = [...items.value].sort(() => Math.random() - 0.5)
+  await nextTick()
+  animate({ duration: 600 })
+}
+</script>
+
+<template>
+  <ul ref="list">
+    <li v-for="item in items" :key="item">{{ item }}</li>
+  </ul>
+  <button @click="shuffle">Shuffle</button>
+</template>
+```
+
+When you mutate the DOM directly with `classList.toggle`, the change is synchronous — no `nextTick` needed:
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useLayout } from '@juleshry/vue-animejs'
+
+const container = useTemplateRef<HTMLElement>('container')
+const { update } = useLayout(container, {})
+
+function toggleLayout() {
+  update(() => {
+    container.value!.classList.toggle('grid')
+  }, { duration: 600 })
+}
+</script>
+
+<template>
+  <div ref="container" class="grid">
+    <div v-for="i in 6" :key="i" class="item" />
+  </div>
+  <button @click="toggleLayout">Toggle layout</button>
+</template>
+```
+
+### `useScope`
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useAnimate, useScope } from '@juleshry/vue-animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+const { add, revert } = useScope({ mediaQuery: '(prefers-reduced-motion: no-preference)' })
+
+// Animations added via add() are automatically reverted when the scope reverts
+// or when the component unmounts
+add(scope => {
+  useAnimate(el, { translateX: 250, duration: 800 })
+})
+</script>
+
+<template>
+  <div ref="el" />
+  <button @click="revert">Revert</button>
+</template>
+```
+
+### `useText`
+
+> **Note:** `words`, `chars`, and `lines` are `ComputedRef<HTMLElement[]>` — they populate after mount and can be passed directly to `useAnimate`.
+
+```vue
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import { useAnimate, useText } from '@juleshry/vue-animejs'
+import { stagger } from 'animejs'
+
+const el = useTemplateRef<HTMLElement>('el')
+
+const { words, chars } = useText(el, { words: true, chars: true })
+
+// words and chars are ComputedRef<HTMLElement[]> — pass them directly as targets
+useAnimate(words, {
+  y: ['100%', '0%'],
+  duration: 600,
+  delay: stagger(50),
+})
+</script>
+
+<template>
+  <p ref="el">Hello, world!</p>
+</template>
+```
+
+## 👨‍🚀 Contributors
+
+<a href="https://github.com/juleshry/vue-animejs/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=juleshry/vue-animejs" alt="Contributors" />
+</a>
+
+## 🌸 Thanks
+
+- [Anime.js](https://animejs.com/) by [Julian Garnier](https://github.com/juliangarnier) — the animation engine powering this library
+- [VueUse](https://vueuse.org/) by [Anthony Fu](https://github.com/antfu) — inspiration for composable conventions and element ref patterns
+
+## 🧱 Contributing
+
+See the [Contributing Guide](./CONTRIBUTING.md).
+
+## 🗺️ TODO
+
+- [ ] Allow reactive refs inside option objects
+- [ ] Publish the first version to `npm`
+- [ ] Write Doc
+- [ ] Deploy the docs website
+
+## 📄 License
+
+[MIT](./LICENSE.md) © 2025-present [Jules Hery](https://github.com/juleshry)

package/dist/composables/use-animatable.d.ts

@@ -0,0 +1,7 @@
+import { type AnimatableObject, type AnimatableParams, type TargetsParam } from "animejs";
+import { type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+export interface UseAnimatableReturn {
+    animatable: DeepReadonly<ShallowRef<AnimatableObject | undefined>>;
+    revert: () => AnimatableObject | undefined;
+}
+export declare function useAnimatable(targets: MaybeRef<TargetsParam>, options?: MaybeRef<AnimatableParams>): UseAnimatableReturn;

package/dist/composables/use-animate.d.ts

@@ -0,0 +1,40 @@
+import { type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+import { type JSAnimation, type TargetSelector, type AnimationParams } from "animejs";
+import { type MaybeComputedElementRef } from "@vueuse/core";
+export interface UseAnimateReturn {
+    /** The underlying Anime.js animation instance. `undefined` until the target is available. */
+    animation: DeepReadonly<ShallowRef<JSAnimation | undefined>>;
+    /** Starts or resumes the animation. */
+    play: () => JSAnimation | undefined;
+    /** Reverses playback direction. */
+    reverse: () => JSAnimation | undefined;
+    /** Pauses the animation at the current position. */
+    pause: () => JSAnimation | undefined;
+    /** Restarts the animation from the beginning. */
+    restart: () => JSAnimation | undefined;
+    /** Toggles between forward and reverse direction. */
+    alternate: () => JSAnimation | undefined;
+    /** Resumes from a paused state. */
+    resume: () => JSAnimation | undefined;
+    /** Jumps immediately to the end of the animation. */
+    complete: () => JSAnimation | undefined;
+    /** Stops the animation and removes it from the Anime.js engine. */
+    cancel: () => JSAnimation | undefined;
+    /** Cancels the animation and restores all animated properties to their original values. */
+    revert: () => JSAnimation | undefined;
+    /** Resets the animation to its initial state. Pass `true` for a soft reset that preserves the current cycle. */
+    reset: (softReset?: boolean) => JSAnimation | undefined;
+    /** Seeks to a specific time (in ms). */
+    seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => JSAnimation | undefined;
+    /** Rescales the animation to a new total duration. */
+    stretch: (newDuration: number) => JSAnimation | undefined;
+    /** Re-reads the current values of animated properties from the DOM. */
+    refresh: () => JSAnimation | undefined;
+}
+/**
+ * Wraps Anime.js `animate()` into a Vue composable. Reactively re-creates the animation when the target or options change, and cancels it automatically on unmount.
+ *
+ * @param _target - The element(s) to animate. Accepts a template ref, a CSS selector, a DOM element, or a reactive ref to any of these.
+ * @param _options - Anime.js animation parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.
+ */
+export declare function useAnimate(_target: MaybeRef<TargetSelector> | MaybeComputedElementRef, _options?: MaybeRef<AnimationParams>): UseAnimateReturn;

package/dist/composables/use-draggable.d.ts

@@ -0,0 +1,16 @@
+import { type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+import { type Draggable, type DraggableParams, type TargetsParam, type EasingParam } from "animejs";
+export interface UseDraggableReturn {
+    draggable: DeepReadonly<ShallowRef<Draggable | undefined>>;
+    disable: () => void;
+    enable: () => void;
+    setX: (x: number, muteUpdateCallback?: boolean) => void;
+    setY: (y: number, muteUpdateCallback?: boolean) => void;
+    animateInView: (duration?: number, gap?: number, ease?: EasingParam) => void;
+    scrollInView: (duration?: number, gap?: number, ease?: EasingParam) => void;
+    stop: () => void;
+    reset: () => void;
+    revert: () => void;
+    refresh: () => void;
+}
+export declare function useDraggable(targets: MaybeRef<TargetsParam>, options?: MaybeRef<DraggableParams>): UseDraggableReturn;

package/dist/composables/use-layout.d.ts

@@ -0,0 +1,11 @@
+import { type MaybeComputedElementRef } from "@vueuse/core";
+import { type AutoLayout, type AutoLayoutParams, type DOMTargetSelector, type LayoutAnimationParams, type Timeline } from "animejs";
+import { type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+export interface UseLayoutReturn {
+    layout: DeepReadonly<ShallowRef<AutoLayout | undefined>>;
+    record: () => void;
+    animate: (params?: LayoutAnimationParams) => Timeline | undefined;
+    update: (callback: (layout: AutoLayout) => void, params?: LayoutAnimationParams) => void;
+    revert: () => void;
+}
+export declare function useLayout(root: MaybeRef<DOMTargetSelector> | MaybeComputedElementRef, params: MaybeRef<AutoLayoutParams>): UseLayoutReturn;

package/dist/composables/use-raw-animate.d.ts

@@ -0,0 +1,6 @@
+import { AnimationParams, TargetSelector } from "animejs";
+import { MaybeRef } from "vue";
+export interface UseRawAnimateReturn {
+    animate: (target: TargetSelector, options: AnimationParams) => void;
+}
+export declare function useRawAnimate(_target: MaybeRef<TargetSelector>, _options?: MaybeRef<AnimationParams>): import("animejs").JSAnimation;

package/dist/composables/use-scope.d.ts

@@ -0,0 +1,12 @@
+import { type Scope, type ScopeMethod, type ScopeParams, type Tickable } from "animejs";
+import { type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+export interface UseScopeReturn {
+    scope: DeepReadonly<ShallowRef<Scope>>;
+    add: (method: ScopeMethod) => void;
+    registerMethod: (methodName: string, method: ScopeMethod) => void;
+    addOnce: (method: ScopeMethod) => void;
+    keepTime: (method: (scope: Scope) => Tickable) => void;
+    revert: () => void;
+    refresh: () => void;
+}
+export declare function useScope(params: MaybeRef<ScopeParams>): UseScopeReturn;

package/dist/composables/use-svg.d.ts

@@ -0,0 +1,8 @@
+import { type TargetsParam } from "animejs";
+import { type MaybeRef } from "vue";
+export interface UseSvgReturn {
+    morphTo: (path: MaybeRef<TargetsParam>, precision?: MaybeRef<number>) => void;
+    createDrawable: (selector: MaybeRef<TargetsParam>, start?: MaybeRef<number>, end?: MaybeRef<number>) => void;
+    createMotionPath: (path: MaybeRef<TargetsParam>, offset?: MaybeRef<number>) => void;
+}
+export declare function useSvg(): UseSvgReturn;

package/dist/composables/use-text.d.ts

@@ -0,0 +1,12 @@
+import { type TextSplitter, type TextSplitterParams } from "animejs";
+import { type MaybeComputedElementRef } from "@vueuse/core";
+import { type ComputedRef, type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+export interface UseTextReturn {
+    splitter: DeepReadonly<ShallowRef<TextSplitter | undefined>>;
+    lines: ComputedRef<HTMLElement[]>;
+    words: ComputedRef<HTMLElement[]>;
+    chars: ComputedRef<HTMLElement[]>;
+    revert: () => void;
+    refresh: () => void;
+}
+export declare function useText(_target: MaybeRef<HTMLElement | NodeList | string | HTMLElement[]> | MaybeComputedElementRef, _params?: MaybeRef<TextSplitterParams>): UseTextReturn;

package/dist/composables/use-timeline.d.ts

@@ -0,0 +1,60 @@
+import { type MaybeRef, type ShallowRef, type DeepReadonly } from "vue";
+import { type AnimationParams, type Callback, type StaggerFunction, type TargetsParam, type Tickable, type Timeline, type TimelineParams, type TimelinePosition, type Timer } from "animejs";
+export type TimelineChain = Timeline & {
+    /** Adds an animation to the timeline and returns a chainable object. */
+    add: (targets: MaybeRef<TargetsParam>, params: AnimationParams, position?: TimelinePosition | StaggerFunction<number | string>) => TimelineChain;
+    /** Sets a property to a value at a point in the timeline without animating it, then returns a chainable object. */
+    set: (targets: MaybeRef<TargetsParam>, params: AnimationParams, position?: TimelinePosition) => TimelineChain;
+    /** Removes an animation target (or a specific property) from the timeline and returns a chainable object. */
+    remove: (targets: MaybeRef<TargetsParam>, propertyName?: string) => TimelineChain;
+};
+export interface UseTimelineReturn {
+    /** The underlying Anime.js timeline instance. */
+    timeline: DeepReadonly<ShallowRef<Timeline>>;
+    /** Adds an animation to the timeline. Accepts a template ref or any valid Anime.js target. Returns a chainable object. */
+    add: (targets: MaybeRef<TargetsParam>, params: AnimationParams, position?: TimelinePosition | StaggerFunction<number | string>) => TimelineChain;
+    /** Sets a property to a value at a point in the timeline without animating it. Returns a chainable object. */
+    set: (targets: MaybeRef<TargetsParam>, params: AnimationParams, position?: TimelinePosition) => TimelineChain;
+    /** Removes an animation target (or a specific property) from the timeline. Returns a chainable object. */
+    remove: (targets: MaybeRef<TargetsParam>, propertyName?: string) => TimelineChain;
+    /** Synchronises another tickable (animation, timer) into the timeline at the given position. */
+    sync: (synced?: Tickable, position?: TimelinePosition) => Timeline;
+    /** Adds a named label at a position so it can be referenced by `.add()` or `.seek()`. */
+    label: (labelName: string, position?: TimelinePosition) => Timeline;
+    /** Inserts a callback function at a specific point in the timeline. */
+    call: (callback: Callback<Timer>, position?: TimelinePosition) => Timeline;
+    /** Renders the timeline once without playing it. */
+    init: (internalRender?: boolean) => Timeline;
+    /** Starts or resumes the timeline. */
+    play: () => Timeline;
+    /** Reverses playback direction. */
+    reverse: () => Timeline;
+    /** Pauses the timeline at the current position. */
+    pause: () => Timeline;
+    /** Restarts the timeline from the beginning. */
+    restart: () => Timeline;
+    /** Toggles between forward and reverse direction. */
+    alternate: () => Timeline;
+    /** Resumes from a paused state. */
+    resume: () => Timeline;
+    /** Jumps immediately to the end of the timeline. */
+    complete: () => Timeline;
+    /** Resets the timeline to its initial state. Pass `true` for a soft reset that preserves the current cycle. */
+    reset: (softReset?: boolean) => Timeline;
+    /** Stops the timeline and removes it from the Anime.js engine. */
+    cancel: () => Timeline;
+    /** Cancels the timeline and restores all animated properties to their original values. */
+    revert: () => Timeline;
+    /** Seeks to a specific time (in ms). */
+    seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timeline;
+    /** Rescales the timeline to a new total duration. */
+    stretch: (newDuration: number) => Timeline;
+    /** Re-reads the current values of all animated properties from the DOM. */
+    refresh: () => Timeline;
+}
+/**
+ * Wraps Anime.js `createTimeline()` into a Vue composable. Reactively re-creates the timeline when options change, and cancels it automatically on unmount.
+ *
+ * @param options - Anime.js timeline parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.
+ */
+export declare function useTimeline(options?: MaybeRef<TimelineParams>): UseTimelineReturn;

package/dist/composables/use-timer.d.ts

@@ -0,0 +1,18 @@
+import { type Timer, type TimerParams } from "animejs";
+import { type MaybeRef, type ShallowRef, type DeepReadonly } from "vue";
+export interface UseTimerReturn {
+    timer: DeepReadonly<ShallowRef<Timer>>;
+    play: () => Timer;
+    reverse: () => Timer;
+    pause: () => Timer;
+    restart: () => Timer;
+    alternate: () => Timer;
+    resume: () => Timer;
+    complete: () => Timer;
+    reset: (softReset?: boolean) => Timer;
+    cancel: () => Timer;
+    revert: () => Timer;
+    seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timer;
+    stretch: (newDuration: number) => Timer;
+}
+export declare function useTimer(options?: MaybeRef<TimerParams>): UseTimerReturn;

package/dist/composables/use-waapi.d.ts

@@ -0,0 +1,19 @@
+import { type MaybeComputedElementRef } from "@vueuse/core";
+import { type WAAPIAnimationParams, type DOMTargetsParam, type WAAPIAnimation, type EasingFunction } from "animejs";
+import { DeepReadonly, type MaybeRef, ShallowRef } from "vue";
+export interface UseWaapiReturn {
+    animation: DeepReadonly<ShallowRef<WAAPIAnimation | undefined>>;
+    resume: () => WAAPIAnimation | undefined;
+    pause: () => WAAPIAnimation | undefined;
+    alternate: () => WAAPIAnimation | undefined;
+    play: () => WAAPIAnimation | undefined;
+    reverse: () => WAAPIAnimation | undefined;
+    seek: (time: MaybeRef<number>, muteCallbacks?: MaybeRef<boolean>) => WAAPIAnimation | undefined;
+    restart: () => WAAPIAnimation | undefined;
+    commitStyles: () => WAAPIAnimation | undefined;
+    complete: () => WAAPIAnimation | undefined;
+    cancel: () => WAAPIAnimation | undefined;
+    revert: () => WAAPIAnimation | undefined;
+    convertEase: (fn: MaybeRef<EasingFunction>, samples?: MaybeRef<number>) => string;
+}
+export declare function useWaapi(targets: MaybeRef<DOMTargetsParam> | MaybeComputedElementRef, options?: MaybeRef<WAAPIAnimationParams>): UseWaapiReturn;

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+export { useAnimate, type UseAnimateReturn } from "./composables/use-animate.ts";
+export { useRawAnimate, type UseRawAnimateReturn } from "./composables/use-raw-animate.ts";
+export { useTimer, type UseTimerReturn } from "./composables/use-timer.ts";
+export { useTimeline, type TimelineChain, type UseTimelineReturn } from "./composables/use-timeline.ts";
+export { useAnimatable, type UseAnimatableReturn } from "./composables/use-animatable.ts";
+export { useDraggable, type UseDraggableReturn } from "./composables/use-draggable.ts";
+export { useLayout, type UseLayoutReturn } from "./composables/use-layout.ts";
+export { useSvg, type UseSvgReturn } from "./composables/use-svg.ts";
+export { useText, type UseTextReturn } from "./composables/use-text.ts";
+export { useWaapi, type UseWaapiReturn } from "./composables/use-waapi.ts";
+export { useScope, type UseScopeReturn } from "./composables/use-scope.ts";

package/dist/index.js

@@ -0,0 +1,573 @@
+import { computed as e, isRef as t, readonly as n, shallowReadonly as r, shallowRef as i, unref as a, watch as o } from "vue";
+import { animate as s, createAnimatable as c, createDraggable as l, createLayout as u, createScope as d, createTimeline as f, createTimer as p, splitText as m, svg as h, waapi as g } from "animejs";
+import { tryOnMounted as _, tryOnUnmounted as v, unrefElement as y } from "@vueuse/core";
+//#region src/composables/use-animate.ts
+function b(e, r = {}) {
+	let c = i();
+	function l() {
+		return y(e) ?? a(e);
+	}
+	let { stop: u } = o([l, () => a(r)], ([e, t]) => {
+		d(e, t);
+	}, {
+		flush: "post",
+		immediate: !t(e)
+	});
+	v(() => {
+		u(), x();
+	});
+	function d(e, t) {
+		if (S(), !e) {
+			console.warn("Target element is null or undefined"), c.value = void 0;
+			return;
+		}
+		c.value = s(e, t);
+	}
+	function f() {
+		return c.value?.play();
+	}
+	function p() {
+		return c.value?.reverse();
+	}
+	function m() {
+		return c.value?.pause();
+	}
+	function h() {
+		return c.value?.restart();
+	}
+	function g() {
+		return c.value?.alternate();
+	}
+	function _() {
+		return c.value?.resume();
+	}
+	function b() {
+		return c.value?.complete();
+	}
+	function x() {
+		return c.value?.cancel();
+	}
+	function S() {
+		return c.value?.revert();
+	}
+	function C(e) {
+		return c.value?.reset(e);
+	}
+	function w(e, t, n) {
+		return c.value?.seek(e, t, n);
+	}
+	function T(e) {
+		return c.value?.stretch(e);
+	}
+	function E() {
+		return c.value?.refresh();
+	}
+	return {
+		animation: n(c),
+		play: f,
+		reverse: p,
+		pause: m,
+		restart: h,
+		alternate: g,
+		resume: _,
+		complete: b,
+		cancel: x,
+		revert: S,
+		reset: C,
+		seek: w,
+		stretch: T,
+		refresh: E
+	};
+}
+//#endregion
+//#region src/composables/use-raw-animate.ts
+function x(e, t = {}) {
+	let n = a(e);
+	return n || console.warn("Target is undefined"), s(n, a(t));
+}
+//#endregion
+//#region src/composables/use-timer.ts
+function S(e = {}) {
+	let t = i(p(a(e))), { stop: r } = o(() => a(e), (e) => {
+		g(), t.value = p(e);
+	}, { deep: 1 });
+	v(() => {
+		r(), g();
+	});
+	function s() {
+		return t.value.play();
+	}
+	function c() {
+		return t.value.reverse();
+	}
+	function l() {
+		return t.value.pause();
+	}
+	function u() {
+		return t.value.restart();
+	}
+	function d() {
+		return t.value.alternate();
+	}
+	function f() {
+		return t.value.resume();
+	}
+	function m() {
+		return t.value.complete();
+	}
+	function h(e) {
+		return t.value.reset(e);
+	}
+	function g() {
+		return t.value.cancel();
+	}
+	function _() {
+		return t.value.revert();
+	}
+	function y(e, n, r) {
+		return t.value.seek(e, n, r);
+	}
+	function b(e) {
+		return t.value.stretch(e);
+	}
+	return {
+		timer: n(t),
+		play: s,
+		reverse: c,
+		pause: l,
+		restart: u,
+		alternate: d,
+		resume: f,
+		complete: m,
+		reset: h,
+		cancel: g,
+		revert: _,
+		seek: y,
+		stretch: b
+	};
+}
+//#endregion
+//#region src/composables/use-timeline.ts
+function C(e = {}) {
+	let t = !1, r = [], s = i(f(a(e)));
+	function c() {
+		for (let e of r) e.type === "add" ? s.value.add(a(e.targets), e.params, e.position) : s.value.set(a(e.targets), e.params, e.position);
+	}
+	let { stop: l } = o(() => a(e), (e) => {
+		k(), s.value = f(e), c();
+	}, {
+		flush: "post",
+		deep: 1
+	});
+	_(() => {
+		t = !0, c();
+	}), v(() => {
+		l(), O();
+	});
+	function u(e, n, i) {
+		return r.push({
+			type: "add",
+			targets: e,
+			params: n,
+			position: i
+		}), t ? {
+			...s.value.add(a(e), n, i),
+			add: u,
+			set: d,
+			remove: p
+		} : {
+			...s.value,
+			add: u,
+			set: d,
+			remove: p
+		};
+	}
+	function d(e, n, i) {
+		return r.push({
+			type: "set",
+			targets: e,
+			params: n,
+			position: i
+		}), t ? {
+			...s.value.set(a(e), n, i),
+			add: u,
+			set: d,
+			remove: p
+		} : {
+			...s.value,
+			add: u,
+			set: d,
+			remove: p
+		};
+	}
+	function p(e, n) {
+		return t ? {
+			...s.value.remove(a(e), n),
+			add: u,
+			set: d,
+			remove: p
+		} : (console.warn("Cannot remove from timeline before mount"), {
+			...s.value,
+			add: u,
+			set: d,
+			remove: p
+		});
+	}
+	function m(e, t) {
+		return s.value.sync(e, t);
+	}
+	function h(e, t) {
+		return s.value.label(e, t);
+	}
+	function g(e, t) {
+		return s.value.call(e, t);
+	}
+	function y(e) {
+		return s.value.init(e);
+	}
+	function b() {
+		return s.value.play();
+	}
+	function x() {
+		return s.value.reverse();
+	}
+	function S() {
+		return s.value.pause();
+	}
+	function C() {
+		return s.value.restart();
+	}
+	function w() {
+		return s.value.alternate();
+	}
+	function T() {
+		return s.value.resume();
+	}
+	function E() {
+		return s.value.complete();
+	}
+	function D(e) {
+		return s.value.reset(e);
+	}
+	function O() {
+		return s.value.cancel();
+	}
+	function k() {
+		return s.value.revert();
+	}
+	function A(e, t, n) {
+		return s.value.seek(e, t, n);
+	}
+	function j(e) {
+		return s.value.stretch(e);
+	}
+	function M() {
+		return s.value.refresh();
+	}
+	return {
+		timeline: n(s),
+		add: u,
+		set: d,
+		sync: m,
+		label: h,
+		remove: p,
+		call: g,
+		init: y,
+		play: b,
+		reverse: x,
+		pause: S,
+		restart: C,
+		alternate: w,
+		resume: T,
+		complete: E,
+		reset: D,
+		cancel: O,
+		revert: k,
+		seek: A,
+		stretch: j,
+		refresh: M
+	};
+}
+//#endregion
+//#region src/composables/use-animatable.ts
+function w(r, s = {}) {
+	let l = i(), { stop: u } = o(e(() => ({
+		el: a(r),
+		opt: a(s)
+	})), ({ el: e, opt: t }) => {
+		if (d(), !e) {
+			console.warn("Targets element is null or undefined"), l.value = void 0;
+			return;
+		}
+		l.value = c(e, t);
+	}, {
+		flush: "post",
+		immediate: !t(r)
+	});
+	v(() => {
+		u(), d();
+	});
+	function d() {
+		return l.value?.revert();
+	}
+	return {
+		animatable: n(l),
+		revert: d
+	};
+}
+//#endregion
+//#region src/composables/use-draggable.ts
+function T(e, r = {}) {
+	let s = i(), { stop: c } = o([() => a(e), () => a(r)], ([e, t]) => {
+		if (y(), !e) {
+			console.warn("Targets element is null or undefined"), s.value = void 0;
+			return;
+		}
+		s.value = l(e, t);
+	}, {
+		flush: "post",
+		immediate: !t(e)
+	});
+	v(() => {
+		y(), c();
+	});
+	function u() {
+		return s.value?.disable();
+	}
+	function d() {
+		return s.value?.enable();
+	}
+	function f(e, t) {
+		return s.value?.setX(e, t);
+	}
+	function p(e, t) {
+		return s.value?.setY(e, t);
+	}
+	function m(e, t, n) {
+		return s.value?.animateInView(e, t, n);
+	}
+	function h(e, t, n) {
+		return s.value?.scrollInView(e, t, n);
+	}
+	function g() {
+		return s.value?.stop();
+	}
+	function _() {
+		return s.value?.reset();
+	}
+	function y() {
+		return s.value?.revert();
+	}
+	function b() {
+		return s.value?.refresh();
+	}
+	return {
+		draggable: n(s),
+		disable: u,
+		enable: d,
+		setX: f,
+		setY: p,
+		animateInView: m,
+		scrollInView: h,
+		stop: g,
+		reset: _,
+		revert: y,
+		refresh: b
+	};
+}
+//#endregion
+//#region src/composables/use-layout.ts
+function E(e, r) {
+	let s = i(), { stop: c } = o([() => y(e) ?? a(e), () => a(r)], ([e, t]) => {
+		if (p(), !e) {
+			console.warn("Target element is null or undefined"), s.value = void 0;
+			return;
+		}
+		s.value = u(e, t);
+	}, {
+		flush: "post",
+		immediate: !t(e)
+	});
+	v(() => {
+		p(), c();
+	});
+	function l() {
+		return s.value?.record();
+	}
+	function d(e) {
+		return s.value?.animate(e);
+	}
+	function f(e, t) {
+		return s.value?.update(e, t);
+	}
+	function p() {
+		return s.value?.revert();
+	}
+	return {
+		layout: n(s),
+		record: l,
+		animate: d,
+		update: f,
+		revert: p
+	};
+}
+//#endregion
+//#region src/composables/use-svg.ts
+function D() {
+	function e(e, t) {
+		return h.morphTo(a(e), a(t));
+	}
+	function t(e, t, n) {
+		return h.createDrawable(a(e), a(t), a(n));
+	}
+	function n(e, t) {
+		return h.createMotionPath(a(e), a(t));
+	}
+	return {
+		morphTo: e,
+		createDrawable: t,
+		createMotionPath: n
+	};
+}
+//#endregion
+//#region src/composables/use-text.ts
+function O(r, s) {
+	let c = i(), l = e(() => c.value?.lines ?? []), u = e(() => c.value?.words ?? []), d = e(() => c.value?.chars ?? []);
+	function f() {
+		return y(r) ?? a(r);
+	}
+	let { stop: p } = o([f, () => a(s)], ([e, t]) => {
+		h(), c.value = void 0, e && (c.value = m(e, t));
+	}, {
+		flush: "post",
+		immediate: !t(r)
+	});
+	v(() => {
+		p(), c.value = void 0, h();
+	});
+	function h() {
+		c.value?.revert();
+	}
+	function g() {
+		c.value?.refresh();
+	}
+	return {
+		splitter: n(c),
+		lines: l,
+		words: u,
+		chars: d,
+		revert: h,
+		refresh: g
+	};
+}
+//#endregion
+//#region src/composables/use-waapi.ts
+function k(e, r = {}) {
+	let s = i(), { stop: c } = o([() => y(e) ?? a(e), () => a(r)], ([e, t]) => {
+		s.value = g.animate(e, t);
+	}, {
+		flush: "post",
+		immediate: !t(e)
+	});
+	v(() => {
+		c();
+	});
+	function l() {
+		return s.value?.resume();
+	}
+	function u() {
+		return s.value?.pause();
+	}
+	function d() {
+		return s.value?.alternate();
+	}
+	function f() {
+		return s.value?.play();
+	}
+	function p() {
+		return s.value?.reverse();
+	}
+	function m(e, t) {
+		return s.value?.seek(a(e), a(t));
+	}
+	function h() {
+		return s.value?.restart();
+	}
+	function _() {
+		return s.value?.commitStyles();
+	}
+	function b() {
+		return s.value?.complete();
+	}
+	function x() {
+		return s.value?.cancel();
+	}
+	function S() {
+		return s.value?.revert();
+	}
+	return {
+		animation: n(s),
+		resume: l,
+		pause: u,
+		alternate: d,
+		play: f,
+		reverse: p,
+		seek: m,
+		restart: h,
+		commitStyles: _,
+		complete: b,
+		cancel: x,
+		revert: S,
+		convertEase: A
+	};
+}
+function A(e, t = 100) {
+	return g.convertEase(a(e), a(t));
+}
+//#endregion
+//#region src/composables/use-scope.ts
+function j(e) {
+	let n = i(d(a(e))), s = [], c = [], l = [], u = !1, f = t(e) ? o(e, (e) => {
+		n.value.revert(), n.value = d(e);
+	}, { flush: "post" }) : void 0;
+	_(() => {
+		u = !0;
+		for (let e of s) n.value.add(e);
+		for (let [e, t] of c) n.value.add(e, t);
+		for (let e of l) n.value.addOnce(e);
+		s.length = 0, c.length = 0, l.length = 0;
+	}), v(() => {
+		n.value.revert(), f?.();
+	});
+	function p(e) {
+		return u ? n.value.add(e) : void s.push(e);
+	}
+	function m(e, t) {
+		return u ? n.value.add(e, t) : void c.push([e, t]);
+	}
+	function h(e) {
+		return u ? n.value.addOnce(e) : void l.push(e);
+	}
+	function g(e) {
+		return n.value.keepTime(e);
+	}
+	function y() {
+		return n.value.revert();
+	}
+	function b() {
+		return n.value.refresh();
+	}
+	return {
+		scope: r(n),
+		add: p,
+		registerMethod: m,
+		addOnce: h,
+		keepTime: g,
+		revert: y,
+		refresh: b
+	};
+}
+//#endregion
+export { w as useAnimatable, b as useAnimate, T as useDraggable, E as useLayout, x as useRawAnimate, j as useScope, D as useSvg, O as useText, C as useTimeline, S as useTimer, k as useWaapi };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/composables/use-animate.ts","../src/composables/use-raw-animate.ts","../src/composables/use-timer.ts","../src/composables/use-timeline.ts","../src/composables/use-animatable.ts","../src/composables/use-draggable.ts","../src/composables/use-layout.ts","../src/composables/use-svg.ts","../src/composables/use-text.ts","../src/composables/use-waapi.ts","../src/composables/use-scope.ts"],"sourcesContent":["import { type DeepReadonly, type MaybeRef, type ShallowRef, shallowRef, unref, watch, readonly, isRef } from \"vue\"\nimport { type JSAnimation, animate, type TargetSelector, type AnimationParams } from \"animejs\"\nimport { type MaybeComputedElementRef, tryOnUnmounted, unrefElement } from \"@vueuse/core\"\n\nexport interface UseAnimateReturn {\n  /** The underlying Anime.js animation instance. `undefined` until the target is available. */\n  animation: DeepReadonly<ShallowRef<JSAnimation | undefined>>\n  /** Starts or resumes the animation. */\n  play: () => JSAnimation | undefined\n  /** Reverses playback direction. */\n  reverse: () => JSAnimation | undefined\n  /** Pauses the animation at the current position. */\n  pause: () => JSAnimation | undefined\n  /** Restarts the animation from the beginning. */\n  restart: () => JSAnimation | undefined\n  /** Toggles between forward and reverse direction. */\n  alternate: () => JSAnimation | undefined\n  /** Resumes from a paused state. */\n  resume: () => JSAnimation | undefined\n  /** Jumps immediately to the end of the animation. */\n  complete: () => JSAnimation | undefined\n  /** Stops the animation and removes it from the Anime.js engine. */\n  cancel: () => JSAnimation | undefined\n  /** Cancels the animation and restores all animated properties to their original values. */\n  revert: () => JSAnimation | undefined\n  /** Resets the animation to its initial state. Pass `true` for a soft reset that preserves the current cycle. */\n  reset: (softReset?: boolean) => JSAnimation | undefined\n  /** Seeks to a specific time (in ms). */\n  seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => JSAnimation | undefined\n  /** Rescales the animation to a new total duration. */\n  stretch: (newDuration: number) => JSAnimation | undefined\n  /** Re-reads the current values of animated properties from the DOM. */\n  refresh: () => JSAnimation | undefined\n}\n\n/**\n * Wraps Anime.js `animate()` into a Vue composable. Reactively re-creates the animation when the target or options change, and cancels it automatically on unmount.\n *\n * @param _target - The element(s) to animate. Accepts a template ref, a CSS selector, a DOM element, or a reactive ref to any of these.\n * @param _options - Anime.js animation parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.\n */\nexport function useAnimate(\n  _target: MaybeRef<TargetSelector> | MaybeComputedElementRef,\n  _options: MaybeRef<AnimationParams> = {}\n): UseAnimateReturn {\n  const animation = shallowRef<JSAnimation>()\n\n  function resolveTarget() {\n    return unrefElement(_target as MaybeComputedElementRef) ?? unref(_target as MaybeRef<TargetSelector>)\n  }\n\n  const { stop } = watch(\n    [resolveTarget, () => unref(_options)],\n    ([el, opt]) => {\n      createAnimation(el, opt)\n    },\n    { flush: \"post\", immediate: !isRef(_target) }\n  )\n\n  tryOnUnmounted(() => {\n    stop()\n    cancel()\n  })\n\n  function createAnimation(el: TargetSelector, opt: AnimationParams) {\n    revert()\n\n    if (!el) {\n      console.warn(\"Target element is null or undefined\")\n      animation.value = undefined\n      return\n    }\n\n    animation.value = animate(el, opt)\n  }\n\n  function play() {\n    return animation.value?.play()\n  }\n\n  function reverse() {\n    return animation.value?.reverse()\n  }\n\n  function pause() {\n    return animation.value?.pause()\n  }\n\n  function restart() {\n    return animation.value?.restart()\n  }\n\n  function alternate() {\n    return animation.value?.alternate()\n  }\n\n  function resume() {\n    return animation.value?.resume()\n  }\n\n  function complete() {\n    return animation.value?.complete()\n  }\n\n  function cancel() {\n    return animation.value?.cancel()\n  }\n\n  function revert() {\n    return animation.value?.revert()\n  }\n\n  function reset(softReset?: boolean) {\n    return animation.value?.reset(softReset)\n  }\n\n  function seek(time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) {\n    return animation.value?.seek(time, muteCallbacks, internalRender)\n  }\n\n  function stretch(newDuration: number) {\n    return animation.value?.stretch(newDuration)\n  }\n\n  function refresh() {\n    return animation.value?.refresh()\n  }\n\n  return {\n    animation: readonly(animation),\n    play,\n    reverse,\n    pause,\n    restart,\n    alternate,\n    resume,\n    complete,\n    cancel,\n    revert,\n    reset,\n    seek,\n    stretch,\n    refresh,\n  }\n}","import { animate, AnimationParams, TargetSelector } from \"animejs\"\nimport { MaybeRef, unref } from \"vue\"\n\nexport interface UseRawAnimateReturn {\n  animate: (target: TargetSelector, options: AnimationParams) => void\n}\n\nexport function useRawAnimate(_target: MaybeRef<TargetSelector>, _options: MaybeRef<AnimationParams> = {}) {\n  const target = unref(_target)\n\n  if (!target) {\n    console.warn(\"Target is undefined\")\n  }\n\n  return animate(target, unref(_options))\n}","import { createTimer, type Timer, type TimerParams } from \"animejs\"\nimport { type MaybeRef, type ShallowRef, shallowRef, unref, watch, type DeepReadonly, readonly } from \"vue\"\nimport { tryOnUnmounted } from \"@vueuse/core\"\n\nexport interface UseTimerReturn {\n  timer: DeepReadonly<ShallowRef<Timer>>\n  play: () => Timer\n  reverse: () => Timer\n  pause: () => Timer\n  restart: () => Timer\n  alternate: () => Timer\n  resume: () => Timer\n  complete: () => Timer\n  reset: (softReset?: boolean) => Timer\n  cancel: () => Timer\n  revert: () => Timer\n  seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timer\n  stretch: (newDuration: number) => Timer\n}\n\nexport function useTimer(options: MaybeRef<TimerParams> = {}): UseTimerReturn {\n  const timer = shallowRef<Timer>(createTimer(unref(options)))\n\n  const { stop } = watch(\n    () => unref(options),\n    options => {\n      cancel()\n      timer.value = createTimer(options)\n    },\n    { deep: 1 }\n  )\n\n  tryOnUnmounted(() => {\n    stop()\n    cancel()\n  })\n\n  function play() {\n    return timer.value.play()\n  }\n\n  function reverse() {\n    return timer.value.reverse()\n  }\n\n  function pause() {\n    return timer.value.pause()\n  }\n\n  function restart() {\n    return timer.value.restart()\n  }\n\n  function alternate() {\n    return timer.value.alternate()\n  }\n\n  function resume() {\n    return timer.value.resume()\n  }\n\n  function complete() {\n    return timer.value.complete()\n  }\n\n  function reset(softReset?: boolean) {\n    return timer.value.reset(softReset)\n  }\n\n  function cancel() {\n    return timer.value.cancel()\n  }\n\n  function revert() {\n    return timer.value.revert()\n  }\n\n  function seek(time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) {\n    return timer.value.seek(time, muteCallbacks, internalRender)\n  }\n\n  function stretch(newDuration: number) {\n    return timer.value.stretch(newDuration)\n  }\n\n  return {\n    timer: readonly(timer),\n    play,\n    reverse,\n    pause,\n    restart,\n    alternate,\n    resume,\n    complete,\n    reset,\n    cancel,\n    revert,\n    seek,\n    stretch,\n  }\n}","import { type MaybeRef, type ShallowRef, shallowRef, unref, watch, type DeepReadonly, readonly } from \"vue\"\nimport {\n  type AnimationParams,\n  type Callback,\n  createTimeline,\n  type StaggerFunction,\n  type TargetsParam,\n  type Tickable,\n  type Timeline,\n  type TimelineParams,\n  type TimelinePosition,\n  type Timer,\n} from \"animejs\"\nimport { tryOnMounted, tryOnUnmounted } from \"@vueuse/core\"\n\ntype QueueEntry =\n  | {\n      type: \"add\"\n      targets: MaybeRef<TargetsParam>\n      params: AnimationParams\n      position?: TimelinePosition | StaggerFunction<number | string>\n    }\n  | { type: \"set\"; targets: MaybeRef<TargetsParam>; params: AnimationParams; position?: TimelinePosition }\n\nexport type TimelineChain = Timeline & {\n  /** Adds an animation to the timeline and returns a chainable object. */\n  add: (\n    targets: MaybeRef<TargetsParam>,\n    params: AnimationParams,\n    position?: TimelinePosition | StaggerFunction<number | string>\n  ) => TimelineChain\n  /** Sets a property to a value at a point in the timeline without animating it, then returns a chainable object. */\n  set: (targets: MaybeRef<TargetsParam>, params: AnimationParams, position?: TimelinePosition) => TimelineChain\n  /** Removes an animation target (or a specific property) from the timeline and returns a chainable object. */\n  remove: (targets: MaybeRef<TargetsParam>, propertyName?: string) => TimelineChain\n}\n\nexport interface UseTimelineReturn {\n  /** The underlying Anime.js timeline instance. */\n  timeline: DeepReadonly<ShallowRef<Timeline>>\n  /** Adds an animation to the timeline. Accepts a template ref or any valid Anime.js target. Returns a chainable object. */\n  add: (\n    targets: MaybeRef<TargetsParam>,\n    params: AnimationParams,\n    position?: TimelinePosition | StaggerFunction<number | string>\n  ) => TimelineChain\n  /** Sets a property to a value at a point in the timeline without animating it. Returns a chainable object. */\n  set: (targets: MaybeRef<TargetsParam>, params: AnimationParams, position?: TimelinePosition) => TimelineChain\n  /** Removes an animation target (or a specific property) from the timeline. Returns a chainable object. */\n  remove: (targets: MaybeRef<TargetsParam>, propertyName?: string) => TimelineChain\n  /** Synchronises another tickable (animation, timer) into the timeline at the given position. */\n  sync: (synced?: Tickable, position?: TimelinePosition) => Timeline\n  /** Adds a named label at a position so it can be referenced by `.add()` or `.seek()`. */\n  label: (labelName: string, position?: TimelinePosition) => Timeline\n  /** Inserts a callback function at a specific point in the timeline. */\n  call: (callback: Callback<Timer>, position?: TimelinePosition) => Timeline\n  /** Renders the timeline once without playing it. */\n  init: (internalRender?: boolean) => Timeline\n  /** Starts or resumes the timeline. */\n  play: () => Timeline\n  /** Reverses playback direction. */\n  reverse: () => Timeline\n  /** Pauses the timeline at the current position. */\n  pause: () => Timeline\n  /** Restarts the timeline from the beginning. */\n  restart: () => Timeline\n  /** Toggles between forward and reverse direction. */\n  alternate: () => Timeline\n  /** Resumes from a paused state. */\n  resume: () => Timeline\n  /** Jumps immediately to the end of the timeline. */\n  complete: () => Timeline\n  /** Resets the timeline to its initial state. Pass `true` for a soft reset that preserves the current cycle. */\n  reset: (softReset?: boolean) => Timeline\n  /** Stops the timeline and removes it from the Anime.js engine. */\n  cancel: () => Timeline\n  /** Cancels the timeline and restores all animated properties to their original values. */\n  revert: () => Timeline\n  /** Seeks to a specific time (in ms). */\n  seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timeline\n  /** Rescales the timeline to a new total duration. */\n  stretch: (newDuration: number) => Timeline\n  /** Re-reads the current values of all animated properties from the DOM. */\n  refresh: () => Timeline\n}\n\n/**\n * Wraps Anime.js `createTimeline()` into a Vue composable. Reactively re-creates the timeline when options change, and cancels it automatically on unmount.\n *\n * @param options - Anime.js timeline parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.\n */\nexport function useTimeline(options: MaybeRef<TimelineParams> = {}): UseTimelineReturn {\n  let is_mounted = false\n\n  const queue: QueueEntry[] = []\n\n  const timeline = shallowRef<Timeline>(createTimeline(unref(options)))\n\n  function replayQueue() {\n    for (const entry of queue) {\n      if (entry.type === \"add\") {\n        timeline.value.add(unref(entry.targets), entry.params, entry.position)\n      } else {\n        timeline.value.set(unref(entry.targets), entry.params, entry.position)\n      }\n    }\n  }\n\n  const { stop } = watch(\n    () => unref(options),\n    _options => {\n      revert()\n      timeline.value = createTimeline(_options)\n      replayQueue()\n    },\n    { flush: \"post\", deep: 1 }\n  )\n\n  tryOnMounted(() => {\n    is_mounted = true\n    replayQueue()\n  })\n\n  tryOnUnmounted(() => {\n    stop()\n    cancel()\n  })\n\n  function add(\n    targets: MaybeRef<TargetsParam>,\n    params: AnimationParams,\n    position?: TimelinePosition | StaggerFunction<number | string>\n  ) {\n    queue.push({ type: \"add\", targets, params, position })\n\n    if (is_mounted) {\n      return { ...timeline.value.add(unref(targets), params, position), add, set, remove } as TimelineChain\n    }\n\n    return { ...timeline.value, add, set, remove } as TimelineChain\n  }\n\n  function set(targets: MaybeRef<TargetsParam>, params: AnimationParams, position?: TimelinePosition) {\n    queue.push({ type: \"set\", targets, params, position })\n\n    if (is_mounted) {\n      return { ...timeline.value.set(unref(targets), params, position), add, set, remove } as TimelineChain\n    }\n\n    return { ...timeline.value, add, set, remove } as TimelineChain\n  }\n\n  function remove(targets: MaybeRef<TargetsParam>, propertyName?: string) {\n    if (!is_mounted) {\n      console.warn(\"Cannot remove from timeline before mount\")\n      return { ...timeline.value, add, set, remove } as TimelineChain\n    }\n\n    return { ...timeline.value.remove(unref(targets), propertyName), add, set, remove } as TimelineChain\n  }\n\n  function sync(synced?: Tickable, position?: TimelinePosition) {\n    return timeline.value.sync(synced, position)\n  }\n\n  function label(labelName: string, position?: TimelinePosition) {\n    return timeline.value.label(labelName, position)\n  }\n\n  function call(callback: Callback<Timer>, position?: TimelinePosition) {\n    return timeline.value.call(callback, position)\n  }\n\n  function init(internalRender?: boolean) {\n    return timeline.value.init(internalRender)\n  }\n\n  function play() {\n    return timeline.value.play()\n  }\n\n  function reverse() {\n    return timeline.value.reverse()\n  }\n\n  function pause() {\n    return timeline.value.pause()\n  }\n\n  function restart() {\n    return timeline.value.restart()\n  }\n\n  function alternate() {\n    return timeline.value.alternate()\n  }\n\n  function resume() {\n    return timeline.value.resume()\n  }\n\n  function complete() {\n    return timeline.value.complete()\n  }\n\n  function reset(softReset?: boolean) {\n    return timeline.value.reset(softReset)\n  }\n\n  function cancel() {\n    return timeline.value.cancel()\n  }\n\n  function revert() {\n    return timeline.value.revert()\n  }\n\n  function seek(time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) {\n    return timeline.value.seek(time, muteCallbacks, internalRender)\n  }\n\n  function stretch(newDuration: number) {\n    return timeline.value.stretch(newDuration)\n  }\n\n  function refresh() {\n    return timeline.value.refresh()\n  }\n\n  return {\n    timeline: readonly(timeline),\n    add,\n    set,\n    sync,\n    label,\n    remove,\n    call,\n    init,\n    play,\n    reverse,\n    pause,\n    restart,\n    alternate,\n    resume,\n    complete,\n    reset,\n    cancel,\n    revert,\n    seek,\n    stretch,\n    refresh,\n  }\n}","import { type AnimatableObject, type AnimatableParams, createAnimatable, type TargetsParam } from \"animejs\"\nimport {\n  computed,\n  type DeepReadonly,\n  isRef,\n  type MaybeRef,\n  readonly,\n  type ShallowRef,\n  shallowRef,\n  unref,\n  watch,\n} from \"vue\"\nimport { tryOnUnmounted } from \"@vueuse/core\"\n\nexport interface UseAnimatableReturn {\n  animatable: DeepReadonly<ShallowRef<AnimatableObject | undefined>>\n  revert: () => AnimatableObject | undefined\n}\n\nexport function useAnimatable(\n  targets: MaybeRef<TargetsParam>,\n  options: MaybeRef<AnimatableParams> = {}\n): UseAnimatableReturn {\n  const animatable = shallowRef<AnimatableObject>()\n\n  const watch_target = computed<{ el: TargetsParam; opt: AnimatableParams }>(() => ({\n    el: unref(targets),\n    opt: unref(options),\n  }))\n\n  const { stop } = watch(\n    watch_target,\n    ({ el, opt }) => {\n      revert()\n\n      if (!el) {\n        console.warn(\"Targets element is null or undefined\")\n        animatable.value = undefined\n        return\n      }\n\n      animatable.value = createAnimatable(el, opt)\n    },\n    { flush: \"post\", immediate: !isRef(targets) }\n  )\n\n  tryOnUnmounted(() => {\n    stop()\n    revert()\n  })\n\n  function revert() {\n    return animatable.value?.revert()\n  }\n\n  return { animatable: readonly(animatable), revert }\n}","import { type DeepReadonly, isRef, type MaybeRef, readonly, type ShallowRef, shallowRef, unref, watch } from \"vue\"\nimport { tryOnUnmounted } from \"@vueuse/core\"\nimport { type Draggable, type DraggableParams, type TargetsParam, createDraggable, type EasingParam } from \"animejs\"\n\nexport interface UseDraggableReturn {\n  draggable: DeepReadonly<ShallowRef<Draggable | undefined>>\n  disable: () => void\n  enable: () => void\n  setX: (x: number, muteUpdateCallback?: boolean) => void\n  setY: (y: number, muteUpdateCallback?: boolean) => void\n  animateInView: (duration?: number, gap?: number, ease?: EasingParam) => void\n  scrollInView: (duration?: number, gap?: number, ease?: EasingParam) => void\n  stop: () => void\n  reset: () => void\n  revert: () => void\n  refresh: () => void\n}\n\nexport function useDraggable(\n  targets: MaybeRef<TargetsParam>,\n  options: MaybeRef<DraggableParams> = {}\n): UseDraggableReturn {\n  const draggable = shallowRef<Draggable>()\n\n  const { stop: stopWatch } = watch(\n    [() => unref(targets), () => unref(options)],\n    ([el, opt]) => {\n      revert()\n\n      if (!el) {\n        console.warn(\"Targets element is null or undefined\")\n        draggable.value = undefined\n        return\n      }\n\n      draggable.value = createDraggable(el, opt)\n    },\n    { flush: \"post\", immediate: !isRef(targets) }\n  )\n\n  tryOnUnmounted(() => {\n    revert()\n    stopWatch()\n  })\n\n  function disable() {\n    return draggable.value?.disable()\n  }\n\n  function enable() {\n    return draggable.value?.enable()\n  }\n\n  function setX(x: number, muteUpdateCallback?: boolean) {\n    return draggable.value?.setX(x, muteUpdateCallback)\n  }\n\n  function setY(y: number, muteUpdateCallback?: boolean) {\n    return draggable.value?.setY(y, muteUpdateCallback)\n  }\n\n  function animateInView(duration?: number, gap?: number, ease?: EasingParam) {\n    return draggable.value?.animateInView(duration, gap, ease)\n  }\n\n  function scrollInView(duration?: number, gap?: number, ease?: EasingParam) {\n    return draggable.value?.scrollInView(duration, gap, ease)\n  }\n\n  function stop() {\n    return draggable.value?.stop()\n  }\n\n  function reset() {\n    return draggable.value?.reset()\n  }\n\n  function revert() {\n    return draggable.value?.revert()\n  }\n\n  function refresh() {\n    return draggable.value?.refresh()\n  }\n\n  return {\n    draggable: readonly(draggable),\n    disable,\n    enable,\n    setX,\n    setY,\n    animateInView,\n    scrollInView,\n    stop,\n    reset,\n    revert,\n    refresh,\n  }\n}","import { type MaybeComputedElementRef, tryOnUnmounted, unrefElement } from \"@vueuse/core\"\nimport {\n  type AutoLayout,\n  type AutoLayoutParams,\n  createLayout,\n  type DOMTargetSelector,\n  type LayoutAnimationParams,\n  type Timeline,\n} from \"animejs\"\nimport { type DeepReadonly, isRef, type MaybeRef, readonly, type ShallowRef, shallowRef, unref, watch } from \"vue\"\n\nexport interface UseLayoutReturn {\n  layout: DeepReadonly<ShallowRef<AutoLayout | undefined>>\n  record: () => void\n  animate: (params?: LayoutAnimationParams) => Timeline | undefined\n  update: (callback: (layout: AutoLayout) => void, params?: LayoutAnimationParams) => void\n  revert: () => void\n}\n\nexport function useLayout(\n  root: MaybeRef<DOMTargetSelector> | MaybeComputedElementRef,\n  params: MaybeRef<AutoLayoutParams>\n): UseLayoutReturn {\n  const layout = shallowRef<AutoLayout | undefined>()\n\n  const { stop } = watch(\n    [\n      () => unrefElement(root as MaybeComputedElementRef) ?? unref(root as MaybeRef<DOMTargetSelector>),\n      () => unref(params),\n    ],\n    ([el, opt]) => {\n      revert()\n\n      if (!el) {\n        console.warn(\"Target element is null or undefined\")\n        layout.value = undefined\n        return\n      }\n\n      layout.value = createLayout(el, opt)\n    },\n    { flush: \"post\", immediate: !isRef(root) }\n  )\n\n  tryOnUnmounted(() => {\n    revert()\n    stop()\n  })\n\n  function record() {\n    return layout.value?.record()\n  }\n\n  function animate(params?: LayoutAnimationParams) {\n    return layout.value?.animate(params)\n  }\n\n  function update(callback: (layout: AutoLayout) => void, params?: LayoutAnimationParams) {\n    return layout.value?.update(callback, params)\n  }\n\n  function revert() {\n    return layout.value?.revert()\n  }\n\n  return { layout: readonly(layout), record, animate, update, revert }\n}","import { svg, type TargetsParam } from \"animejs\"\nimport { type MaybeRef, unref } from \"vue\"\n\nexport interface UseSvgReturn {\n  morphTo: (path: MaybeRef<TargetsParam>, precision?: MaybeRef<number>) => void\n  createDrawable: (selector: MaybeRef<TargetsParam>, start?: MaybeRef<number>, end?: MaybeRef<number>) => void\n  createMotionPath: (path: MaybeRef<TargetsParam>, offset?: MaybeRef<number>) => void\n}\n\nexport function useSvg(): UseSvgReturn {\n  function morphTo(path: MaybeRef<TargetsParam>, precision?: MaybeRef<number>) {\n    return svg.morphTo(unref(path), unref(precision))\n  }\n\n  function createDrawable(selector: MaybeRef<TargetsParam>, start?: MaybeRef<number>, end?: MaybeRef<number>) {\n    return svg.createDrawable(unref(selector), unref(start), unref(end))\n  }\n\n  function createMotionPath(path: MaybeRef<TargetsParam>, offset?: MaybeRef<number>) {\n    return svg.createMotionPath(unref(path), unref(offset))\n  }\n\n  return {\n    morphTo,\n    createDrawable,\n    createMotionPath,\n  }\n}","import { splitText, type TextSplitter, type TextSplitterParams } from \"animejs\"\nimport { type MaybeComputedElementRef, tryOnUnmounted, unrefElement } from \"@vueuse/core\"\nimport {\n  computed,\n  isRef,\n  readonly,\n  shallowRef,\n  unref,\n  watch,\n  type ComputedRef,\n  type DeepReadonly,\n  type MaybeRef,\n  type ShallowRef,\n} from \"vue\"\n\nexport interface UseTextReturn {\n  splitter: DeepReadonly<ShallowRef<TextSplitter | undefined>>\n  lines: ComputedRef<HTMLElement[]>\n  words: ComputedRef<HTMLElement[]>\n  chars: ComputedRef<HTMLElement[]>\n  revert: () => void\n  refresh: () => void\n}\n\nexport function useText(\n  _target: MaybeRef<HTMLElement | NodeList | string | HTMLElement[]> | MaybeComputedElementRef,\n  _params?: MaybeRef<TextSplitterParams>\n): UseTextReturn {\n  const splitter = shallowRef<TextSplitter | undefined>()\n\n  const lines = computed<HTMLElement[]>(() => splitter.value?.lines ?? [])\n  const words = computed<HTMLElement[]>(() => splitter.value?.words ?? [])\n  const chars = computed<HTMLElement[]>(() => splitter.value?.chars ?? [])\n\n  function resolveTarget() {\n    return (\n      unrefElement(_target as MaybeComputedElementRef) ??\n      unref(_target as MaybeRef<HTMLElement | NodeList | string | HTMLElement[]>)\n    )\n  }\n\n  const { stop } = watch(\n    [resolveTarget, () => unref(_params)],\n    ([el, params]) => {\n      revert()\n      splitter.value = undefined\n\n      if (!el) return\n\n      splitter.value = splitText(el as HTMLElement | NodeList | string | HTMLElement[], params)\n    },\n    { flush: \"post\", immediate: !isRef(_target) }\n  )\n\n  tryOnUnmounted(() => {\n    stop()\n    splitter.value = undefined\n    revert()\n  })\n\n  function revert() {\n    splitter.value?.revert()\n  }\n\n  function refresh() {\n    splitter.value?.refresh()\n  }\n\n  return {\n    splitter: readonly(splitter),\n    lines,\n    words,\n    chars,\n    revert,\n    refresh,\n  }\n}","import { type MaybeComputedElementRef, tryOnUnmounted, unrefElement } from \"@vueuse/core\"\nimport {\n  type WAAPIAnimationParams,\n  type DOMTargetsParam,\n  waapi,\n  type WAAPIAnimation,\n  type EasingFunction,\n} from \"animejs\"\nimport { DeepReadonly, isRef, type MaybeRef, readonly, ShallowRef, shallowRef, unref, watch } from \"vue\"\n\nexport interface UseWaapiReturn {\n  animation: DeepReadonly<ShallowRef<WAAPIAnimation | undefined>>\n  resume: () => WAAPIAnimation | undefined\n  pause: () => WAAPIAnimation | undefined\n  alternate: () => WAAPIAnimation | undefined\n  play: () => WAAPIAnimation | undefined\n  reverse: () => WAAPIAnimation | undefined\n  seek: (time: MaybeRef<number>, muteCallbacks?: MaybeRef<boolean>) => WAAPIAnimation | undefined\n  restart: () => WAAPIAnimation | undefined\n  commitStyles: () => WAAPIAnimation | undefined\n  complete: () => WAAPIAnimation | undefined\n  cancel: () => WAAPIAnimation | undefined\n  revert: () => WAAPIAnimation | undefined\n\n  convertEase: (fn: MaybeRef<EasingFunction>, samples?: MaybeRef<number>) => string\n}\n\nexport function useWaapi(\n  targets: MaybeRef<DOMTargetsParam> | MaybeComputedElementRef,\n  options: MaybeRef<WAAPIAnimationParams> = {}\n): UseWaapiReturn {\n  const animation = shallowRef<WAAPIAnimation | undefined>()\n\n  const { stop } = watch(\n    [\n      () => unrefElement(targets as MaybeComputedElementRef) ?? unref(targets as MaybeRef<DOMTargetsParam>),\n      () => unref(options),\n    ],\n    ([el, opt]) => {\n      animation.value = waapi.animate(el, opt)\n    },\n    { flush: \"post\", immediate: !isRef(targets) }\n  )\n\n  tryOnUnmounted(() => {\n    stop()\n  })\n\n  function resume() {\n    return animation.value?.resume()\n  }\n\n  function pause() {\n    return animation.value?.pause()\n  }\n\n  function alternate() {\n    return animation.value?.alternate()\n  }\n\n  function play() {\n    return animation.value?.play()\n  }\n\n  function reverse() {\n    return animation.value?.reverse()\n  }\n\n  function seek(time: MaybeRef<number>, muteCallbacks?: MaybeRef<boolean>) {\n    return animation.value?.seek(unref(time), unref(muteCallbacks))\n  }\n\n  function restart() {\n    return animation.value?.restart()\n  }\n\n  function commitStyles() {\n    return animation.value?.commitStyles()\n  }\n\n  function complete() {\n    return animation.value?.complete()\n  }\n\n  function cancel() {\n    return animation.value?.cancel()\n  }\n\n  function revert() {\n    return animation.value?.revert()\n  }\n\n  return {\n    animation: readonly(animation),\n    resume,\n    pause,\n    alternate,\n    play,\n    reverse,\n    seek,\n    restart,\n    commitStyles,\n    complete,\n    cancel,\n    revert,\n\n    convertEase,\n  }\n}\n\nfunction convertEase(fn: MaybeRef<EasingFunction>, samples: MaybeRef<number> = 100) {\n  return waapi.convertEase(unref(fn), unref(samples))\n}","import { tryOnMounted, tryOnUnmounted } from \"@vueuse/core\"\nimport { createScope, type Scope, type ScopeMethod, type ScopeParams, type Tickable } from \"animejs\"\nimport {\n  type DeepReadonly,\n  isRef,\n  type MaybeRef,\n  shallowReadonly,\n  type ShallowRef,\n  shallowRef,\n  unref,\n  watch,\n} from \"vue\"\n\nexport interface UseScopeReturn {\n  scope: DeepReadonly<ShallowRef<Scope>>\n  add: (method: ScopeMethod) => void\n  registerMethod: (methodName: string, method: ScopeMethod) => void\n  addOnce: (method: ScopeMethod) => void\n  keepTime: (method: (scope: Scope) => Tickable) => void\n  revert: () => void\n  refresh: () => void\n}\n\nexport function useScope(params: MaybeRef<ScopeParams>): UseScopeReturn {\n  const scope = shallowRef(createScope(unref(params)))\n\n  const pending_adds: ScopeMethod[] = []\n  const pending_named: [string, ScopeMethod][] = []\n  const pending_once: ScopeMethod[] = []\n\n  let is_mounted = false\n\n  const stopWatcher = isRef(params)\n    ? watch(\n        params,\n        new_params => {\n          scope.value.revert()\n          scope.value = createScope(new_params)\n        },\n        { flush: \"post\" }\n      )\n    : undefined\n\n  tryOnMounted(() => {\n    is_mounted = true\n\n    for (const method of pending_adds) scope.value.add(method)\n    for (const [name, method] of pending_named) scope.value.add(name, method)\n    for (const method of pending_once) scope.value.addOnce(method)\n\n    pending_adds.length = 0\n    pending_named.length = 0\n    pending_once.length = 0\n  })\n\n  tryOnUnmounted(() => {\n    scope.value.revert()\n    stopWatcher?.()\n  })\n\n  function add(method: ScopeMethod) {\n    if (!is_mounted) return void pending_adds.push(method)\n    return scope.value.add(method)\n  }\n\n  function registerMethod(methodName: string, method: ScopeMethod) {\n    if (!is_mounted) return void pending_named.push([methodName, method])\n    return scope.value.add(methodName, method)\n  }\n\n  function addOnce(method: ScopeMethod) {\n    if (!is_mounted) return void pending_once.push(method)\n    return scope.value.addOnce(method)\n  }\n\n  function keepTime(method: (scope: Scope) => Tickable) {\n    return scope.value.keepTime(method)\n  }\n\n  function revert() {\n    return scope.value.revert()\n  }\n\n  function refresh() {\n    return scope.value.refresh()\n  }\n\n  return {\n    scope: shallowReadonly(scope),\n    add,\n    registerMethod,\n    addOnce,\n    keepTime,\n    revert,\n    refresh,\n  }\n}"],"mappings":"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"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@juleshry/vue-animejs",
+  "version": "0.1.0",
+  "description": "Vue 3 composables for Anime.js v4 — reactive animations that integrate naturally with Vue's reactivity system and component lifecycle.",
+  "keywords": [
+    "animation",
+    "animejs",
+    "composable",
+    "composables",
+    "vue",
+    "vue3"
+  ],
+  "homepage": "https://github.com/juleshry/vue-animejs#readme",
+  "bugs": {
+    "url": "https://github.com/juleshry/vue-animejs/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/juleshry/vue-animejs.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "format": "oxfmt .",
+    "format:check": "oxfmt --check .",
+    "lint": "oxlint .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@vitest/coverage-v8": "^4.1.4",
+    "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": ">=14",
+    "animejs": ">=4",
+    "happy-dom": "^20.9.0",
+    "oxfmt": "^0.47.0",
+    "oxlint": "^1.62.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4",
+    "vue": ">=3.5",
+    "vue-tsc": "^3.2.6"
+  },
+  "peerDependencies": {
+    "@vueuse/core": ">=14",
+    "animejs": ">=4",
+    "vue": ">=3.5"
+  }
+}