deja-vue 2.1.3 → 2.2.0

package/dist/index.d.ts

@@ -2,6 +2,13 @@ import { Component, ComputedRef, InjectionKey, MaybeRef, MaybeRefOrGetter, Model
 import { NodeRef } from "vue-unwrap";
 import SplitText from "gsap/SplitText";
 
+//#region src/composables/useReducedMotion.d.ts
+type ReducedMotionMode = boolean | 'auto';
+declare function useReducedMotion(mode?: MaybeRefOrGetter<ReducedMotionMode | undefined>): {
+  computed: import("vue").ComputedRef<boolean>;
+  system: import("vue").Ref<boolean, boolean>;
+};
+//#endregion
 //#region src/core/EventBus.d.ts
 declare class EventBus<E extends string, A extends unknown[] = []> {
   private bus;
@@ -14,11 +21,15 @@ declare class EventBus<E extends string, A extends unknown[] = []> {
 }
 //#endregion
 //#region src/core/Animation.d.ts
+type AnimationOptions = gsap.TimelineVars & {
+  reducedMotion?: boolean;
+};
 declare class Animation extends EventBus<AnimationEvent, [animation: Animation]> {
   private ctx?;
   private scrollTrigger?;
+  reducedMotion: boolean;
   timeline: gsap.core.Timeline;
-  constructor(options?: gsap.TimelineVars);
+  constructor(options?: AnimationOptions);
   attachScrollTrigger(vars: ScrollTrigger.Vars | null | undefined): void;
   compose(definition: AnimationComposeDefinition, withContext?: boolean): void;
   add(child: AnimationChild, position?: gsap.Position, timeShift?: boolean): void;
@@ -44,21 +55,20 @@ interface DejaVueAnimationInstance extends DejaVueComponent {
   controlled: boolean;
   direction: Ref<AnimationDirection>;
   parent: DejaVueAnimationParent | null;
+  reducedMotion: ComputedRef<boolean>;
   progress: ModelRef<ControllableAnimation['progress']>;
 }
 interface DejaVueAnimationComponentProps {
+  reducedMotion?: ReducedMotionMode;
   revertOnDispose?: boolean;
   seamless?: boolean;
   tweenTarget?: 'children' | 'self' | gsap.TweenTarget;
 }
 type DejaVueAnimationExposed = ShallowUnwrapRef<DejaVueAnimationInstance>;
 type DejaVueAnimationParent = DejaVueAnimationInstance | DejaVueAnimationExposed;
-type DejaVueAnimationScopeProps = Pick<DejaVueAnimationExposed, 'animation' | 'direction' | 'parent' | 'progress'>;
+type DejaVueAnimationScopeProps = Pick<DejaVueAnimationExposed, 'animation' | 'direction' | 'parent' | 'progress' | 'reducedMotion'>;
 type AnimationChild = Animation | gsap.Callback | string;
-type AnimationComposeDefinition = {
-  scope?: Element;
-  target: gsap.TweenTarget;
-} & ({
+type AnimationComposeTween = ({
   method: 'fromTo';
   vars: [gsap.TweenVars, gsap.TweenVars];
 } | {
@@ -68,6 +78,10 @@ type AnimationComposeDefinition = {
   method: string;
   vars: Record<string, unknown>;
 });
+type AnimationComposeDefinition = {
+  scope?: Element;
+  target: gsap.TweenTarget;
+} & AnimationComposeTween;
 type AnimationDirection = 1 | -1 | 0;
 type AnimationEvent = 'complete' | 'interrupt' | 'repeat' | 'reverseComplete' | 'start' | 'update';
 type AnimationEventEmitter = (e: AnimationEvent, animation: Animation, parent: DejaVueAnimationParent | null) => void;
@@ -146,6 +160,10 @@ declare function toNonEmptyArray<T = unknown>(data: T[]): NonEmptyArray<T> | nul
 //#endregion
 //#region src/utils/gsap.d.ts
 declare function applyTimelineTotalDuration(timeline: gsap.core.Timeline): void;
+declare function getReducedMotionTween({
+  method,
+  vars
+}: AnimationComposeTween): AnimationComposeTween | undefined;
 declare function getScrollTriggerToggleActionByEvent(event: 'enter' | 'enterBack' | 'leave' | 'leaveBack', instance?: ScrollTrigger): string | undefined;
 declare function isEmptyTarget(target: gsap.TweenTarget): boolean;
 declare function resolveTimelinePosition(timeline: gsap.core.Timeline, position?: gsap.Position): number | null;
@@ -273,11 +291,11 @@ type __VLS_Slots$2 = {
   default(props: DejaVueSplitTextScopeProps): any;
 };
 declare const __VLS_base$2: import("vue").DefineComponent<__VLS_Props, DejaVueSplitTextInstance, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-  split: (splitText: SplitText) => any;
   revert: (splitText: SplitText) => any;
+  split: (splitText: SplitText) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-  onSplit?: ((splitText: SplitText) => any) | undefined;
   onRevert?: ((splitText: SplitText) => any) | undefined;
+  onSplit?: ((splitText: SplitText) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$2: __VLS_WithSlots$2<typeof __VLS_base$2, __VLS_Slots$2>;
 declare const _default$1: typeof __VLS_export$2;
@@ -291,7 +309,7 @@ type __VLS_WithSlots$2<T, S> = T & {
 type __VLS_Slots$1 = {
   default(props: DejaVueAnimationScopeProps): any;
 };
-type __VLS_ModelProps$1 = {
+type __VLS_ModelProps = {
   'progress'?: number;
 };
 declare const __VLS_base$1: import("vue").DefineComponent<(DejaVueAnimationComponentProps & AnimationNestableChild & {
@@ -303,7 +321,7 @@ declare const __VLS_base$1: import("vue").DefineComponent<(DejaVueAnimationCompo
 } & {
   duration?: number;
   options?: gsap.TimelineVars;
-} & __VLS_ModelProps$1) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
+} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
   progress?: number;
 } & {
   trigger?: never;
@@ -312,7 +330,7 @@ declare const __VLS_base$1: import("vue").DefineComponent<(DejaVueAnimationCompo
 } & {
   duration?: number;
   options?: gsap.TimelineVars;
-} & __VLS_ModelProps$1), DejaVueAnimationInstance, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+} & __VLS_ModelProps), DejaVueAnimationInstance, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
   complete: (...args: any[]) => void;
   interrupt: (...args: any[]) => void;
   repeat: (...args: any[]) => void;
@@ -329,7 +347,7 @@ declare const __VLS_base$1: import("vue").DefineComponent<(DejaVueAnimationCompo
 } & {
   duration?: number;
   options?: gsap.TimelineVars;
-} & __VLS_ModelProps$1) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
+} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
   progress?: number;
 } & {
   trigger?: never;
@@ -338,7 +356,7 @@ declare const __VLS_base$1: import("vue").DefineComponent<(DejaVueAnimationCompo
 } & {
   duration?: number;
   options?: gsap.TimelineVars;
-} & __VLS_ModelProps$1)> & Readonly<{
+} & __VLS_ModelProps)> & Readonly<{
   "onUpdate:progress"?: ((value: number) => any) | undefined;
   onComplete?: ((...args: any[]) => any) | undefined;
   onInterrupt?: ((...args: any[]) => any) | undefined;
@@ -346,7 +364,11 @@ declare const __VLS_base$1: import("vue").DefineComponent<(DejaVueAnimationCompo
   onReverseComplete?: ((...args: any[]) => any) | undefined;
   onStart?: ((...args: any[]) => any) | undefined;
   onUpdate?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+  reducedMotion: ReducedMotionMode;
+  duration: number;
+  options: gsap.TimelineVars;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export$1: __VLS_WithSlots$1<typeof __VLS_base$1, __VLS_Slots$1>;
 declare const _default$2: typeof __VLS_export$1;
 type __VLS_WithSlots$1<T, S> = T & {
@@ -359,202 +381,7 @@ type __VLS_WithSlots$1<T, S> = T & {
 type __VLS_Slots = {
   default(props: DejaVueAnimationScopeProps): any;
 };
-type __VLS_ModelProps = {
-  'progress'?: number;
-};
-declare const __VLS_base: import("vue").DefineComponent<(DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from: gsap.TweenVars;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from: gsap.TweenVars;
-  to?: never;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from?: never;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from?: never;
-  to?: never;
-  effect?: string;
-  effectOptions?: gsap.TweenVars;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from: gsap.TweenVars;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from: gsap.TweenVars;
-  to?: never;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from?: never;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from?: never;
-  to?: never;
-  effect?: string;
-  effectOptions?: gsap.TweenVars;
-} & __VLS_ModelProps), DejaVueAnimationInstance, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-  complete: (...args: any[]) => void;
-  interrupt: (...args: any[]) => void;
-  repeat: (...args: any[]) => void;
-  reverseComplete: (...args: any[]) => void;
-  start: (...args: any[]) => void;
-  update: (...args: any[]) => void;
-  "update:progress": (value: number) => void;
-}, string, import("vue").PublicProps, Readonly<(DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from: gsap.TweenVars;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from: gsap.TweenVars;
-  to?: never;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from?: never;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: unknown;
-  triggerAction?: TweenAction;
-  triggerOptions?: AnimationTriggerOptions;
-} & {
-  from?: never;
-  to?: never;
-  effect?: string;
-  effectOptions?: gsap.TweenVars;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from: gsap.TweenVars;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from: gsap.TweenVars;
-  to?: never;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from?: never;
-  to: gsap.TweenVars;
-  effect?: never;
-  effectOptions?: never;
-} & __VLS_ModelProps) | (DejaVueAnimationComponentProps & AnimationNestableChild & {
-  progress?: number;
-} & {
-  trigger?: never;
-  triggerAction?: never;
-  triggerOptions?: never;
-} & {
-  from?: never;
-  to?: never;
-  effect?: string;
-  effectOptions?: gsap.TweenVars;
-} & __VLS_ModelProps)> & Readonly<{
-  "onUpdate:progress"?: ((value: number) => any) | undefined;
-  onComplete?: ((...args: any[]) => any) | undefined;
-  onInterrupt?: ((...args: any[]) => any) | undefined;
-  onRepeat?: ((...args: any[]) => any) | undefined;
-  onReverseComplete?: ((...args: any[]) => any) | undefined;
-  onStart?: ((...args: any[]) => any) | undefined;
-  onUpdate?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default$3: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {
@@ -563,4 +390,4 @@ type __VLS_WithSlots<T, S> = T & {
   };
 };
 //#endregion
-export { ANIMATION_EVENTS, Animation, type AnimationChild, type AnimationComposeDefinition, AnimationControls, type AnimationDirection, type AnimationEvent, type AnimationEventEmitter, type AnimationNestableChild, AnimationNestingOptions, AnimationNestingTarget, AnimationScopeOptions, type AnimationTriggerOptions, type ControllableAnimation, type DejaVueAnimationComponentProps, type DejaVueAnimationExposed, type DejaVueAnimationInstance, type DejaVueAnimationParent, type DejaVueAnimationScopeProps, type DejaVueComponent, type DejaVueMarkerExposed, type DejaVueMarkerInstance, type DejaVueMarkerScopeProps, type DejaVueNode, type DejaVueSplitTextExposed, type DejaVueSplitTextInstance, type DejaVueSplitTextScopeProps, _default as Marker, type NonEmptyArray, type PlainObject, _default$1 as SplitText, SplitTextOptions, _default$2 as Timeline, _default$3 as Tween, type TweenAction, type TweenDefinition, type WrappableComponent, applyTimelineTotalDuration, cloneObject, dejaVueParentInstance, getScrollTriggerToggleActionByEvent, isEmptyTarget, isObject, patchArray, patchObject, resolveChildrenTweenTarget, resolveTimelinePosition, stripScrollTriggerVars, syncData, toNonEmptyArray, useAnimationControls, useAnimationNesting, useAnimationScope, useSplitText, useStableObjectProp, useTweenVars };
+export { ANIMATION_EVENTS, Animation, type AnimationChild, type AnimationComposeDefinition, type AnimationComposeTween, AnimationControls, type AnimationDirection, type AnimationEvent, type AnimationEventEmitter, type AnimationNestableChild, AnimationNestingOptions, AnimationNestingTarget, AnimationOptions, AnimationScopeOptions, type AnimationTriggerOptions, type ControllableAnimation, type DejaVueAnimationComponentProps, type DejaVueAnimationExposed, type DejaVueAnimationInstance, type DejaVueAnimationParent, type DejaVueAnimationScopeProps, type DejaVueComponent, type DejaVueMarkerExposed, type DejaVueMarkerInstance, type DejaVueMarkerScopeProps, type DejaVueNode, type DejaVueSplitTextExposed, type DejaVueSplitTextInstance, type DejaVueSplitTextScopeProps, _default as Marker, type NonEmptyArray, type PlainObject, ReducedMotionMode, _default$1 as SplitText, SplitTextOptions, _default$2 as Timeline, _default$3 as Tween, type TweenAction, type TweenDefinition, type WrappableComponent, applyTimelineTotalDuration, cloneObject, dejaVueParentInstance, getReducedMotionTween, getScrollTriggerToggleActionByEvent, isEmptyTarget, isObject, patchArray, patchObject, resolveChildrenTweenTarget, resolveTimelinePosition, stripScrollTriggerVars, syncData, toNonEmptyArray, useAnimationControls, useAnimationNesting, useAnimationScope, useReducedMotion, useSplitText, useStableObjectProp, useTweenVars };

package/dist/index.js

@@ -54,6 +54,20 @@ function applyTimelineTotalDuration(timeline) {
 	const totalDuration = "totalDuration" in (timeline.data || {}) ? timeline.data.totalDuration : void 0;
 	if (totalDuration) timeline.duration(totalDuration);
 }
+function getReducedMotionTween({ method, vars }) {
+	if (method === "from") return;
+	if (method === "fromTo") {
+		const [_, to] = vars;
+		return {
+			method: "set",
+			vars: to
+		};
+	}
+	return {
+		method: "set",
+		vars
+	};
+}
 function getScrollTriggerToggleActionByEvent(event, instance) {
 	if (!instance?.vars.toggleActions) return;
 	const actions = instance.vars.toggleActions.split(" ");
@@ -129,11 +143,14 @@ if (typeof window !== "undefined") gsap.registerPlugin(ScrollTrigger);
 var Animation = class extends EventBus {
 	ctx;
 	scrollTrigger;
+	reducedMotion;
 	timeline;
 	constructor(options) {
 		super(ANIMATION_EVENTS);
+		const { reducedMotion, ...timelineOptions } = options ?? {};
+		this.reducedMotion = !!reducedMotion;
 		this.timeline = gsap.timeline({
-			...options,
+			...timelineOptions,
 			onComplete: () => this.dispatch("complete", this),
 			onInterrupt: () => this.dispatch("interrupt", this),
 			onRepeat: () => this.dispatch("repeat", this),
@@ -149,7 +166,7 @@ var Animation = class extends EventBus {
 	}
 	attachScrollTrigger(vars) {
 		this.scrollTrigger?.kill();
-		if (!vars) return;
+		if (!vars || this.reducedMotion) return;
 		this.scrollTrigger = ScrollTrigger.create({
 			...vars,
 			animation: this.timeline,
@@ -177,6 +194,12 @@ var Animation = class extends EventBus {
 			this.ctx = gsap.context(() => this.compose(definition, false));
 			return;
 		}
+		if (this.reducedMotion) {
+			this.attachScrollTrigger(null);
+			const { method, vars } = getReducedMotionTween(definition) || {};
+			if (method && vars) this.timeline[method](definition.target, vars);
+			return;
+		}
 		let scrollTriggerVars = null;
 		if (definition.method === "fromTo") {
 			const [from, to] = definition.vars;
@@ -383,6 +406,22 @@ function useAnimationScope(options) {
 	};
 }
 //#endregion
+//#region src/composables/useReducedMotion.ts
+const systemReducedMotion = ref(false);
+if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+	const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+	systemReducedMotion.value = mediaQuery.matches;
+	mediaQuery.addEventListener("change", (e) => systemReducedMotion.value = e.matches);
+}
+function useReducedMotion(mode) {
+	const parent = inject(dejaVueParentInstance, null);
+	const reducedMotionMode = computed(() => toValue(mode) ?? unref(parent?.reducedMotion) ?? "auto");
+	return {
+		computed: computed(() => reducedMotionMode.value === "auto" ? systemReducedMotion.value : reducedMotionMode.value),
+		system: systemReducedMotion
+	};
+}
+//#endregion
 //#region src/composables/useSplitText.ts
 if (typeof window !== "undefined") gsap.registerPlugin(SplitText);
 function useSplitText(domTarget, options) {
@@ -623,6 +662,11 @@ var SplitText_default = /* @__PURE__ */ defineComponent({
 var Timeline_default = /* @__PURE__ */ defineComponent({
 	__name: "Timeline",
 	props: /*@__PURE__*/ mergeModels({
+		reducedMotion: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
 		revertOnDispose: {
 			type: Boolean,
 			required: false
@@ -661,11 +705,13 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 		},
 		duration: {
 			type: Number,
-			required: false
+			required: false,
+			default: -Infinity
 		},
 		options: {
 			type: null,
-			required: false
+			required: false,
+			default: () => ({})
 		}
 	}, {
 		"progress": {
@@ -680,6 +726,7 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 		const emit = __emit;
 		const { AnimationScope, root, tweenTarget } = useAnimationScope({ tweenTarget: () => props.tweenTarget });
 		const options = useStableObjectProp(() => props.options);
+		const { computed: reducedMotion } = useReducedMotion(() => props.reducedMotion);
 		const vars = computed(() => {
 			const tl = cloneObject(options);
 			return {
@@ -692,7 +739,8 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 			data: typeof props.duration === "number" && props.duration > 0 ? {
 				...vars.value?.timeline.data,
 				totalDuration: props.duration
-			} : vars.value?.timeline.data
+			} : vars.value?.timeline.data,
+			reducedMotion: reducedMotion.value
 		});
 		const progress = useModel(__props, "progress");
 		const { controlled, direction } = useAnimationControls(animation, {
@@ -713,6 +761,7 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 			direction,
 			parent,
 			progress,
+			reducedMotion,
 			seamless: computed(() => props.seamless),
 			tweenTarget
 		};
@@ -721,11 +770,14 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 			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);
+		watch([reducedMotion, () => vars.value.scrollTrigger], async ([hasReducedMotion, scrollTrigger]) => {
+			animation.reducedMotion = hasReducedMotion;
+			if (animation.reducedMotion || !scrollTrigger || !Object.keys(scrollTrigger).length) {
+				animation.attachScrollTrigger(null);
+				return;
+			}
+			await nextTick();
+			animation.attachScrollTrigger(scrollTrigger);
 		}, { immediate: true });
 		watch(() => props.duration, (duration) => {
 			if (typeof duration === "number" && duration > 0) {
@@ -744,12 +796,14 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 				animation: unref(animation),
 				direction: unref(direction),
 				parent: unref(parent),
-				progress: progress.value
+				progress: progress.value,
+				"reduced-motion": unref(reducedMotion)
 			}, null, 8, [
 				"animation",
 				"direction",
 				"parent",
-				"progress"
+				"progress",
+				"reduced-motion"
 			]);
 		};
 	}
@@ -759,6 +813,11 @@ var Timeline_default = /* @__PURE__ */ defineComponent({
 var Tween_default = /* @__PURE__ */ defineComponent({
 	__name: "Tween",
 	props: /*@__PURE__*/ mergeModels({
+		reducedMotion: {
+			type: [Boolean, String],
+			required: false,
+			default: void 0
+		},
 		revertOnDispose: {
 			type: Boolean,
 			required: false
@@ -823,7 +882,8 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const { AnimationScope, root, tweenTarget } = useAnimationScope({ tweenTarget: () => props.tweenTarget });
-		const animation = new Animation();
+		const { computed: reducedMotion } = useReducedMotion(() => props.reducedMotion);
+		const animation = new Animation({ reducedMotion: reducedMotion.value });
 		const progress = useModel(__props, "progress");
 		const { controlled, direction } = useAnimationControls(animation, {
 			progress,
@@ -844,6 +904,7 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 			direction,
 			parent,
 			progress,
+			reducedMotion,
 			seamless: computed(() => props.seamless),
 			tweenTarget
 		};
@@ -852,8 +913,10 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 			root,
 			tweenMethod,
 			tweenTarget,
-			tweenVars
-		], ([scope, method, target, vars]) => {
+			tweenVars,
+			reducedMotion
+		], ([scope, method, target, vars, hasReducedMotion]) => {
+			animation.reducedMotion = hasReducedMotion;
 			if (isEmptyTarget(target) || !method) return;
 			animation.clear(props.revertOnDispose);
 			const definition = {
@@ -873,15 +936,17 @@ var Tween_default = /* @__PURE__ */ defineComponent({
 				animation: unref(animation),
 				direction: unref(direction),
 				parent: unref(parent),
-				progress: progress.value
+				progress: progress.value,
+				"reduced-motion": unref(reducedMotion)
 			}, null, 8, [
 				"animation",
 				"direction",
 				"parent",
-				"progress"
+				"progress",
+				"reduced-motion"
 			]);
 		};
 	}
 });
 //#endregion
-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 };
+export { ANIMATION_EVENTS, Animation, Marker_default as Marker, SplitText_default as SplitText, Timeline_default as Timeline, Tween_default as Tween, applyTimelineTotalDuration, cloneObject, dejaVueParentInstance, getReducedMotionTween, getScrollTriggerToggleActionByEvent, isEmptyTarget, isObject, patchArray, patchObject, resolveChildrenTweenTarget, resolveTimelinePosition, stripScrollTriggerVars, syncData, toNonEmptyArray, useAnimationControls, useAnimationNesting, useAnimationScope, useReducedMotion, useSplitText, useStableObjectProp, useTweenVars };

package/package.json

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