motion-v 0.6.2 → 0.7.1

package/dist/es/state/motion-state.mjs

@@ -1,19 +1,12 @@
 import { invariant } from "hey-listen";
 import { visualElementStore } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/store.mjs";
-import { resolveVariant, getOptions, hasChanged } from "./utils.mjs";
+import { isDef } from "@vueuse/core";
+import { resolveVariant } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
-import { style } from "./style.mjs";
-import { transformResetValue } from "./transform.mjs";
-import { motionEvent } from "./event.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
-import { animateVariantsChildren } from "./animate-variants-children.mjs";
 import { doneCallbacks } from "../components/presence.mjs";
+import { animateUpdates } from "./animate-updates.mjs";
 import { frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
-import { noop } from "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
-import "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
-import { animate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
-import { isDef } from "../external/.pnpm/@vueuse_shared@12.0.0_typescript@5.7.2/external/@vueuse/shared/index.mjs";
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
@@ -24,10 +17,11 @@ class MotionState {
     this.isVShow = false;
     this.children = /* @__PURE__ */ new Set();
     this.activeStates = {
-      // initial: true,
+      initial: true,
       animate: true
     };
     this._context = null;
+    this.animateUpdates = animateUpdates;
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
@@ -58,6 +52,7 @@ class MotionState {
     this.initTarget(initialVariantSource);
     this.featureManager = new FeatureManager(this);
   }
+  // Get animation context, falling back to parent context
   get context() {
     if (!this._context) {
       const handler = {
@@ -70,13 +65,16 @@ class MotionState {
     }
     return this._context;
   }
+  // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
     this.target = {};
   }
+  // Get initial animation state
   get initial() {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
+  // Update visual element with new options
   updateOptions() {
     this.visualElement.update({
       ...this.options,
@@ -91,6 +89,7 @@ class MotionState {
   beforeMount() {
     this.featureManager.beforeMount();
   }
+  // Mount motion state to DOM element
   mount(element, options, notAnimate = false) {
     invariant(
       Boolean(element),
@@ -115,13 +114,14 @@ class MotionState {
       }
     }
     this.featureManager.mount();
-    if (!notAnimate) {
-      this.animateUpdates(true);
+    if (!notAnimate && this.options.animate) {
+      this.animateUpdates();
     }
   }
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
+  // Unmount motion state and optionally unmount children
   unmount(unMountChildren = false) {
     var _a, _b, _c;
     mountedStates.delete(this.element);
@@ -147,6 +147,7 @@ class MotionState {
   beforeUpdate() {
     this.featureManager.beforeUpdate();
   }
+  // Update motion state with new options
   update(options, notAnimate = false) {
     const prevAnimate = JSON.stringify(this.options.animate);
     this.options = options;
@@ -160,122 +161,20 @@ class MotionState {
       this.animateUpdates();
     }
   }
+  // Set animation state active status
   setActive(name, isActive, isAnimate = true) {
     var _a;
     if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
     (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
-      child.state.setActive(name, isActive, !isActive);
+      child.state.setActive(name, isActive, false);
     });
     if (isAnimate) {
-      this.animateUpdates();
-    }
-  }
-  animateUpdates(isInitial = false) {
-    const prevTarget = this.target;
-    this.target = {};
-    const activeState = {};
-    const animationOptions = {};
-    let transition;
-    for (const name of STATE_TYPES) {
-      if (name === "initial") {
-        if (!isInitial) {
-          continue;
-        }
-      }
-      if (!this.activeStates[name] && name !== "initial") {
-        continue;
-      }
-      const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
-      const variant = resolveVariant(
-        definition,
-        this.options.variants,
-        this.options.custom
-      );
-      transition = Object.assign({}, this.options.transition, variant == null ? void 0 : variant.transition);
-      if (typeof definition === "string") {
-        activeState[name] = {
-          definition,
-          transition
-        };
-      }
-      if (!variant)
-        continue;
-      const allTarget = { ...prevTarget, ...variant };
-      for (const key in allTarget) {
-        if (key === "transition")
-          continue;
-        this.target[key] = variant[key];
-        animationOptions[key] = getOptions(
-          transition,
-          key
-        );
-      }
-    }
-    const allTargetKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(this.target),
-      ...Object.keys(prevTarget)
-    ]);
-    const animationFactories = [];
-    allTargetKeys.forEach((key) => {
-      var _a;
-      if (this.target[key] === void 0) {
-        this.target[key] = this.baseTarget[key];
-      }
-      if (hasChanged(prevTarget[key], this.target[key])) {
-        (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
-        const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
-        animationFactories.push(
-          () => {
-            return animate(
-              this.element,
-              {
-                [key]: keyValue
-              },
-              animationOptions[key] || {}
-            );
-          }
-        );
-      }
-    });
-    let getChildAnimations = () => Promise.resolve();
-    let childAnimations = [];
-    if (Object.keys(activeState).length) {
-      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState, isInitial);
-      getChildAnimations = getAnimations;
-      childAnimations = animations2;
-    }
-    let animations;
-    const getAnimation = () => {
-      animations = animationFactories.map((factory) => factory()).filter(Boolean);
-      return Promise.all(animations);
-    };
-    const { when } = transition;
-    let animationPromise;
-    if (when) {
-      const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
-      animationPromise = first().then(() => last());
-    } else {
-      animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
-    }
-    const isExit = this.activeStates.exit;
-    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
-      if (isExit) {
-        this.element.dispatchEvent(motionEvent("motionstart", this.target));
-        this.element.dispatchEvent(motionEvent("motioncomplete", {
-          ...this.target
-        }, isExit));
-      }
-      return;
+      this.animateUpdates({
+        isFallback: !isActive
+      });
     }
-    const animationTarget = this.target;
-    this.element.dispatchEvent(motionEvent("motionstart", animationTarget));
-    animationPromise.then(() => {
-      this.element.dispatchEvent(motionEvent("motioncomplete", {
-        ...animationTarget
-      }, isExit));
-    }).catch(noop);
   }
   isMounted() {
     return Boolean(this.element);

package/dist/es/state/style.mjs

@@ -1,5 +1,5 @@
-import { isCssVar, isNumber } from "./utils.mjs";
-import { transformDefinitions, isTransform, transformAlias, buildTransformTemplate } from "./transform.mjs";
+import { isNumber, isCssVar } from "./utils.mjs";
+import { isTransform, transformAlias, transformDefinitions, buildTransformTemplate } from "./transform.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const style = {
   get: (element, name) => {

package/dist/es/state/transform.mjs

@@ -1,3 +1,4 @@
+import "@vueuse/core";
 import { noopReturn } from "./utils.mjs";
 const rotation = {
   syntax: "<angle>",

package/dist/src/animation/hooks/animation-controls.d.ts

@@ -0,0 +1,8 @@
+import { AnimationControls } from '../types';
+import { MotionState } from '../../state';
+import { Options } from '../../types';
+/**
+ * @public
+ */
+export declare function animationControls(): AnimationControls;
+export declare function setValues(state: MotionState, definition: Options['animate']): void;

package/dist/src/animation/hooks/use-animate.d.ts

@@ -0,0 +1,8 @@
+import { AnimationPlaybackControls } from 'framer-motion';
+import { Ref, UnwrapRef } from 'vue';
+import { createScopedAnimate } from 'framer-motion/dom';
+type Scope = Ref<UnwrapRef<Element>> & {
+    animations: AnimationPlaybackControls[];
+};
+export declare function useAnimate<T extends Element = any>(): [Scope, ReturnType<typeof createScopedAnimate>];
+export {};

package/dist/src/animation/hooks/use-animation-controls.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Creates `AnimationControls`, which can be used to manually start, stop
+ * and sequence animations on one or more components.
+ *
+ * The returned `AnimationControls` should be passed to the `animate` property
+ * of the components you want to animate.
+ *
+ * These components can then be animated with the `start` method.
+ *
+ * ```jsx
+ * import { motion, useAnimationControls } from 'motion-v'
+ *
+ * export default defineComponent({
+ *    setup() {
+ *        const controls = useAnimationControls()
+ *
+ *        controls.start({
+ *            x: 100,
+ *            transition: { duration: 0.5 },
+ *        })
+ *
+ *        return () => (
+ *            <motion.div animate={controls} />
+ *        )
+ *    }
+ * })
+ * ```
+ *
+ * @returns Animation controller with `start`, `stop`, `set` and `mount` methods
+ *
+ * @public
+ */
+export declare function useAnimationControls(): import('../types').AnimationControls;

package/dist/src/animation/index.d.ts

@@ -1 +1,2 @@
-export * from './use-animate';
+export * from './hooks/use-animate';
+export * from './hooks/use-animation-controls';

package/dist/src/animation/types.d.ts

@@ -0,0 +1,68 @@
+import { MotionState } from '../state';
+import { $Transition, Options } from '../types';
+/**
+ * @public
+ */
+export interface AnimationControls {
+    /**
+     * Subscribes a component's animation controls to this.
+     *
+     * @param controls - The controls to subscribe
+     * @returns An unsubscribe function.
+     *
+     * @internal
+     */
+    subscribe: (state: MotionState) => () => void;
+    /**
+     * Starts an animation on all linked components.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * controls.start("variantLabel")
+     * controls.start({
+     *   x: 0,
+     *   transition: { duration: 1 }
+     * })
+     * ```
+     *
+     * @param definition - Properties or variant label to animate to
+     * @param transition - Optional `transtion` to apply to a variant
+     * @returns - A `Promise` that resolves when all animations have completed.
+     *
+     * @public
+     */
+    start: (definition: Options['animate'], transitionOverride?: $Transition) => Promise<any>;
+    /**
+     * Instantly set to a set of properties or a variant.
+     *
+     * ```jsx
+     * // With properties
+     * controls.set({ opacity: 0 })
+     *
+     * // With variants
+     * controls.set("hidden")
+     * ```
+     *
+     * @privateRemarks
+     * We could perform a similar trick to `.start` where this can be called before mount
+     * and we maintain a list of of pending actions that get applied on mount. But the
+     * expectation of `set` is that it happens synchronously and this would be difficult
+     * to do before any children have even attached themselves. It's also poor practise
+     * and we should discourage render-synchronous `.start` calls rather than lean into this.
+     *
+     * @public
+     */
+    set: (definition: Options['animate']) => void;
+    /**
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop: () => void;
+    mount: () => () => void;
+}

package/dist/src/animation/utils.d.ts

@@ -0,0 +1,2 @@
+import { AnimationControls } from './types';
+export declare function isAnimationControls(v?: unknown): v is AnimationControls;

package/dist/src/components/index.d.ts

@@ -1,2 +1,3 @@
+export { Motion, motion, type MotionProps } from './motion';
 export * from './animate-presence';
 export * from './motion-config';

package/dist/src/components/{Motion.d.ts → motion/Motion.d.ts}

@@ -1,5 +1,5 @@
 import { IntrinsicElementAttributes } from 'vue';
-import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../types';
+import { ElementType, Options, SVGAttributesWithMotionValues, SetMotionValueType } from '../../types';
 export interface MotionProps<T extends ElementType = 'div', K = unknown> extends Options<K> {
     as?: T;
     asChild?: boolean;

package/dist/src/components/motion/NameSpace.d.ts

@@ -0,0 +1,11 @@
+import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue';
+import { MotionProps } from './Motion';
+type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;
+type MotionComponentProps = {
+    create: <T extends DefineComponent>(T: any) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
+};
+interface MotionNameSpace extends Record<keyof IntrinsicElementAttributes, DefineComponent<MotionProps<keyof IntrinsicElementAttributes, unknown>>> {
+    create: MotionComponentProps['create'];
+}
+export declare const motion: MotionNameSpace;
+export {};

package/dist/src/components/motion/index.d.ts

@@ -0,0 +1,2 @@
+export { motion } from './NameSpace';
+export { default as Motion, type MotionProps } from './Motion';

package/dist/src/features/animation/animation.d.ts

@@ -0,0 +1,13 @@
+import { Feature } from '../feature';
+import { MotionState } from '../../state';
+export declare class AnimationFeature extends Feature {
+    unmountControls?: () => void;
+    constructor(state: MotionState);
+    updateAnimationControlsSubscription(): void;
+    /**
+     * Subscribe any provided AnimationControls to the component's VisualElement
+     */
+    mount(): void;
+    update(): void;
+    unmount(): void;
+}

package/dist/src/features/gestures/drag/VisualElementDragControls.d.ts

@@ -1,4 +1,4 @@
-import { MotionProps } from '../../../components/Motion';
+import { MotionProps } from '../../../components/motion/Motion';
 import { Options } from '../../../types';
 import { Point, VisualElement } from 'framer-motion';
 export declare const elementDragControls: WeakMap<VisualElement<unknown, unknown, {}>, VisualElementDragControls>;

package/dist/src/features/gestures/focus/index.d.ts

@@ -0,0 +1,7 @@
+import { Feature } from '../../feature';
+export declare class FocusGesture extends Feature {
+    private isActive;
+    onFocus(): void;
+    onBlur(): void;
+    mount(): void;
+}

package/dist/src/features/gestures/focus/types.d.ts

@@ -0,0 +1,6 @@
+import { Variant } from '../../../types';
+export type FocusProps = {
+    focus?: string | Variant;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+};

package/dist/src/features/gestures/in-view/index.d.ts

@@ -3,5 +3,7 @@ import { Feature } from '../..';
 export declare class InViewGesture extends Feature {
     isActive(): boolean;
     constructor(state: MotionState);
+    startObserver(): void;
     mount(): void;
+    update(): void;
 }

package/dist/src/features/index.d.ts

@@ -4,3 +4,4 @@ export * from './svg';
 export * from './layout/layout';
 export * from './gestures/pan';
 export * from './feature-manager';
+export * from './animation/animation';

package/dist/src/features/layout/projection.d.ts

@@ -3,6 +3,7 @@ export declare class ProjectionFeature extends Feature {
     constructor(state: any);
     initProjection(): void;
     beforeMount(): void;
+    setOptions(): void;
     update(): void;
     mount(): void;
 }

package/dist/src/index.d.ts

@@ -1,6 +1,5 @@
 export * from 'framer-motion/dom';
 export { motionValue as useMotionValue } from 'framer-motion/dom';
-export { default as Motion, type MotionProps } from './components/Motion';
 export * from './components';
 export { default as LayoutGroup } from './components/LayoutGroup';
 export { useLayoutGroup } from './components/use-layout-group';
@@ -11,4 +10,5 @@ export * from './constants';
 export * from './types';
 export * from './animation';
 export * from './utils';
+export { useDragControls } from './features/gestures/drag/use-drag-controls';
 export type { PanInfo } from './features/gestures/pan/PanSession';

package/dist/src/state/animate-updates.d.ts

@@ -0,0 +1,19 @@
+import { $Transition, Options } from '../types';
+import { MotionState } from './motion-state';
+declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+export type StateType = typeof STATE_TYPES[number];
+/**
+ * 核心动画更新函数,处理所有动画状态变化和执行
+ * @param controlActiveState - 需要更新的动画状态
+ * @param controlDelay - 动画延迟时间
+ * @param directAnimate - 直接动画目标值
+ * @param directTransition - 直接动画过渡配置
+ */
+export declare function animateUpdates(this: MotionState, { controlActiveState, controlDelay, directAnimate, directTransition, isFallback, }?: {
+    controlActiveState?: Partial<Record<string, boolean>>;
+    controlDelay?: number;
+    directAnimate?: Options['animate'];
+    directTransition?: $Transition;
+    isFallback?: boolean;
+}): any;
+export {};

package/dist/src/state/animate-variants-children.d.ts

@@ -1,9 +1,9 @@
 import { MotionState } from './motion-state';
-import { AnimateOptions, AnimationFactory } from '../types';
+import { $Transition, AnimationFactory } from '../types';
 export type ActiveVariant = {
     [key: string]: {
         definition: string;
-        transition: AnimateOptions;
+        transition: $Transition;
     };
 };
 export declare function animateVariantsChildren(state: MotionState, activeState: ActiveVariant, isFirstAnimate?: boolean): {

package/dist/src/state/motion-state.d.ts

@@ -1,8 +1,10 @@
 import { MotionStateContext, Options } from '../types';
 import { DOMKeyframesDefinition, VisualElement } from 'framer-motion';
-declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
-type StateType = typeof STATE_TYPES[number];
+import { StateType, animateUpdates } from './animate-updates';
 export declare const mountedStates: WeakMap<Element, MotionState>;
+/**
+ * Core class that manages animation state and orchestrates animations
+ */
 export declare class MotionState {
     readonly id: string;
     element: HTMLElement | null;
@@ -30,9 +32,8 @@ export declare class MotionState {
     beforeUpdate(): void;
     update(options: Options, notAnimate?: boolean): void;
     setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;
-    animateUpdates(isInitial?: boolean): void;
+    animateUpdates: typeof animateUpdates;
     isMounted(): boolean;
     getOptions(): Options<any>;
     willUpdate(label: string): void;
 }
-export {};

package/dist/src/state/utils.d.ts

@@ -1,12 +1,12 @@
-import { Options } from '../types';
-import { AnimationOptions, Variant } from 'framer-motion';
+import { $Transition, Options } from '../types';
+import { Variant } from 'framer-motion';
 import { IntrinsicElementAttributes } from 'vue';
-export declare function resolveVariant(definition?: Options['initial'], variants?: Options['variants'], custom?: Options['custom']): Variant | undefined;
+export declare function resolveVariant(definition?: Options['animate'], variants?: Options['variants'], custom?: Options['custom']): Variant | undefined;
 export declare function hasChanged(a: any, b: any): boolean;
 export declare function shallowCompare(next: any[], prev: any[]): boolean;
 export declare function addUniqueItem<T>(array: T[], item: T): void;
 export declare function removeItem<T>(array: T[], item: T): void;
-export declare function getOptions(options: AnimationOptions, key: string): AnimationOptions;
+export declare function getOptions(options: $Transition, key: string): $Transition;
 export declare function isCssVar(name: string): boolean;
 export declare const noopReturn: <V>(v: V) => V;
 export declare function isNumber(value: any): boolean;

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

@@ -1,3 +1,4 @@
+import { Inertia, Keyframes, None, Repeat, Spring, Tween } from 'framer-motion';
 export interface FrameData {
     delta: number;
     timestamp: number;
@@ -24,3 +25,19 @@ export interface ScrollInfoOptions {
     axis?: 'x' | 'y';
     offset?: ScrollOffset;
 }
+export interface Orchestration {
+    delay?: number;
+    when?: false | 'beforeChildren' | 'afterChildren' | string;
+    delayChildren?: number;
+    staggerChildren?: number;
+    staggerDirection?: number;
+}
+type PermissiveTransitionDefinition = {
+    [key: string]: any;
+};
+type TransitionDefinition = Tween | Spring | Keyframes | Inertia | None | PermissiveTransitionDefinition;
+type TransitionMap = Orchestration & TransitionDefinition & {
+    [key: string]: TransitionDefinition;
+};
+export type $Transition = (Orchestration & Repeat & TransitionDefinition) | (Orchestration & Repeat & TransitionMap);
+export {};

package/dist/src/types/state.d.ts

@@ -1,4 +1,4 @@
-import { AnimationOptions, DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion';
+import { DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion';
 import { MotionValue, TransformProperties, animate } from 'framer-motion/dom';
 import { IntrinsicElementAttributes } from 'vue';
 import { LayoutOptions } from '../features/layout/types';
@@ -9,19 +9,13 @@ import { InViewProps } from '../features/gestures/in-view/types';
 import { LayoutGroupState } from '../components/context';
 import { PanProps } from '../features/gestures/pan/types';
 import { MotionConfigState } from '../components/motion-config/types';
+import { $Transition } from './framer-motion';
+import { FocusProps } from '../features/gestures/focus/types';
+import { AnimationControls } from '../animation/types';
 type AnimationPlaybackControls = ReturnType<typeof animate>;
-export interface Orchestration {
-    delay?: number;
-    when?: false | 'beforeChildren' | 'afterChildren' | string;
-    delayChildren?: number;
-    staggerChildren?: number;
-    staggerDirection?: number;
-}
-export interface AnimateOptions extends Omit<Orchestration, 'delay'>, AnimationOptions {
-}
 export type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition | string;
 export interface Variant extends DOMKeyframesDefinition {
-    transition?: AnimateOptions;
+    transition?: $Transition;
 }
 export type VariantLabels = string | Variant;
 interface BoundingBox {
@@ -38,23 +32,23 @@ export type MotionStyle = Partial<{
     [K in keyof Variant]: Variant[K] | MotionValue;
 }>;
 export type ElementType = keyof IntrinsicElementAttributes;
-export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps, InViewProps, DragProps, PanProps {
+export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps, InViewProps, DragProps, PanProps, FocusProps {
     custom?: T;
     as?: ElementType;
     initial?: string | Variant | boolean;
-    animate?: string | Variant;
+    animate?: string | Variant | AnimationControls;
     exit?: string | Variant;
     variants?: {
         [k: string]: Variant | ((custom: T) => Variant);
     };
     style?: MotionStyle;
     transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
-    transition?: AnimateOptions & {
-        layout?: AnimationOptions;
+    transition?: $Transition & {
+        layout?: $Transition;
     };
     layoutGroup?: LayoutGroupState;
     motionConfig?: MotionConfigState;
-    onAnimationComplete?: (definition: AnimateOptions) => void;
+    onAnimationComplete?: (definition: Options['animate']) => void;
     onUpdate?: (latest: ResolvedValues) => void;
 }
 export interface MotionStateContext {