deja-vue 2.0.1 → 2.1.1

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Component, ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter, ModelRef, Reactive, Ref, ShallowRef, ShallowUnwrapRef, WatchOptions } from "vue";
 import { NodeRef } from "vue-unwrap";
-import { SplitText } from "gsap/SplitText";
+import SplitText from "gsap/SplitText";
 
 //#region src/core/EventBus.d.ts
 declare class EventBus<E extends string, A extends unknown[] = []> {
@@ -26,7 +26,7 @@ declare class Animation extends EventBus<AnimationEvent, [animation: Animation]>
   getChildPosition(child: AnimationChild): number | undefined;
   run(action?: TweenAction, ...args: any[]): void;
   clear(revert?: boolean): void;
-  dispose(): void;
+  dispose(revert?: boolean): void;
   private handleScrollTriggerReset;
 }
 //#endregion
@@ -47,6 +47,7 @@ interface DejaVueAnimationInstance extends DejaVueComponent {
   progress: ModelRef<ControllableAnimation['progress']>;
 }
 interface DejaVueAnimationComponentProps {
+  revertOnDispose?: boolean;
   seamless?: boolean;
   tweenTarget?: 'children' | 'self' | gsap.TweenTarget;
 }
@@ -166,6 +167,7 @@ declare function useAnimationControls(animation: Animation, controls: AnimationC
 interface AnimationNestingOptions {
   parent?: DejaVueAnimationParent | null;
   position?: MaybeRefOrGetter<gsap.Position | undefined>;
+  revertOnDispose?: MaybeRefOrGetter<boolean>;
 }
 type AnimationNestingTarget = ({
   animation: Animation;

package/dist/index.js

@@ -1,8 +1,8 @@
 import { gsap } from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
+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";
+import SplitText from "gsap/SplitText";
 //#region src/constants.ts
 const ANIMATION_EVENTS = [
 	"complete",
@@ -232,11 +232,13 @@ var Animation = class extends EventBus {
 	}
 	clear(revert) {
 		if (revert) this.ctx?.revert();
+		else this.ctx?.kill();
 		this.timeline?.clear(true);
 	}
-	dispose() {
+	dispose(revert) {
 		super.dispose();
-		this.ctx?.revert();
+		if (revert) this.ctx?.revert();
+		else this.ctx?.kill();
 		this.scrollTrigger?.kill();
 		this.timeline?.kill();
 		this.ctx = null;
@@ -312,6 +314,7 @@ function useAnimationControls(animation, controls) {
 function useAnimationNesting(target, options) {
 	const parent = options?.parent === null ? null : options?.parent || inject(dejaVueParentInstance, null);
 	const position = computed(() => toValue(options?.position));
+	const revertOnDispose = computed(() => toValue(options?.revertOnDispose));
 	const children = computed(() => toNonEmptyArray([target].flat().map((child) => {
 		if (!child) return "";
 		if ("animation" in child) return child.animation;
@@ -341,9 +344,9 @@ function useAnimationNesting(target, options) {
 		if (!children.value) return;
 		if (parent) children.value.forEach((child) => {
 			parent.animation.remove(child, true);
-			if (child instanceof Animation) child.dispose();
+			if (child instanceof Animation) child.dispose(revertOnDispose.value);
 		});
-		else children.value.forEach((child) => child instanceof Animation && child.dispose());
+		else children.value.forEach((child) => child instanceof Animation && child.dispose(revertOnDispose.value));
 	});
 	return { parent };
 }
@@ -620,6 +623,10 @@ var SplitText_default = /* @__PURE__ */ defineComponent({
 var Timeline_default = /* @__PURE__ */ defineComponent({
 	__name: "Timeline",
 	props: /*@__PURE__*/ mergeModels({
+		revertOnDispose: {
+			type: Boolean,
+			required: false
+		},
 		seamless: {
 			type: Boolean,
 			required: false
@@ -696,7 +703,8 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 		});
 		const { parent } = useAnimationNesting({ animation }, {
 			parent: props.parent,
-			position: () => props.position
+			position: () => props.position,
+			revertOnDispose: () => props.revertOnDispose
 		});
 		const instance = {
 			$el: root,
@@ -751,6 +759,10 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 var Tween_default = /* @__PURE__ */ defineComponent({
 	__name: "Tween",
 	props: /*@__PURE__*/ mergeModels({
+		revertOnDispose: {
+			type: Boolean,
+			required: false
+		},
 		seamless: {
 			type: Boolean,
 			required: false
@@ -821,7 +833,8 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 		});
 		const { parent } = useAnimationNesting({ animation }, {
 			parent: props.parent,
-			position: () => props.position
+			position: () => props.position,
+			revertOnDispose: () => props.revertOnDispose
 		});
 		const { method: tweenMethod, vars: tweenVars } = useTweenVars(props);
 		const instance = {
@@ -842,7 +855,7 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 			tweenVars
 		], ([scope, method, target, vars]) => {
 			if (isEmptyTarget(target) || !method) return;
-			animation.clear(true);
+			animation.clear(props.revertOnDispose);
 			const definition = {
 				method,
 				scope,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "deja-vue",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Declarative GSAP Animations for Vue 3",
   "author": "Andrea 'Fiad' Fiadone <hello@fiad.one>",
   "license": "MIT",