framer-motion 7.7.3 → 7.8.1

package/dist/index.d.ts

@@ -3,141 +3,10 @@ import * as React$1 from 'react';
 import { SVGAttributes, CSSProperties, RefObject, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ReactHTML, DetailedHTMLFactory, HTMLAttributes, useEffect } from 'react';
 import { ScrollOptions, InViewOptions } from '@motionone/dom';
 
-/**
- * @public
- */
-declare type Subscriber<T> = (v: T) => void;
-/**
- * @public
- */
-declare type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
-/**
- * `MotionValue` is used to track the state and velocity of motion values.
- *
- * @public
- */
-declare class MotionValue<V = any> {
-    /**
-     * This will be replaced by the build step with the latest version number.
-     * When MotionValues are provided to motion components, warn if versions are mixed.
-     */
-    version: string;
-    /**
-     * Adds a function that will be notified when the `MotionValue` is updated.
-     *
-     * It returns a function that, when called, will cancel the subscription.
-     *
-     * When calling `onChange` inside a React component, it should be wrapped with the
-     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
-     * from the `useEffect` function to ensure you don't add duplicate subscribers..
-     *
-     * ```jsx
-     * export const MyComponent = () => {
-     *   const x = useMotionValue(0)
-     *   const y = useMotionValue(0)
-     *   const opacity = useMotionValue(1)
-     *
-     *   useEffect(() => {
-     *     function updateOpacity() {
-     *       const maxXY = Math.max(x.get(), y.get())
-     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
-     *       opacity.set(newOpacity)
-     *     }
-     *
-     *     const unsubscribeX = x.onChange(updateOpacity)
-     *     const unsubscribeY = y.onChange(updateOpacity)
-     *
-     *     return () => {
-     *       unsubscribeX()
-     *       unsubscribeY()
-     *     }
-     *   }, [])
-     *
-     *   return <motion.div style={{ x }} />
-     * }
-     * ```
-     *
-     * @privateRemarks
-     *
-     * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
-     *
-     * ```jsx
-     * useOnChange(x, () => {})
-     * ```
-     *
-     * @param subscriber - A function that receives the latest value.
-     * @returns A function that, when called, will cancel this subscription.
-     *
-     * @public
-     */
-    onChange(subscription: Subscriber<V>): () => void;
-    clearListeners(): void;
-    /**
-     * Sets the state of the `MotionValue`.
-     *
-     * @remarks
-     *
-     * ```jsx
-     * const x = useMotionValue(0)
-     * x.set(10)
-     * ```
-     *
-     * @param latest - Latest value to set.
-     * @param render - Whether to notify render subscribers. Defaults to `true`
-     *
-     * @public
-     */
-    set(v: V, render?: boolean): void;
-    updateAndNotify: (v: V, render?: boolean) => void;
-    /**
-     * Returns the latest state of `MotionValue`
-     *
-     * @returns - The latest state of `MotionValue`
-     *
-     * @public
-     */
-    get(): V;
-    /**
-     * @public
-     */
-    getPrevious(): V;
-    /**
-     * Returns the latest velocity of `MotionValue`
-     *
-     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
-     *
-     * @public
-     */
-    getVelocity(): number;
-    hasAnimated: boolean;
-    /**
-     * Stop the currently active animation.
-     *
-     * @public
-     */
-    stop(): void;
-    /**
-     * Returns `true` if this value is currently animating.
-     *
-     * @public
-     */
-    isAnimating(): boolean;
-    private clearAnimation;
-    /**
-     * Destroy and clean up subscribers to this `MotionValue`.
-     *
-     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
-     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
-     * created a `MotionValue` via the `motionValue` function.
-     *
-     * @public
-     */
-    destroy(): void;
-}
-declare function motionValue<V>(init: V): MotionValue<V>;
-
 declare type EasingFunction = (v: number) => number;
 declare type EasingModifier = (easing: EasingFunction) => EasingFunction;
+declare type BezierDefinition = [number, number, number, number];
+declare type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
 /**
  * The easing function to use. Set as one of:
  *
@@ -147,7 +16,7 @@ declare type EasingModifier = (easing: EasingFunction) => EasingFunction;
  *
  * @public
  */
