deja-vue 0.2.0 → 2.0.1

package/dist/index.js

@@ -1,5 +1,8 @@
 import { gsap } from "gsap";
-import { Fragment, computed, createBlock, defineComponent, inject, nextTick, onMounted, onUnmounted, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, toValue, unref, useTemplateRef, watch, withCtx } from "vue";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { computed, createBlock, defineComponent, effectScope, inject, mergeModels, nextTick, onUnmounted, openBlock, provide, reactive, ref, renderSlot, shallowReactive, shallowRef, toRefs, toValue, unref, useAttrs, useModel, watch } from "vue";
+import { getNodeElement, useUnwrap } from "vue-unwrap";
+import { SplitText } from "gsap/SplitText";
 //#region src/constants.ts
 const ANIMATION_EVENTS = [
 	"complete",
@@ -9,9 +12,82 @@ const ANIMATION_EVENTS = [
 	"start",
 	"update"
 ];
-const parentAnimationInjectionKey = Symbol("parent-animation");
+const dejaVueParentInstance = Symbol("deja-vue-parent-instance");
 //#endregion
-//#region src/utils/EventBus.ts
+//#region src/utils/index.ts
+function cloneObject(target) {
+	return Array.isArray(target) ? target.map((target) => ({ ...target })) : { ...target };
+}
+function isObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function patchArray(target, changes) {
+	for (let i = 0; i < changes.length; i++) if (!syncData(target[i], changes[i])) target[i] = changes[i];
+	target.length = changes.length;
+}
+function patchObject(target, changes) {
+	for (const key in changes) if (!syncData(target[key], changes[key])) target[key] = changes[key];
+	for (const key in target) if (!(key in changes)) delete target[key];
+}
+function syncData(target, changes) {
+	if (Object.is(target, changes)) return true;
+	if (!isObject(target) && !Array.isArray(target)) return false;
+	try {
+		if (JSON.stringify(target) === JSON.stringify(changes)) return true;
+	} catch {}
+	if (isObject(changes) && isObject(target)) {
+		patchObject(target, changes);
+		return true;
+	}
+	if (Array.isArray(changes) && Array.isArray(target)) {
+		patchArray(target, changes);
+		return true;
+	}
+	return false;
+}
+function toNonEmptyArray(data) {
+	return data.length ? data : null;
+}
+//#endregion
+//#region src/utils/gsap.ts
+function applyTimelineTotalDuration(timeline) {
+	const totalDuration = "totalDuration" in (timeline.data || {}) ? timeline.data.totalDuration : void 0;
+	if (totalDuration) timeline.duration(totalDuration);
+}
+function getScrollTriggerToggleActionByEvent(event, instance) {
+	if (!instance?.vars.toggleActions) return;
+	const actions = instance.vars.toggleActions.split(" ");
+	switch (event) {
+		case "enter": return actions[0];
+		case "enterBack": return actions[2];
+		case "leave": return actions[1];
+		case "leaveBack": return actions[3];
+		default: return;
+	}
+}
+function isEmptyTarget(target) {
+	return !target || Array.isArray(target) && !target.length;
+}
+function resolveTimelinePosition(timeline, position) {
+	if (!timeline) return null;
+	if (position === void 0) return timeline.duration();
+	if (typeof position === "number") return position;
+	if (typeof position === "string" && position in timeline.labels) return timeline.labels[position];
+	timeline.add(timelinePositionProbe, position);
+	const time = timeline.getTweensOf(timelinePositionProbe)[0]?.startTime();
+	timeline.remove(timelinePositionProbe);
+	return time ?? null;
+}
+function stripScrollTriggerVars(vars, defaultTrigger) {
+	if (!vars?.scrollTrigger) return null;
+	const scrollTriggerVars = typeof vars.scrollTrigger === "string" || typeof vars.scrollTrigger === "number" || "nodeType" in vars.scrollTrigger ? { trigger: vars.scrollTrigger } : vars.scrollTrigger;
+	delete vars.scrollTrigger;
+	if (!scrollTriggerVars.trigger && defaultTrigger) scrollTriggerVars.trigger = defaultTrigger;
+	return scrollTriggerVars;
+}
+function timelinePositionProbe() {}
+//#endregion
+//#region src/core/EventBus.ts
 var EventBus = class {
 	bus;
 	constructor(events) {
@@ -19,6 +95,7 @@ var EventBus = class {
 		events?.forEach((event) => this.bus.set(event, /* @__PURE__ */ new Set()));
 	}
 	on(event, callback) {
+		if (!this.bus) return;
 		if (Array.isArray(event)) event.forEach((e) => this.on(e, callback));
 		else {
 			if (!this.bus.has(event)) this.bus.set(event, /* @__PURE__ */ new Set());
@@ -33,190 +110,508 @@ var EventBus = class {
 		this.on(event, fn);
 	}
 	off(event, callback) {
+		if (!this.bus) return;
 		if (Array.isArray(event)) event.forEach((e) => this.off(e, callback));
 		else if (this.bus.has(event) && this.bus.get(event).has(callback)) this.bus.get(event).delete(callback);
 	}
 	dispatch(event, ...args) {
-		if (!this.bus.has(event)) return;
+		if (!this.bus?.has(event)) return;
 		this.bus.get(event).forEach((callback) => callback(...args));
 	}
 	dispose() {
-		this.bus.clear();
+		this.bus?.clear();
 		this.bus = null;
 	}
 };
 //#endregion
-//#region src/utils/Animation.ts
+//#region src/core/Animation.ts
+gsap.registerPlugin(ScrollTrigger);
 var Animation = class extends EventBus {
+	ctx;
+	scrollTrigger;
 	timeline;
 	constructor(options) {
-		super([...ANIMATION_EVENTS]);
+		super(ANIMATION_EVENTS);
 		this.timeline = gsap.timeline({
 			...options,
-			onComplete: () => this.dispatch("complete"),
-			onRepeat: () => this.dispatch("repeat"),
-			onReverseComplete: () => this.dispatch("reverseComplete"),
-			onStart: () => this.dispatch("start"),
-			onUpdate: () => this.dispatch("update")
+			onComplete: () => this.dispatch("complete", this),
+			onInterrupt: () => this.dispatch("interrupt", this),
+			onRepeat: () => this.dispatch("repeat", this),
+			onReverseComplete: () => this.dispatch("reverseComplete", this),
+			onStart: () => this.dispatch("start", this),
+			onUpdate: () => this.dispatch("update", this)
 		});
-		(options ? Object.entries(options).filter(([key]) => key.startsWith("on")) : []).forEach(([key, fn]) => {
+		for (const [key, callback] of options ? Object.entries(options).filter(([key]) => key.startsWith("on")) : []) {
 			const [firstChar, ...rest] = key.replace(/^on/, "");
 			const event = `${firstChar.toLowerCase()}${rest.join("")}`;
-			this.on(event, fn);
+			this.on(event, callback);
+		}
+	}
+	attachScrollTrigger(vars) {
+		this.scrollTrigger?.kill();
+		if (!vars) return;
+		this.scrollTrigger = ScrollTrigger.create({
+			...vars,
+			animation: this.timeline,
+			onEnter: (self) => {
+				this.handleScrollTriggerReset("enter");
+				vars.onEnter?.(self);
+			},
+			onEnterBack: (self) => {
+				this.handleScrollTriggerReset("enterBack");
+				vars.onEnterBack?.(self);
+			},
+			onLeave: (self) => {
+				this.handleScrollTriggerReset("leave");
+				vars.onLeave?.(self);
+			},
+			onLeaveBack: (self) => {
+				this.handleScrollTriggerReset("leaveBack");
+				vars.onLeaveBack?.(self);
+			}
 		});
 	}
-	add(child, position) {
+	compose(definition, withContext = true) {
+		if (!this.timeline || !definition.target || Array.isArray(definition.target) && !definition.target.length) return;
+		if (withContext) {
+			this.ctx = gsap.context(() => this.compose(definition, false));
+			return;
+		}
+		let scrollTriggerVars = null;
+		if (definition.method === "fromTo") {
+			const [from, to] = definition.vars;
+			scrollTriggerVars = stripScrollTriggerVars(to, definition.scope);
+			this.timeline.fromTo(definition.target, from, to);
+		} else if (definition.method in this.timeline) {
+			const vars = definition.vars;
+			scrollTriggerVars = stripScrollTriggerVars(vars, definition.scope);
+			this.timeline[definition.method](definition.target, vars);
+		} else console.warn("[deja-vue] Missing or unknown gsap effect.");
+		this.attachScrollTrigger(scrollTriggerVars);
+	}
+	add(child, position, timeShift = false) {
+		if (!this.timeline) return;
 		if (typeof child === "string") this.timeline.addLabel(child, position);
 		else if (typeof child === "function") this.timeline.add(child, position);
+		else if (this.timeline.isActive()) this.once(["complete", "reverseComplete"], () => this.add(child, position, timeShift));
 		else {
-			this.timeline.add(child.timeline, position);
-			const totalDuration = "totalDuration" in (this.timeline.data || {}) ? this.timeline.data.totalDuration : void 0;
-			if (totalDuration) this.timeline.duration(totalDuration);
+			const targetTime = timeShift ? resolveTimelinePosition(this.timeline, position) : null;
+			if (targetTime !== null) {
+				this.timeline.shiftChildren(child.timeline.duration(), false, targetTime + Number.EPSILON);
+				this.timeline.add(child.timeline, targetTime);
+			} else this.timeline.add(child.timeline, position);
+			applyTimelineTotalDuration(this.timeline);
 		}
 	}
-	remove(child) {
+	remove(child, force) {
+		if (!this.timeline) return;
 		if (typeof child === "string") this.timeline.removeLabel(child);
 		else if (typeof child === "function") this.timeline.remove(child);
-		else this.once(["complete", "reverseComplete"], () => {
+		else if (!child.timeline) return;
+		else if (this.timeline.isActive() && !force) this.once(["complete", "reverseComplete"], () => this.remove(child, force));
+		else {
 			const startTime = child.timeline.startTime();
 			const duration = child.timeline.duration();
+			const endTime = startTime + duration;
 			this.timeline.remove(child.timeline);
-			this.timeline.getChildren(false, true, true).forEach((child) => child.startTime() > startTime && child.startTime(child.startTime() - duration));
-			this.timeline.invalidate();
-		});
-	}
-	compose(target, definition) {
-		if (Array.isArray(definition)) definition.forEach((tween) => this.compose(target, tween));
-		else if (definition.method.startsWith("effect")) try {
-			const [_, effect] = definition.method.split(":");
-			this.timeline[effect](target, structuredClone(definition.vars));
-		} catch {
-			console.warn("Missing or unknown effect");
+			this.timeline.shiftChildren(-duration, false, endTime);
+			applyTimelineTotalDuration(this.timeline);
 		}
-		else if (definition.method === "fromTo") this.timeline.fromTo(target, ...structuredClone(definition.vars));
-		else this.timeline[definition.method](target, structuredClone(definition.vars));
+	}
+	getChildPosition(child) {
+		if (!this.timeline) return;
+		if (typeof child === "string") return this.timeline.labels[child];
+		if (typeof child === "function") return this.timeline.getTweensOf(child)?.[0]?.startTime();
+		return this.timeline.getTweensOf(child.timeline)?.[0]?.startTime();
+	}
+	run(action = "play", ...args) {
+		if (action === "reset") {
+			const [atTime = 0, ...rest] = args;
+			this.timeline?.pause(atTime, ...rest);
+		} else this.timeline?.[action]?.(...args);
+	}
+	clear(revert) {
+		if (revert) this.ctx?.revert();
+		this.timeline?.clear(true);
 	}
 	dispose() {
 		super.dispose();
-		this.timeline.kill();
+		this.ctx?.revert();
+		this.scrollTrigger?.kill();
+		this.timeline?.kill();
+		this.ctx = null;
+		this.scrollTrigger = null;
 		this.timeline = null;
 	}
+	handleScrollTriggerReset(event) {
+		if (getScrollTriggerToggleActionByEvent(event, this.scrollTrigger) !== "reset") return;
+		gsap.delayedCall(0, () => this.dispatch("update", this));
+	}
 };
 //#endregion
+//#region src/composables/useStableObjectProp.ts
+function useStableObjectProp(objectProp, watchOptions) {
+	const computedObject = computed(() => toValue(objectProp) || {});
+	const stableObject = reactive(cloneObject(computedObject.value));
+	watch(computedObject, (updatedObject) => patchObject(stableObject, updatedObject), {
+		flush: "sync",
+		...watchOptions
+	});
+	return stableObject;
+}
+//#endregion
 //#region src/composables/useAnimationControls.ts
 function useAnimationControls(animation, controls) {
-	const progress = computed(() => toValue(controls.progress));
-	const toggle = computed(() => toValue(controls.toggle));
-	const controlled = computed(() => typeof progress.value === "number" || typeof toggle.value === "boolean");
-	if (controlled.value && toggle.value !== true) animation.timeline.pause();
-	watch(progress, (value) => {
-		if (typeof value !== "number") return;
-		animation.timeline.progress(value);
+	const direction = ref(0);
+	const trigger = computed(() => toValue(controls.trigger));
+	const triggerOptions = useStableObjectProp(controls.triggerOptions);
+	let triggerScope;
+	let lastProgress = animation.timeline.progress();
+	const controlled = controls.progress.value !== void 0 || trigger.value !== void 0;
+	if (controlled) animation.timeline.pause();
+	if (controls.progress.value === void 0) controls.progress.value = 0;
+	function onAnimationUpdate() {
+		const progress = animation.timeline.progress();
+		if (progress !== lastProgress) {
+			direction.value = progress > lastProgress ? 1 : -1;
+			lastProgress = progress;
+		}
+		if (progress === controls.progress.value) return;
+		controls.progress.value = progress;
+	}
+	animation.on("update", onAnimationUpdate);
+	watch(controls.progress, (current, previous) => {
+		if (previous === void 0 || current === void 0 || current === previous) return;
+		direction.value = current > previous ? 1 : -1;
+		if (animation.timeline.progress() === current) return;
+		animation.timeline.pause();
+		animation.timeline.progress(current);
+	});
+	watch(triggerOptions, (options) => {
+		triggerScope?.stop();
+		triggerScope = effectScope();
+		triggerScope.run(() => {
+			const { actionArgs, ...watchOptions } = options;
+			watch(trigger, () => {
+				const action = toValue(controls.triggerAction) || "play";
+				animation.run(action, ...actionArgs || []);
+			}, watchOptions);
+		});
 	}, { immediate: true });
-	watch(toggle, (value) => {
-		if (typeof value !== "boolean") return;
-		animation.timeline[value ? "play" : "reverse"]();
+	onUnmounted(() => {
+		animation.off("update", onAnimationUpdate);
+		triggerScope?.stop();
 	});
-	return { controlled };
+	return {
+		controlled,
+		direction
+	};
 }
 //#endregion
 //#region src/composables/useAnimationNesting.ts
-function useAnimationNesting(child, options) {
-	const parent = options?.parent === null ? null : options?.parent || inject(parentAnimationInjectionKey, null);
-	onMounted(async () => {
-		if (!parent || !child) return;
+function useAnimationNesting(target, options) {
+	const parent = options?.parent === null ? null : options?.parent || inject(dejaVueParentInstance, null);
+	const position = computed(() => toValue(options?.position));
+	const children = computed(() => toNonEmptyArray([target].flat().map((child) => {
+		if (!child) return "";
+		if ("animation" in child) return child.animation;
+		if ("callback" in child) return child.callback;
+		return toValue(child.label) || "";
+	}).filter(Boolean)));
+	if (parent) watch([children, position], async ([currentChildren, currentPosition], [previousChildren, previousPosition], onCleanup) => {
+		let skip = false;
+		onCleanup(() => skip = true);
+		if (!currentChildren && !previousChildren) return;
+		if (!currentChildren) {
+			previousChildren.forEach((child) => parent.animation.remove(child));
+			return;
+		}
+		if (previousChildren && currentChildren.length < previousChildren.length) previousChildren.slice(currentChildren.length).forEach((child) => parent.animation.remove(child));
 		await nextTick();
-		parent.add(child, options?.position);
-	});
+		/* v8 ignore next */
+		if (skip) return;
+		currentChildren.forEach((currentChild, index) => {
+			const previousChild = previousChildren?.[index];
+			if (currentChild === previousChild && currentPosition === previousPosition) return;
+			if (previousChild) parent.animation.remove(previousChild);
+			parent.animation.add(currentChild, currentPosition);
+		});
+	}, { immediate: true });
 	onUnmounted(() => {
-		if (!child) return;
-		if (parent) parent.remove(child);
-		else if (child instanceof Animation) child.dispose();
+		if (!children.value) return;
+		if (parent) children.value.forEach((child) => {
+			parent.animation.remove(child, true);
+			if (child instanceof Animation) child.dispose();
+		});
+		else children.value.forEach((child) => child instanceof Animation && child.dispose());
 	});
 	return { parent };
 }
 //#endregion
-//#region src/composables/useAnimation.ts
-function useAnimation(wrapper, props, emit, options) {
-	const animation = new Animation(options);
-	const ready = shallowRef(false);
-	const { controlled } = useAnimationControls(animation, {
-		progress: () => props.progress,
-		toggle: () => props.toggle
+//#region src/composables/useAnimationScope.ts
+const AnimationScopePropTypes = {
+	animation: Object,
+	direction: Number,
+	parent: Object,
+	progress: Number
+};
+function resolveChildrenTweenTarget(children) {
+	return children.map((child) => child && "seamless" in child && child.seamless ? child.tweenTarget : getNodeElement(child)).flat().filter(Boolean);
+}
+function useAnimationScope(options) {
+	const attrs = useAttrs();
+	const { children, root, Unwrap: AnimationScope } = useUnwrap(AnimationScopePropTypes);
+	const tweenTarget = computed(() => {
+		const target = toValue(options?.tweenTarget);
+		if (!attrs.is || !target || target === "children") return toNonEmptyArray((options?.resolveChildrenTweenTarget || resolveChildrenTweenTarget)(children));
+		if (typeof target !== "string") return target;
+		if (attrs.is && target === "self") return root.value;
+		return toNonEmptyArray(gsap.utils.toArray(target, root.value));
 	});
-	const { parent } = useAnimationNesting(animation, props);
-	ANIMATION_EVENTS.forEach((event) => animation.on(event, () => emit(event, animation.timeline)));
-	onMounted(() => {
-		if (wrapper.value) {
-			const target = props.group ? wrapper.value.children : wrapper.value;
-			const definition = "tweens" in props ? props.tweens || [] : props;
-			animation.compose(target, definition);
-		}
-		ready.value = true;
+	watch(tweenTarget, (_, previousTarget) => {
+		if (!previousTarget) return;
+		gsap.killTweensOf(previousTarget);
+		gsap.set(previousTarget, { clearProps: true });
 	});
-	onUnmounted(() => animation.dispose());
 	return {
-		animation,
-		controlled,
-		parent,
-		ready
+		AnimationScope,
+		root,
+		tweenTarget
+	};
+}
+//#endregion
+//#region src/composables/useSplitText.ts
+gsap.registerPlugin(SplitText);
+function useSplitText(domTarget, options) {
+	const instance = shallowRef();
+	const state = shallowReactive({
+		chars: [],
+		lines: [],
+		words: []
+	});
+	watch([() => toValue(domTarget), () => toValue(options)], ([target, vars]) => {
+		instance.value?.kill();
+		if (!target || !vars) return;
+		instance.value = new SplitText(target, {
+			...cloneObject(vars),
+			type: vars.type || "lines,words,chars",
+			onSplit(self) {
+				vars.onSplit?.(self);
+				state.lines = self.lines;
+				state.words = self.words;
+				state.chars = self.chars;
+			}
+		});
+	}, { immediate: true });
+	onUnmounted(() => instance.value?.kill());
+	return {
+		instance,
+		state,
+		...toRefs(state)
+	};
+}
+//#endregion
+//#region src/composables/useTweenVars.ts
+function useTweenVars(definition) {
+	const to = useStableObjectProp(() => definition.to);
+	const from = useStableObjectProp(() => definition.from);
+	const effectOptions = useStableObjectProp(() => definition.effectOptions);
+	const method = computed(() => {
+		if (definition.effect) return definition.effect;
+		if (definition.from && definition.to) return "fromTo";
+		return definition.from ? "from" : "to";
+	});
+	return {
+		method,
+		vars: computed(() => {
+			switch (method.value) {
+				case "fromTo": return [from, to];
+				case "from": return from;
+				case "to": return to;
+				default: return effectOptions;
+			}
+		})
 	};
 }
 //#endregion
-//#region src/components/Callback.vue
-var Callback_default = /* @__PURE__ */ defineComponent({
-	__name: "Callback",
+//#region src/components/Marker.vue
+var Marker_default = /* @__PURE__ */ defineComponent({
+	__name: "Marker",
 	props: {
 		parent: {
-			type: [Object, null],
+			type: null,
 			required: false
 		},
 		position: {
 			type: null,
 			required: false
 		},
-		fn: {
-			type: Function,
-			required: true
+		label: {
+			type: String,
+			required: false
 		}
 	},
-	setup(__props) {
+	emits: ["cross"],
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
-		useAnimationNesting(props.fn, props);
+		const emit = __emit;
+		const crossed = ref(false);
+		const { parent } = useAnimationNesting([{ callback: onCross }, { label: () => props.label }], {
+			parent: props.parent,
+			position: () => props.position
+		});
+		const instance = {
+			crossed,
+			parent
+		};
+		function onCross() {
+			emit("cross", toValue(parent.direction));
+		}
+		function onUpdate() {
+			const currentTime = parent.animation.timeline.time();
+			crossed.value = currentTime > (parent.animation.getChildPosition(onCross) ?? 0) || currentTime === parent.animation.timeline.duration();
+		}
+		parent?.animation.on("update", onUpdate);
+		onUnmounted(() => parent?.animation.off("update", onUpdate));
+		__expose(instance);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Fragment);
+			return renderSlot(_ctx.$slots, "default", {
+				crossed: crossed.value,
+				parent: unref(parent)
+			});
 		};
 	}
 });
 //#endregion
-//#region src/components/PositionMarker.vue
-var PositionMarker_default = /* @__PURE__ */ defineComponent({
-	__name: "PositionMarker",
+//#region src/components/SplitText.vue?vue&type=script&setup=true&lang.ts
+const seamless = true;
+//#endregion
+//#region src/components/SplitText.vue
+var SplitText_default = /* @__PURE__ */ defineComponent({
+	__name: "SplitText",
 	props: {
-		parent: {
-			type: [Object, null],
+		type: {
+			type: String,
 			required: false
 		},
-		position: {
+		mask: {
+			type: String,
+			required: false
+		},
+		wordDelimiter: {
 			type: null,
 			required: false
 		},
-		label: {
+		linesClass: {
+			type: String,
+			required: false
+		},
+		wordsClass: {
+			type: String,
+			required: false
+		},
+		charsClass: {
+			type: String,
+			required: false
+		},
+		aria: {
 			type: String,
-			required: true
+			required: false
+		},
+		tag: {
+			type: String,
+			required: false
+		},
+		propIndex: {
+			type: Boolean,
+			required: false
+		},
+		deepSlice: {
+			type: Boolean,
+			required: false
+		},
+		smartWrap: {
+			type: Boolean,
+			required: false
+		},
+		specialChars: {
+			type: null,
+			required: false
+		},
+		reduceWhiteSpace: {
+			type: Boolean,
+			required: false
+		},
+		autoSplit: {
+			type: Boolean,
+			required: false
+		},
+		ignore: {
+			type: null,
+			required: false
+		},
+		prepareText: {
+			type: null,
+			required: false
+		},
+		onSplit: {
+			type: Function,
+			required: false
+		},
+		onRevert: {
+			type: Function,
+			required: false
+		},
+		overwrite: {
+			type: Boolean,
+			required: false
+		},
+		tweenTarget: {
+			type: String,
+			required: false
 		}
 	},
-	emits: ["cross"],
-	setup(__props, { emit: __emit }) {
+	emits: ["split", "revert"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const SplitTextPropTypes = {
+			chars: Object,
+			lines: Object,
+			words: Object
+		};
 		const props = __props;
 		const emit = __emit;
-		const { parent } = useAnimationNesting(props.label, props);
-		useAnimationNesting(() => emit("cross"), {
-			parent,
-			position: props.label
+		const attrs = useAttrs();
+		const { children, root, Unwrap } = useUnwrap(SplitTextPropTypes);
+		const { chars, lines, state, words } = useSplitText(computed(() => attrs.is ? root.value : toNonEmptyArray(children.map((child) => getNodeElement(child)).filter(Boolean))), computed(() => {
+			const { tweenTarget, ...rest } = props;
+			return {
+				...rest,
+				onRevert: (self) => emit("revert", self),
+				onSplit: (self) => emit("split", self)
+			};
+		}));
+		__expose({
+			$el: root,
+			chars,
+			lines,
+			seamless,
+			tweenTarget: computed(() => {
+				const key = props.tweenTarget || props.type?.split(",").pop()?.trim() || "chars";
+				if (!(key in state)) return null;
+				return toNonEmptyArray(state[key]);
+			}),
+			words
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Fragment);
+			return openBlock(), createBlock(unref(Unwrap), {
+				chars: unref(chars),
+				lines: unref(lines),
+				words: unref(words)
+			}, null, 8, [
+				"chars",
+				"lines",
+				"words"
+			]);
 		};
 	}
 });
@@ -224,33 +619,38 @@ var PositionMarker_default = /* @__PURE__ */ defineComponent({
 //#region src/components/Timeline.vue
 var Timeline_default = /* @__PURE__ */ defineComponent({
 	__name: "Timeline",
-	props: {
-		progress: {
-			type: Number,
+	props: /*@__PURE__*/ mergeModels({
+		seamless: {
+			type: Boolean,
 			required: false
 		},
-		toggle: {
-			type: Boolean,
-			required: false,
-			skipCheck: true,
-			default: void 0
+		tweenTarget: {
+			type: null,
+			required: false
 		},
 		parent: {
-			type: [Object, null],
+			type: null,
 			required: false
 		},
 		position: {
 			type: null,
 			required: false
 		},
-		group: {
-			type: Boolean,
+		progress: {
+			type: Number,
 			required: false
 		},
-		tag: {
-			type: String,
-			required: false,
-			default: "div"
+		trigger: {
+			type: null,
+			required: false
+		},
+		triggerAction: {
+			type: null,
+			required: false
+		},
+		triggerOptions: {
+			type: null,
+			required: false
 		},
 		duration: {
 			type: Number,
@@ -259,52 +659,90 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 		options: {
 			type: null,
 			required: false
-		},
-		tweens: {
-			type: Array,
-			required: false
 		}
-	},
-	emits: [...ANIMATION_EVENTS],
+	}, {
+		"progress": {
+			type: Number,
+			default: void 0
+		},
+		"progressModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(ANIMATION_EVENTS, ["update:progress"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const wrapper = useTemplateRef("wrapper");
-		const { animation, controlled, parent, ready } = useAnimation(wrapper, props, emit, {
-			...props.options,
-			data: {
-				...props.options?.data,
-				totalDuration: Number(props.duration)
-			}
+		const { AnimationScope, root, tweenTarget } = useAnimationScope({ tweenTarget: () => props.tweenTarget });
+		const options = useStableObjectProp(() => props.options);
+		const vars = computed(() => {
+			const tl = cloneObject(options);
+			return {
+				scrollTrigger: stripScrollTriggerVars(tl, root.value),
+				timeline: tl
+			};
 		});
-		watch(() => props.duration, (duration) => animation.timeline.data.totalDuration = Number(duration));
-		provide(parentAnimationInjectionKey, animation);
-		__expose({
+		const animation = new Animation({
+			...vars.value?.timeline,
+			data: typeof props.duration === "number" && props.duration > 0 ? {
+				...vars.value?.timeline.data,
+				totalDuration: props.duration
+			} : vars.value?.timeline.data
+		});
+		const progress = useModel(__props, "progress");
+		const { controlled, direction } = useAnimationControls(animation, {
+			progress,
+			trigger: () => props.trigger,
+			triggerAction: () => props.triggerAction,
+			triggerOptions: () => props.triggerOptions
+		});
+		const { parent } = useAnimationNesting({ animation }, {
+			parent: props.parent,
+			position: () => props.position
+		});
+		const instance = {
+			$el: root,
 			animation,
 			controlled,
+			direction,
 			parent,
-			ready
+			progress,
+			seamless: computed(() => props.seamless),
+			tweenTarget
+		};
+		for (const event of ANIMATION_EVENTS) animation.on(event, () => emit(event, animation, parent));
+		watch(() => vars.value.timeline, (vars) => {
+			Object.assign(animation.timeline.vars, cloneObject(vars));
+			animation.timeline.invalidate();
 		});
+		watch(() => vars.value.scrollTrigger, async (vars) => {
+			if (Object.keys(vars || {}).length) {
+				await nextTick();
+				animation.attachScrollTrigger(vars);
+			} else animation.attachScrollTrigger(null);
+		}, { immediate: true });
+		watch(() => props.duration, (duration) => {
+			if (typeof duration === "number" && duration > 0) {
+				animation.timeline.data.totalDuration = duration;
+				animation.timeline.duration(duration);
+			} else {
+				delete animation.timeline.data.totalDuration;
+				animation.timeline.timeScale(1);
+				animation.timeline.invalidate();
+			}
+		});
+		provide(dejaVueParentInstance, instance);
+		__expose(instance);
 		return (_ctx, _cache) => {
-			return __props.tweens ? (openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-				key: 0,
-				ref_key: "wrapper",
-				ref: wrapper
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
-					animation: unref(animation),
-					controlled: unref(controlled),
-					parent: unref(parent),
-					ready: unref(ready)
-				})]),
-				_: 3
-			}, 512)) : renderSlot(_ctx.$slots, "default", {
-				key: 1,
+			return openBlock(), createBlock(unref(AnimationScope), {
 				animation: unref(animation),
-				controlled: unref(controlled),
+				direction: unref(direction),
 				parent: unref(parent),
-				ready: unref(ready)
-			});
+				progress: progress.value
+			}, null, 8, [
+				"animation",
+				"direction",
+				"parent",
+				"progress"
+			]);
 		};
 	}
 });
@@ -312,70 +750,125 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 //#region src/components/Tween.vue
 var Tween_default = /* @__PURE__ */ defineComponent({
 	__name: "Tween",
-	props: {
-		progress: {
-			type: Number,
+	props: /*@__PURE__*/ mergeModels({
+		seamless: {
+			type: Boolean,
 			required: false
 		},
-		toggle: {
-			type: Boolean,
-			required: false,
-			skipCheck: true,
-			default: void 0
+		tweenTarget: {
+			type: null,
+			required: false
 		},
 		parent: {
-			type: [Object, null],
+			type: null,
 			required: false
 		},
 		position: {
-			type: void 0,
+			type: null,
 			required: false
 		},
-		group: {
-			type: Boolean,
+		progress: {
+			type: Number,
 			required: false
 		},
-		tag: {
-			type: String,
-			required: false,
-			default: "div"
+		trigger: {
+			type: null,
+			required: false
+		},
+		triggerAction: {
+			type: null,
+			required: false
+		},
+		triggerOptions: {
+			type: null,
+			required: false
+		},
+		from: {
+			type: null,
+			required: false
+		},
+		to: {
+			type: null,
+			required: false
 		},
-		method: {
+		effect: {
 			type: null,
-			required: true
+			required: false
 		},
-		vars: {
+		effectOptions: {
 			type: null,
 			required: false
 		}
-	},
-	emits: [...ANIMATION_EVENTS],
+	}, {
+		"progress": {
+			type: Number,
+			default: void 0
+		},
+		"progressModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(ANIMATION_EVENTS, ["update:progress"]),
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const wrapper = useTemplateRef("wrapper");
-		const { animation, controlled, parent, ready } = useAnimation(wrapper, props, emit);
-		__expose({
+		const { AnimationScope, root, tweenTarget } = useAnimationScope({ tweenTarget: () => props.tweenTarget });
+		const animation = new Animation();
+		const progress = useModel(__props, "progress");
+		const { controlled, direction } = useAnimationControls(animation, {
+			progress,
+			trigger: () => props.trigger,
+			triggerAction: () => props.triggerAction,
+			triggerOptions: () => props.triggerOptions
+		});
+		const { parent } = useAnimationNesting({ animation }, {
+			parent: props.parent,
+			position: () => props.position
+		});
+		const { method: tweenMethod, vars: tweenVars } = useTweenVars(props);
+		const instance = {
+			$el: root,
 			animation,
 			controlled,
+			direction,
 			parent,
-			ready
+			progress,
+			seamless: computed(() => props.seamless),
+			tweenTarget
+		};
+		for (const event of ANIMATION_EVENTS) animation.on(event, () => emit(event, animation, parent));
+		watch([
+			root,
+			tweenMethod,
+			tweenTarget,
+			tweenVars
+		], ([scope, method, target, vars]) => {
+			if (isEmptyTarget(target) || !method) return;
+			animation.clear(true);
+			const definition = {
+				method,
+				scope,
+				target,
+				vars: cloneObject(vars)
+			};
+			animation.compose(definition);
+		}, {
+			deep: true,
+			immediate: true
 		});
+		__expose(instance);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-				ref_key: "wrapper",
-				ref: wrapper
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
-					animation: unref(animation),
-					controlled: unref(controlled),
-					parent: unref(parent),
-					ready: unref(ready)
-				})]),
-				_: 3
-			}, 512);
+			return openBlock(), createBlock(unref(AnimationScope), {
+				animation: unref(animation),
+				direction: unref(direction),
+				parent: unref(parent),
+				progress: progress.value
+			}, null, 8, [
+				"animation",
+				"direction",
+				"parent",
+				"progress"
+			]);
 		};
 	}
 });
 //#endregion
-export { ANIMATION_EVENTS, Animation, Callback_default as Callback, PositionMarker_default as PositionMarker, Timeline_default as Timeline, Tween_default as Tween, parentAnimationInjectionKey, useAnimation, useAnimationControls, useAnimationNesting };
+export { ANIMATION_EVENTS, Animation, Marker_default as Marker, SplitText_default as SplitText, Timeline_default as Timeline, Tween_default as Tween, applyTimelineTotalDuration, cloneObject, dejaVueParentInstance, getScrollTriggerToggleActionByEvent, isEmptyTarget, isObject, patchArray, patchObject, resolveChildrenTweenTarget, resolveTimelinePosition, stripScrollTriggerVars, syncData, toNonEmptyArray, useAnimationControls, useAnimationNesting, useAnimationScope, useSplitText, useStableObjectProp, useTweenVars };