motion-v 2.0.1 → 2.2.0

package/dist/es/components/reorder/index.d.ts

@@ -747,6 +747,7 @@ export declare const ReorderGroup: <T, K, V>(__VLS_props: NonNullable<Awaited<ty
         inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
             once?: boolean;
         };
+        inherit?: boolean;
         onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
         onDragTransitionEnd?: () => void;
         onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
@@ -757,7 +758,6 @@ export declare const ReorderGroup: <T, K, V>(__VLS_props: NonNullable<Awaited<ty
         dragTransition?: import('motion-dom').InertiaOptions;
         transformTemplate?: (transform: import('motion-dom').TransformProperties, generatedTransform: string) => string;
         dragDirectionLock?: boolean;
-        inherit?: boolean;
         onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
         onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
         onBeforeLayoutMeasure?: (box: import('motion-utils').Box) => void;
@@ -1532,6 +1532,7 @@ export declare const ReorderItem: <T extends import('../..').ElementType = "li",
         inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
             once?: boolean;
         };
+        inherit?: boolean;
         onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
         onDragTransitionEnd?: () => void;
         onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
@@ -1542,7 +1543,6 @@ export declare const ReorderItem: <T extends import('../..').ElementType = "li",
         dragTransition?: import('motion-dom').InertiaOptions;
         transformTemplate?: (transform: import('motion-dom').TransformProperties, generatedTransform: string) => string;
         dragDirectionLock?: boolean;
-        inherit?: boolean;
         onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
         onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
         onBeforeLayoutMeasure?: (box: import('motion-utils').Box) => void;
@@ -2320,6 +2320,7 @@ export declare const Reorder: {
             inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
                 once?: boolean;
             };
+            inherit?: boolean;
             onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
             onDragTransitionEnd?: () => void;
             onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