-declare type Easing = [number, number, number, number] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate" | EasingFunction;
+declare type Easing = EasingDefinition | EasingFunction;
 
 /**
  * @public
@@ -1009,67 +878,11 @@ interface CustomValueType {
     toValue: () => number | string;
 }
 
-/**
- * @public
- */
-declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
-/**
- * @public
- */
-interface AnimationControls {
-    /**
-     * 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: ControlsAnimationDefinition, 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: ControlsAnimationDefinition): void;
-    /**
-     * Stops animations on all linked components.
-     *
-     * ```jsx
-     * controls.stop()
-     * ```
-     *
-     * @public
-     */
-    stop(): void;
-    mount(): () => void;
-}
+declare type FrameData = {
+    delta: number;
+    timestamp: number;
+};
+declare type Process = (data: FrameData) => void;
 
 interface Point {
     x: number;
@@ -1101,87 +914,6 @@ interface Delta {
 }
 declare type TransformPoint = (point: Point) => Point;
 
-/**
- * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
- * information about the current state of the tap gesture such as its
- * `point`, `delta`, `offset` and `velocity`.
- *
- * ```jsx
- * <motion.div onPan={(event, info) => {
- *   console.log(info.point.x, info.point.y)
- * }} />
- * ```
- *
- * @public
- */
-interface PanInfo {
-    /**
-     * Contains `x` and `y` values for the current pan position relative
-     * to the device or page.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.point.x, info.point.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
-     */
-    point: Point;
-    /**
-     * Contains `x` and `y` values for the distance moved since
-     * the last event.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.delta.x, info.delta.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
-     */
-    delta: Point;
-    /**
-     * Contains `x` and `y` values for the distance moved from
-     * the first pan event.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.offset.x, info.offset.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
-     */
-    offset: Point;
-    /**
-     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
-     *
-     * ```jsx
-     * function onPan(event, info) {
-     *   console.log(info.velocity.x, info.velocity.y)
-     * }
-     *
-     * <motion.div onPan={onPan} />
-     * ```
-     *
-     * @public
-     */
-    velocity: Point;
-}
-
-declare type FrameData = {
-    delta: number;
-    timestamp: number;
-};
-declare type Process = (data: FrameData) => void;
-
 declare type ReducedMotionConfig = "always" | "never" | "user";
 /**
  * @public
@@ -1278,7 +1010,7 @@ interface AnimationPlaybackLifecycles<V> {
 /**
  * @public
  */
-declare type AnimationOptions$1<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
+declare type AnimationOptions$2<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
     delay?: number;
     type?: "tween" | "spring";
 };
@@ -1309,7 +1041,7 @@ declare type AnimationOptions$1<V> = (Tween | Spring) & AnimationPlaybackLifecyc
  *
  * @public
  */
-declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: AnimationOptions$1<V>): AnimationPlaybackControls;
+declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: AnimationOptions$2<V>): AnimationPlaybackControls;
 
 interface WithDepth {
     depth: number;
@@ -1540,17 +1272,17 @@ declare enum AnimationType {
 }
 
 declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
-declare type AnimationOptions = {
+declare type AnimationOptions$1 = {
     delay?: number;
     transitionOverride?: Transition;
     custom?: any;
     type?: AnimationType;
 };
-declare function animateVisualElement(visualElement: VisualElement, definition: AnimationDefinition, options?: AnimationOptions): Promise<void>;
+declare function animateVisualElement(visualElement: VisualElement, definition: AnimationDefinition, options?: AnimationOptions$1): Promise<void>;
 
 interface AnimationState {
-    animateChanges: (options?: AnimationOptions, type?: AnimationType) => Promise<any>;
-    setActive: (type: AnimationType, isActive: boolean, options?: AnimationOptions) => Promise<any>;
+    animateChanges: (options?: AnimationOptions$1, type?: AnimationType) => Promise<any>;
+    setActive: (type: AnimationType, isActive: boolean, options?: AnimationOptions$1) => Promise<any>;
     setAnimateFunction: (fn: any) => void;
     getState: () => {
         [key: string]: AnimationTypeState;
@@ -1775,73 +1507,418 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
      * Only measures axis-aligned boxes, rotate and skew must be manually
      * removed with a re-render to work.
      */
-    measureViewportBox(): Box;
-    getStaticValue(key: string): string | number;
-    setStaticValue(key: string, value: string | number): void;
+    measureViewportBox(): Box;
+    getStaticValue(key: string): string | number;
+    setStaticValue(key: string, value: string | number): void;
+    /**
+     * Make a target animatable by Popmotion. For instance, if we're
+     * trying to animate width from 100px to 100vw we need to measure 100vw
+     * in pixels to determine what we really need to animate to. This is also
+     * pluggable to support Framer's custom value types like Color,
+     * and CSS variables.
+     */
+    makeTargetAnimatable(target: TargetAndTransition, canMutate?: boolean): TargetAndTransition;
+    /**
+     * Update the provided props. Ensure any newly-added motion values are
+     * added to our map, old ones removed, and listeners updated.
+     */
+    setProps(props: MotionProps): void;
+    getProps(): MotionProps;
+    /**
+     * Returns the variant definition with a given name.
+     */
+    getVariant(name: string): Variant | undefined;
+    /**
+     * Returns the defined default transition on this component.
+     */
+    getDefaultTransition(): Transition | undefined;
+    getTransformPagePoint(): any;
+    getClosestVariantNode(): VisualElement | undefined;
+    getVariantContext(startAtParent?: boolean): undefined | VariantStateContext;
+    /**
+     * Add a child visual element to our set of children.
+     */
+    addVariantChild(child: VisualElement): (() => boolean) | undefined;
+    /**
+     * Add a motion value and bind it to this visual element.
+     */
+    addValue(key: string, value: MotionValue): void;
+    /**
+     * Remove a motion value and unbind any active subscriptions.
+     */
+    removeValue(key: string): void;
+    /**
+     * Check whether we have a motion value for this key
+     */
+    hasValue(key: string): boolean;
+    /**
+     * Get a motion value for this key. If called with a default
+     * value, we'll create one if none exists.
+     */
+    getValue(key: string, defaultValue?: string | number): MotionValue<any>;
+    /**
+     * If we're trying to animate to a previously unencountered value,
+     * we need to check for it in our state and as a last resort read it
+     * directly from the instance (which might have performance implications).
+     */
+    readValue(key: string): string | number | null | undefined;
+    /**
+     * Set the base target to later animate back to. This is currently
+     * only hydrated on creation and when we first read a value.
+     */
+    setBaseTarget(key: string, value: string | number): void;
+    /**
+     * Find the base target for a value thats been removed from all animation
+     * props.
+     */
+    getBaseTarget(key: string): any;
+    on<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, callback: VisualElementEventCallbacks[EventName]): VoidFunction;
+    notify<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, ...args: any): void;
+}
+
+/**
+ * @public
+ */
+declare type Subscriber<T> = (v: T) => void;
+/**
+ * @public
+ */
+declare type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
+/**
+ * `MotionValue` is used to track the state and velocity of motion values.
+ *
+ * @public
+ */
+declare class MotionValue<V = any> {
+    /**
+     * This will be replaced by the build step with the latest version number.
+     * When MotionValues are provided to motion components, warn if versions are mixed.
+     */
+    version: string;
+    /**
+     * If a MotionValue has an owner, it was created internally within Framer Motion
+     * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
+     */
+    owner?: VisualElement;
+    /**
+     * Adds a function that will be notified when the `MotionValue` is updated.
+     *
+     * It returns a function that, when called, will cancel the subscription.
+     *
+     * When calling `onChange` inside a React component, it should be wrapped with the
+     * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+     * from the `useEffect` function to ensure you don't add duplicate subscribers..
+     *
+     * ```jsx
+     * export const MyComponent = () => {
+     *   const x = useMotionValue(0)
+     *   const y = useMotionValue(0)
+     *   const opacity = useMotionValue(1)
+     *
+     *   useEffect(() => {
+     *     function updateOpacity() {
+     *       const maxXY = Math.max(x.get(), y.get())
+     *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+     *       opacity.set(newOpacity)
+     *     }
+     *
+     *     const unsubscribeX = x.onChange(updateOpacity)
+     *     const unsubscribeY = y.onChange(updateOpacity)
+     *
+     *     return () => {
+     *       unsubscribeX()
+     *       unsubscribeY()
+     *     }
+     *   }, [])
+     *
+     *   return <motion.div style={{ x }} />
+     * }
+     * ```
+     *
+     * @privateRemarks
+     *
+     * We could look into a `useOnChange` hook if the above lifecycle management proves confusing.
+     *
+     * ```jsx
+     * useOnChange(x, () => {})
+     * ```
+     *
+     * @param subscriber - A function that receives the latest value.
+     * @returns A function that, when called, will cancel this subscription.
+     *
+     * @public
+     */
+    onChange(subscription: Subscriber<V>): () => void;
+    clearListeners(): void;
+    /**
+     * Sets the state of the `MotionValue`.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * const x = useMotionValue(0)
+     * x.set(10)
+     * ```
+     *
+     * @param latest - Latest value to set.
+     * @param render - Whether to notify render subscribers. Defaults to `true`
+     *
+     * @public
+     */
+    set(v: V, render?: boolean): void;
+    updateAndNotify: (v: V, render?: boolean) => void;
+    /**
+     * Returns the latest state of `MotionValue`
+     *
+     * @returns - The latest state of `MotionValue`
+     *
+     * @public
+     */
+    get(): V;
     /**
-     * Make a target animatable by Popmotion. For instance, if we're
-     * trying to animate width from 100px to 100vw we need to measure 100vw
-     * in pixels to determine what we really need to animate to. This is also
-     * pluggable to support Framer's custom value types like Color,
-     * and CSS variables.
+     * @public
      */
-    makeTargetAnimatable(target: TargetAndTransition, canMutate?: boolean): TargetAndTransition;
+    getPrevious(): V;
     /**
-     * Update the provided props. Ensure any newly-added motion values are
-     * added to our map, old ones removed, and listeners updated.
+     * Returns the latest velocity of `MotionValue`
+     *
+     * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+     *
+     * @public
      */
-    setProps(props: MotionProps): void;
-    getProps(): MotionProps;
+    getVelocity(): number;
+    hasAnimated: boolean;
     /**
-     * Returns the variant definition with a given name.
+     * Stop the currently active animation.
+     *
+     * @public
      */
-    getVariant(name: string): Variant | undefined;
+    stop(): void;
     /**
-     * Returns the defined default transition on this component.
+     * Returns `true` if this value is currently animating.
+     *
+     * @public
      */
-    getDefaultTransition(): Transition | undefined;
-    getTransformPagePoint(): any;
-    getClosestVariantNode(): VisualElement | undefined;
-    getVariantContext(startAtParent?: boolean): undefined | VariantStateContext;
+    isAnimating(): boolean;
+    private clearAnimation;
     /**
-     * Add a child visual element to our set of children.
+     * Destroy and clean up subscribers to this `MotionValue`.
+     *
+     * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+     * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+     * created a `MotionValue` via the `motionValue` function.
+     *
+     * @public
      */
-    addVariantChild(child: VisualElement): (() => boolean) | undefined;
+    destroy(): void;
+}
+declare function motionValue<V>(init: V): MotionValue<V>;
+
+interface Animation$1<V> {
+    next: (t: number) => {
+        value: V;
+        done: boolean;
+    };
+    flipTarget: () => void;
+}
+/**
+ * An update function. It accepts a timestamp used to advance the animation.
+ */
+declare type Update = (timestamp: number) => void;
+/**
+ * Drivers accept a update function and call it at an interval. This interval
+ * could be a synchronous loop, a setInterval, or tied to the device's framerate.
+ */
+interface DriverControls {
+    start: () => void;
+    stop: () => void;
+}
+declare type Driver = (update: Update) => DriverControls;
+
+interface VelocityOptions {
+    velocity?: number;
+    restSpeed?: number;
+    restDelta?: number;
+}
+interface AnimationLifecycleOptions<V> {
+    onUpdate?: (v: V) => void;
+    onComplete?: VoidFunction;
+    onPlay?: VoidFunction;
+    onRepeat?: VoidFunction;
+    onStop?: VoidFunction;
+}
+interface AnimationPlaybackOptions {
+    repeat?: number;
+    repeatType?: "loop" | "reverse" | "mirror";
+    repeatDelay?: number;
+}
+interface DurationSpringOptions {
+    duration?: number;
+    bounce?: number;
+}
+interface SpringOptions extends DurationSpringOptions, VelocityOptions {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+interface DecayOptions extends VelocityOptions {
+    keyframes?: number[];
+    power?: number;
+    timeConstant?: number;
+    modifyTarget?: (v: number) => number;
+}
+interface InertiaOptions$1 extends DecayOptions {
+    bounceStiffness?: number;
+    bounceDamping?: number;
+    min?: number;
+    max?: number;
+}
+interface KeyframeOptions {
+    ease?: Easing | Easing[];
+    times?: number[];
+}
+interface AnimationOptions<V = any> extends AnimationLifecycleOptions<V>, AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
+    keyframes: V[];
+    elapsed?: number;
+    driver?: Driver;
+    type?: "decay" | "spring" | "keyframes" | "tween";
+    duration?: number;
+}
+/**
+ * @public
+ */
+declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+/**
+ * @public
+ */
+interface AnimationControls {
     /**
-     * Add a motion value and bind it to this visual element.
+     * 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
      */
-    addValue(key: string, value: MotionValue): void;
+    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
     /**
-     * Remove a motion value and unbind any active subscriptions.
+     * 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
      */
-    removeValue(key: string): void;
+    set(definition: ControlsAnimationDefinition): void;
     /**
-     * Check whether we have a motion value for this key
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
      */
-    hasValue(key: string): boolean;
+    stop(): void;
+    mount(): () => void;
+}
+
+/**
+ * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
+ * information about the current state of the tap gesture such as its
+ * `point`, `delta`, `offset` and `velocity`.
+ *
+ * ```jsx
+ * <motion.div onPan={(event, info) => {
+ *   console.log(info.point.x, info.point.y)
+ * }} />
+ * ```
+ *
+ * @public
+ */
+interface PanInfo {
     /**
-     * Get a motion value for this key. If called with a default
-     * value, we'll create one if none exists.
+     * Contains `x` and `y` values for the current pan position relative
+     * to the device or page.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.point.x, info.point.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
      */
-    getValue(key: string, defaultValue?: string | number): MotionValue<any>;
+    point: Point;
     /**
-     * If we're trying to animate to a previously unencountered value,
-     * we need to check for it in our state and as a last resort read it
-     * directly from the instance (which might have performance implications).
+     * Contains `x` and `y` values for the distance moved since
+     * the last event.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.delta.x, info.delta.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
      */
-    readValue(key: string): string | number | null | undefined;
+    delta: Point;
     /**
-     * Set the base target to later animate back to. This is currently
-     * only hydrated on creation and when we first read a value.
+     * Contains `x` and `y` values for the distance moved from
+     * the first pan event.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.offset.x, info.offset.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
      */
-    setBaseTarget(key: string, value: string | number): void;
+    offset: Point;
     /**
-     * Find the base target for a value thats been removed from all animation
-     * props.
+     * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
+     *
+     * ```jsx
+     * function onPan(event, info) {
+     *   console.log(info.velocity.x, info.velocity.y)
+     * }
+     *
+     * <motion.div onPan={onPan} />
+     * ```
+     *
+     * @public
      */
-    getBaseTarget(key: string): any;
-    on<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, callback: VisualElementEventCallbacks[EventName]): VoidFunction;
-    notify<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, ...args: any): void;
+    velocity: Point;
 }
 
 interface DragControlOptions {
@@ -3866,21 +3943,6 @@ declare function useTransform<I, O>(input: MotionValue<I>, transformer: SingleTr
  */
 declare function useTransform<I, O>(input: MotionValue<string>[] | MotionValue<number>[] | MotionValue<string | number>[], transformer: MultiTransformer<I, O>): MotionValue<O>;
 
-interface PhysicsSpringOptions {
-    velocity: number;
-    stiffness: number;
-    damping: number;
-    mass: number;
-}
-interface SpringOptions extends Partial<PhysicsSpringOptions> {
-    from?: number;
-    to?: number;
-    duration?: number;
-    bounce?: number;
-    restSpeed?: number;
-    restDelta?: number;
-}
-
 /**
  * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
  *
@@ -4204,6 +4266,9 @@ declare function buildTransform({ transform, transformKeys, }: Pick<HTMLRenderSt
 declare const clamp: (min: number, max: number, v: number) => number;
 
 declare type DelayedFunction = (overshoot: number) => void;
+/**
+ * Timeout defined in ms
+ */
 declare function delay(callback: DelayedFunction, timeout: number): () => void;
 
 declare const distance: (a: number, b: number) => number;
@@ -4215,6 +4280,24 @@ declare const pipe: (...transformers: Function[]) => Function;
 
 declare const wrap: (min: number, max: number, v: number) => number;
 
+interface NativeAnimationOptions {
+    delay?: number;
+    duration?: number;
+    ease?: EasingDefinition;
+}
+
+declare function startOptimizedAppearAnimation(element: HTMLElement, name: string, keyframes: string[] | number[], options: NativeAnimationOptions): Animation | undefined;
+
+declare const optimizedAppearDataAttribute: string;
+
+/**
+ * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
+ */
+declare function spring({ keyframes, restSpeed, restDelta, ...options }: AnimationOptions<number>): Animation$1<number>;
+declare namespace spring {
+    var needsInterpolation: (a: any, b: any) => boolean;
+}
+
 interface NodeGroup {
     add: (node: IProjectionNode) => void;
     remove: (node: IProjectionNode) => void;
@@ -4274,4 +4357,4 @@ interface ScaleMotionValues {
  */
 declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMotionValues;
 
-export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycles, AnimationOptions$1 as AnimationOptions, AnimationPlaybackControls, AnimationProps, AnimationType, Axis, AxisDelta, BoundingBox, Box, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DragControls, DragElastic, DragHandlers, DraggableProps, Easing, EasingFunction, EasingModifier, EventInfo, FeatureBundle, FeatureComponent, FeatureComponents, FeatureDefinition, FeatureDefinitions, FeatureNames, FeatureProps, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, IProjectionNode, Inertia, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, LoadedFeatures, MotionAdvancedProps, MotionConfig, MotionConfigContext, MotionConfigProps, MotionContext, MotionProps, MotionStyle, MotionTransform, MotionValue, None, Orchestration, PanHandlers, PanInfo, PassiveEffect, Point, PresenceContext, RelayoutInfo, RenderComponent, Reorder, Repeat, ResolveLayoutTransition, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, ResolvedValues, SVGAttributesAsMotionValues, SVGMotionProps, ScrapeMotionValuesFromProps, ScrollMotionValues, SingleTarget, Spring, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, Variant, VariantLabels, Variants, VisualElement, VisualState, addPointerEvent, addScaleCorrector, animate, animateVisualElement, animationControls, animations, buildTransform, calcLength, checkTargetForNewValues, clamp, createBox, createDomMotionComponent, createMotionComponent, delay, distance, distance2D, domAnimation, domMax, filterProps, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mix, motion, motionValue, pipe, resolveMotionValue, transform, unwrapMotionComponent, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useVisualElementContext, useWillChange, wrap, wrapHandler };
+export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycles, AnimationOptions$2 as AnimationOptions, AnimationPlaybackControls, AnimationProps, AnimationType, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DragControls, DragElastic, DragHandlers, DraggableProps, Easing, EasingDefinition, EasingFunction, EasingModifier, EventInfo, FeatureBundle, FeatureComponent, FeatureComponents, FeatureDefinition, FeatureDefinitions, FeatureNames, FeatureProps, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, IProjectionNode, Inertia, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, LoadedFeatures, MotionAdvancedProps, MotionConfig, MotionConfigContext, MotionConfigProps, MotionContext, MotionProps, MotionStyle, MotionTransform, MotionValue, None, Orchestration, PanHandlers, PanInfo, PassiveEffect, Point, PresenceContext, RelayoutInfo, RenderComponent, Reorder, Repeat, ResolveLayoutTransition, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, ResolvedValues, SVGAttributesAsMotionValues, SVGMotionProps, ScrapeMotionValuesFromProps, ScrollMotionValues, SingleTarget, Spring, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, Variant, VariantLabels, Variants, VisualElement, VisualState, addPointerEvent, addScaleCorrector, animate, animateVisualElement, animationControls, animations, buildTransform, calcLength, checkTargetForNewValues, clamp, createBox, createDomMotionComponent, createMotionComponent, delay, distance, distance2D, domAnimation, domMax, filterProps, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mix, motion, motionValue, optimizedAppearDataAttribute, pipe, resolveMotionValue, spring, startOptimizedAppearAnimation, transform, unwrapMotionComponent, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useVisualElementContext, useWillChange, wrap, wrapHandler };