@@ -2330,7 +2331,6 @@ export declare const Reorder: {
             dragTransition?: import('motion-dom').InertiaOptions;
             transformTemplate?: (transform: import('motion-dom').TransformProperties, generatedTransform: string) => string;
             dragDirectionLock?: boolean;
-            inherit?: boolean;
             onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
             onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
             onBeforeLayoutMeasure?: (box: import('motion-utils').Box) => void;
@@ -3105,6 +3105,7 @@ export declare const Reorder: {
             inViewOptions?: import('../../features/gestures/in-view/types').InViewOptions & {
                 once?: boolean;
             };
+            inherit?: boolean;
             onUpdate?: (latest: import('motion-dom').ResolvedValues) => void;
             onDragTransitionEnd?: () => void;
             onDragEnd?: (event: PointerEvent, info: import('motion-dom').PanInfo) => void;
@@ -3115,7 +3116,6 @@ export declare const Reorder: {
             dragTransition?: import('motion-dom').InertiaOptions;
             transformTemplate?: (transform: import('motion-dom').TransformProperties, generatedTransform: string) => string;
             dragDirectionLock?: boolean;
-            inherit?: boolean;
             onAnimationComplete?: (definition: import('../..').Options["animate"]) => void;
             onAnimationStart?: (definition: import('../..').Options["animate"]) => void;
             onBeforeLayoutMeasure?: (box: import('motion-utils').Box) => void;

package/dist/es/index.d.ts

@@ -1,5 +1,5 @@
 export * from 'framer-motion/dom';
-export { delay as delayInMs, addScaleCorrector } from 'motion-dom';
+export { delay as delayInMs, addScaleCorrector, attachFollow, attachSpring } from 'motion-dom';
 export { motionValue as useMotionValue } from 'motion-dom';
 export * from './components';
 export { default as LayoutGroup } from './components/LayoutGroup';
@@ -7,7 +7,7 @@ export { useLayoutGroup } from './components/use-layout-group';
 export type { LayoutGroupProps } from './components/use-layout-group';
 export * from './components/context';
 export * from './value';
-export * from './types';
+export type * from './types';
 export * from './animation';
 export * from './utils';
 export { useDragControls } from './features/gestures/drag/use-drag-controls';

package/dist/es/index.mjs

@@ -19,7 +19,8 @@ import { useTransform } from "./value/use-transform.mjs";
 import { useTime } from "./value/use-time.mjs";
 import { useMotionTemplate } from "./value/use-motion-template.mjs";
 import { useMotionValueEvent } from "./value/use-motion-value-event.mjs";
-import { useSpring } from "./value/use-spring.mjs";
+import { useFollowValue, useSpring } from "./value/use-spring.mjs";
+import { ScrollOffset, offsetToViewTimelineRange } from "./value/scroll/offsets.mjs";
 import { useScroll } from "./value/use-scroll.mjs";
 import { useVelocity } from "./value/use-velocity.mjs";
 import { Reorder, ReorderGroup, ReorderItem } from "./components/reorder/index.mjs";
@@ -34,6 +35,6 @@ import { useReducedMotion } from "./animation/hooks/use-reduced-motion.mjs";
 import { useDragControls } from "./features/gestures/drag/use-drag-controls.mjs";
 import { domAnimation } from "./features/dom-animation.mjs";
 import { MotionPlugin, createMotionDirective, createPresetDirective, vMotion } from "./directive/index.mjs";
-import { addScaleCorrector, delay as delayInMs, motionValue as useMotionValue } from "motion-dom";
+import { addScaleCorrector, attachFollow, attachSpring, delay as delayInMs, motionValue as useMotionValue } from "motion-dom";
 export * from "framer-motion/dom";
-export { AnimatePresence_default as AnimatePresence, LayoutGroup_default as LayoutGroup, LazyMotion, M, Motion, MotionConfig_default as MotionConfig, MotionPlugin, Reorder, ReorderGroup, ReorderItem, RowValue_default as RowValue, addScaleCorrector, createContext, createMotionDirective, createPresetDirective, delayInMs, domAnimation, domMax, getContextWindow, injectLayoutGroup, injectMotion, layoutGroupInjectionKey, m, motion, motionGlobalConfig, motionInjectionKey, mountedStates, provideLayoutGroup, provideMotion, provideMotionConfig, resolveMotionProps, useAnimate, useAnimationControls, useAnimationFrame, useCombineMotionValues, useComputed, useDomRef, useDragControls, useInView, useLayoutGroup, useMotionConfig, useMotionTemplate, useMotionValue, useMotionValueEvent, usePageInView, useReducedMotion, useScroll, useSpring, useTime, useTransform, useVelocity, vMotion };
+export { AnimatePresence_default as AnimatePresence, LayoutGroup_default as LayoutGroup, LazyMotion, M, Motion, MotionConfig_default as MotionConfig, MotionPlugin, Reorder, ReorderGroup, ReorderItem, RowValue_default as RowValue, ScrollOffset, addScaleCorrector, attachFollow, attachSpring, createContext, createMotionDirective, createPresetDirective, delayInMs, domAnimation, domMax, getContextWindow, injectLayoutGroup, injectMotion, layoutGroupInjectionKey, m, motion, motionGlobalConfig, motionInjectionKey, mountedStates, offsetToViewTimelineRange, provideLayoutGroup, provideMotion, provideMotionConfig, resolveMotionProps, useAnimate, useAnimationControls, useAnimationFrame, useCombineMotionValues, useComputed, useDomRef, useDragControls, useFollowValue, useInView, useLayoutGroup, useMotionConfig, useMotionTemplate, useMotionValue, useMotionValueEvent, usePageInView, useReducedMotion, useScroll, useSpring, useTime, useTransform, useVelocity, vMotion };

package/dist/es/types/framer-motion.d.ts

@@ -6,11 +6,21 @@ export type EdgeString = NamedEdges | EdgeUnit | `${number}`;
 export type Edge = EdgeString | number;
 export type ProgressIntersection = [number, number];
 export type Intersection = `${Edge} ${Edge}`;
+/**
+ * Scroll offset definition for useScroll.
+ * Public value export (const presets) lives in value/scroll/offsets.ts.
+ */
 export type ScrollOffset = Array<Edge | Intersection | ProgressIntersection>;
 export interface ScrollInfoOptions {
     container?: HTMLElement;
     target?: Element;
     axis?: 'x' | 'y';
     offset?: ScrollOffset;
+    /**
+     * When true, enables per-frame checking of scrollWidth/scrollHeight
+     * to detect content size changes and recalculate scroll progress.
+     * @default false
+     */
+    trackContentSize?: boolean;
 }
 export type $Transition = MotionNodeOptions['transition'];

package/dist/es/types/index.d.ts

@@ -1,4 +1,4 @@
-export * from './framer-motion';
+export type { SupportedEdgeUnit, EdgeUnit, NamedEdges, EdgeString, Edge, ProgressIntersection, Intersection, ScrollInfoOptions, $Transition, } from './framer-motion';
 export * from './motion-values';
 export * from './state';
 export * from './common';

package/dist/es/value/index.d.ts

@@ -7,3 +7,4 @@ export * from './use-motion-value-event';
 export * from './use-spring';
 export * from './use-scroll';
 export * from './use-velocity';
+export * from './scroll/offsets';

package/dist/es/value/scroll/offsets.d.ts

@@ -0,0 +1,31 @@
+import { Edge, Intersection, ProgressIntersection } from '../../types';
+type ScrollOffsetType = Array<Edge | Intersection | ProgressIntersection>;
+/**
+ * Preset scroll offsets matching framer-motion's ScrollOffset presets.
+ * Use with useScroll's offset option to define scroll-linked animation ranges.
+ *
+ * @example
+ * useScroll({ target: el, offset: ScrollOffset.Enter })
+ */
+export declare const ScrollOffset: {
+    /** Progress 0→1 as target enters the container */
+    Enter: readonly [readonly [0, 1], readonly [1, 1]];
+    /** Progress 0→1 as target exits the container */
+    Exit: readonly [readonly [0, 0], readonly [1, 0]];
+    /** Progress 0→1 across any overlap between target and container */
+    Any: readonly [readonly [1, 0], readonly [0, 1]];
+    /** Progress 0→1 while target is fully contained within the container */
+    All: readonly [readonly [0, 0], readonly [1, 1]];
+};
+export type ScrollOffset = ScrollOffsetType;
+/**
+ * Maps a ScrollOffset array to a ViewTimeline named range.
+ * Returns undefined for unrecognised patterns — signals fallback to JS scroll tracking.
+ *
+ * Ported from framer-motion's internal render/dom/scroll/utils/offset-to-range.mjs
+ */
+export declare function offsetToViewTimelineRange(offset: ScrollOffsetType | undefined): {
+    rangeStart: string;
+    rangeEnd: string;
+} | undefined;
+export {};

package/dist/es/value/scroll/offsets.mjs

@@ -0,0 +1,56 @@
+const ScrollOffset = {
+	Enter: [[0, 1], [1, 1]],
+	Exit: [[0, 0], [1, 0]],
+	Any: [[1, 0], [0, 1]],
+	All: [[0, 0], [1, 1]]
+};
+var presets = [
+	[ScrollOffset.Enter, "entry"],
+	[ScrollOffset.Exit, "exit"],
+	[ScrollOffset.Any, "cover"],
+	[ScrollOffset.All, "contain"]
+];
+var stringToProgress = {
+	start: 0,
+	end: 1
+};
+function parseStringOffset(s) {
+	const parts = s.trim().split(/\s+/);
+	if (parts.length !== 2) return void 0;
+	const a = stringToProgress[parts[0]];
+	const b = stringToProgress[parts[1]];
+	if (a === void 0 || b === void 0) return void 0;
+	return [a, b];
+}
+function normaliseOffset(offset) {
+	if (offset.length !== 2) return void 0;
+	const result = [];
+	for (const item of offset) if (Array.isArray(item)) result.push(item);
+	else if (typeof item === "string") {
+		const parsed = parseStringOffset(item);
+		if (!parsed) return void 0;
+		result.push(parsed);
+	} else return;
+	return result;
+}
+function matchesPreset(offset, preset) {
+	const normalised = normaliseOffset(offset);
+	if (!normalised) return false;
+	for (let i = 0; i < 2; i++) {
+		const o = normalised[i];
+		const p = preset[i];
+		if (o[0] !== p[0] || o[1] !== p[1]) return false;
+	}
+	return true;
+}
+function offsetToViewTimelineRange(offset) {
+	if (!offset) return {
+		rangeStart: "contain 0%",
+		rangeEnd: "contain 100%"
+	};
+	for (const [preset, name] of presets) if (matchesPreset(offset, preset)) return {
+		rangeStart: `${name} 0%`,
+		rangeEnd: `${name} 100%`
+	};
+}
+export { ScrollOffset, offsetToViewTimelineRange };

package/dist/es/value/use-combine-values.mjs

@@ -1,5 +1,5 @@
 import { cancelFrame, frame, motionValue } from "motion-dom";
-import { onUnmounted } from "vue";
+import { getCurrentInstance, onUnmounted } from "vue";
 function useCombineMotionValues(combineValues) {
 	const value = motionValue(combineValues());
 	const updateValue = () => value.set(combineValues());
@@ -12,7 +12,7 @@ function useCombineMotionValues(combineValues) {
 		subscriptions.forEach((unsubscribe$1) => unsubscribe$1());
 		cancelFrame(updateValue);
 	};
-	onUnmounted(() => {
+	if (getCurrentInstance()) onUnmounted(() => {
 		unsubscribe();
 	});
 	return {

package/dist/es/value/use-scroll.d.ts

@@ -1,11 +1,11 @@
+import { MaybeRefOrGetter } from 'vue';
 import { ScrollInfoOptions } from '../types';
 import { MaybeComputedElementRef } from '@vueuse/core';
-import { ToRefs } from '../types/common';
-export interface UseScrollOptions extends Omit<ToRefs<ScrollInfoOptions>, 'container' | 'target'> {
+export interface UseScrollOptions extends Omit<ScrollInfoOptions, 'container' | 'target'> {
     container?: MaybeComputedElementRef;
     target?: MaybeComputedElementRef;
 }
-export declare function useScroll(scrollOptions?: UseScrollOptions): {
+export declare function useScroll(options?: MaybeRefOrGetter<UseScrollOptions>): {
     scrollX: import('motion-dom').MotionValue<number>;
     scrollY: import('motion-dom').MotionValue<number>;
     scrollXProgress: import('motion-dom').MotionValue<number>;

package/dist/es/value/use-scroll.mjs

@@ -1,8 +1,9 @@
 import { getElement } from "../components/hooks/use-motion-elm.mjs";
 import { isSSR } from "../utils/is.mjs";
+import { offsetToViewTimelineRange } from "./scroll/offsets.mjs";
 import { scroll } from "framer-motion/dom";
-import { motionValue as motionValue$1 } from "motion-dom";
-import { unref, watchEffect } from "vue";
+import { motionValue as motionValue$1, supportsScrollTimeline, supportsViewTimeline } from "motion-dom";
+import { toValue, watchEffect } from "vue";
 function createScrollMotionValues() {
 	return {
 		scrollX: motionValue$1(0),
@@ -11,20 +12,46 @@ function createScrollMotionValues() {
 		scrollYProgress: motionValue$1(0)
 	};
 }
-function useScroll(scrollOptions = {}) {
+function canAccelerateScroll(target, offset) {
+	if (isSSR) return false;
+	return target ? supportsViewTimeline() && !!offsetToViewTimelineRange(offset) : supportsScrollTimeline();
+}
+function makeAccelerateConfig(axis, options) {
+	return {
+		factory: (animation) => {
+			const { container, target, ...rest } = toValue(options);
+			return scroll(animation, {
+				...rest,
+				axis,
+				container: getElement(container),
+				target: getElement(target)
+			});
+		},
+		times: [0, 1],
+		keyframes: [0, 1],
+		ease: (v) => v,
+		duration: 1
+	};
+}
+function useScroll(options = {}) {
 	const values = createScrollMotionValues();
+	const { target, offset } = toValue(options);
+	if (canAccelerateScroll(target, offset)) {
+		values.scrollXProgress.accelerate = makeAccelerateConfig("x", options);
+		values.scrollYProgress.accelerate = makeAccelerateConfig("y", options);
+	}
 	watchEffect((onCleanup) => {
 		if (isSSR) return;
+		const { container, target: target$1, ...rest } = toValue(options);
 		const cleanup = scroll((_progress, { x, y }) => {
 			values.scrollX.set(x.current);
 			values.scrollXProgress.set(x.progress);
 			values.scrollY.set(y.current);
 			values.scrollYProgress.set(y.progress);
 		}, {
-			offset: unref(scrollOptions.offset),
-			axis: unref(scrollOptions.axis),
-			container: getElement(scrollOptions.container),
-			target: getElement(scrollOptions.target)
+			...rest,
+			container: getElement(container),
+			target: getElement(target$1)
 		});
 		onCleanup(() => {
 			cleanup();

package/dist/es/value/use-spring.d.ts

@@ -1,4 +1,7 @@
-import { Ref } from 'vue';
+import { MaybeRef } from 'vue';
 import { MotionValue } from 'framer-motion/dom';
-import { SpringOptions } from 'motion-dom';
-export declare function useSpring(source: MotionValue<string> | MotionValue<number> | number, config?: SpringOptions | Ref<SpringOptions>): MotionValue<number>;
+import { FollowValueOptions, SpringOptions } from 'motion-dom';
+type AnyResolvedKeyframe = string | number;
+export declare function useFollowValue<T extends AnyResolvedKeyframe>(source: T | MotionValue<T>, options?: MaybeRef<FollowValueOptions>): MotionValue<T>;
+export declare function useSpring(source: MotionValue<string> | MotionValue<number> | number, config?: MaybeRef<SpringOptions>): MotionValue<string | number>;
+export {};

package/dist/es/value/use-spring.mjs

@@ -1,49 +1,28 @@
-import { animateValue, frame, frameData, isMotionValue, motionValue } from "framer-motion/dom";
-import { isRef, watch } from "vue";
-function toNumber(v) {
-	if (typeof v === "number") return v;
-	return parseFloat(v);
+import { isMotionValue, motionValue } from "framer-motion/dom";
+import { attachFollow } from "motion-dom";
+import { toValue, watch } from "vue";
+function useFollowValue(source, options = {}) {
+	const value = motionValue(isMotionValue(source) ? source.get() : source);
+	let cleanup;
+	watch(() => toValue(options), (_1, _2, onCleanup) => {
+		cleanup = attachFollow(value, source, toValue(options));
+		onCleanup(() => {
+			cleanup?.();
+		});
+	}, { immediate: true });
+	return value;
 }
 function useSpring(source, config = {}) {
-	let activeSpringAnimation = null;
-	const value = motionValue(isMotionValue(source) ? toNumber(source.get()) : source);
-	let latestValue = value.get();
-	let latestSetter = () => {};
-	const stopAnimation = () => {
-		if (activeSpringAnimation) {
-			activeSpringAnimation.stop();
-			activeSpringAnimation = null;
-		}
-	};
-	const startAnimation = () => {
-		const animation = activeSpringAnimation;
-		if (animation?.time === 0) animation.sample(frameData.delta);
-		stopAnimation();
-		const springConfig = isRef(config) ? config.value : config;
-		activeSpringAnimation = animateValue({
-			keyframes: [value.get(), latestValue],
-			velocity: value.getVelocity(),
+	const value = motionValue(isMotionValue(source) ? source.get() : source);
+	watch(() => toValue(config), (_1, _2, onCleanup) => {
+		const cleanup = attachFollow(value, source, {
 			type: "spring",
-			restDelta: .001,
-			restSpeed: .01,
-			...springConfig,
-			onUpdate: latestSetter
+			...toValue(config)
+		});
+		onCleanup(() => {
+			cleanup?.();
 		});
-	};
-	watch(() => {
-		if (isRef(config)) return config.value;
-		return config;
-	}, () => {
-		value.attach((v, set) => {
-			latestValue = v;
-			latestSetter = set;
-			frame.update(startAnimation);
-			return value.get();
-		}, stopAnimation);
 	}, { immediate: true });
-	if (isMotionValue(source)) source.on("change", (v) => {
-		value.set(toNumber(v));
-	});
 	return value;
 }
-export { useSpring };
+export { useFollowValue, useSpring };

package/dist/es/value/use-transform.mjs

@@ -5,12 +5,12 @@ import { isRef, watch } from "vue";
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
 	if (typeof input === "function") return useComputed(input);
 	if (outputRange && !Array.isArray(outputRange) && typeof outputRange === "object") {
-		const result = {};
+		const result$1 = {};
 		for (const key in outputRange) if (Object.prototype.hasOwnProperty.call(outputRange, key)) {
 			const keyOutputRange = outputRange[key];
-			result[key] = useTransform(input, inputRangeOrTransformer, keyOutputRange, options);
+			result$1[key] = useTransform(input, inputRangeOrTransformer, keyOutputRange, options);
 		}
-		return result;
+		return result$1;
 	}
 	let inputValues;
 	let transformer;
@@ -32,9 +32,23 @@ function useTransform(input, inputRangeOrTransformer, outputRange, options) {
 		transformer = transform(inputRangeOrTransformer, outputRange, options);
 		inputValues = Array.isArray(input) ? input : [input];
 	}
-	return Array.isArray(input) ? useListTransform(inputValues, transformer) : useListTransform(inputValues, (values) => {
+	const result = Array.isArray(input) ? useListTransform(inputValues, transformer) : useListTransform(inputValues, (values) => {
 		return transformer(values[0]);
 	});
+	if (!Array.isArray(input)) {
+		const inputAccelerate = input.accelerate;
+		if (inputAccelerate && !inputAccelerate.isTransformed && typeof inputRangeOrTransformer !== "function" && Array.isArray(outputRange) && options?.clamp !== false) {
+			const resolvedInputRange = isRef(inputRangeOrTransformer) ? inputRangeOrTransformer.value : inputRangeOrTransformer;
+			result.accelerate = {
+				...inputAccelerate,
+				times: resolvedInputRange,
+				keyframes: outputRange,
+				isTransformed: true,
+				...options?.ease ? { ease: options.ease } : {}
+			};
+		}
+	}
+	return result;
 }
 function useListTransform(values, transformer) {
 	const latest = [];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "motion-v",
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "",
   "author": "",
   "license": "MIT",
@@ -55,10 +55,10 @@
     "vue": ">=3.0.0"
   },
   "dependencies": {
-    "framer-motion": "^12.29.2",
+    "framer-motion": "^12.38.0",
     "hey-listen": "^1.0.8",
-    "motion-dom": "^12.29.2",
-    "motion-utils": "^12.29.2"
+    "motion-dom": "^12.38.0",
+    "motion-utils": "^12.36.0"
   },
   "scripts": {
     "dev": "vite build --watch",