framer-motion 10.2.3 → 10.2.4

package/dist/index.d.ts

@@ -878,57 +878,139 @@ interface CustomValueType {
 }
 
 /**
- * @public
+ * An update function. It accepts a timestamp used to advance the animation.
  */
-interface AnimationPlaybackControls {
-    currentTime?: number | null;
+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;
+    now: () => number;
 }
+declare type Driver = (update: Update) => DriverControls;
+
 /**
  * @public
  */
-interface AnimationPlaybackLifecycles<V> {
-    onUpdate?: (latest: V) => void;
-    onPlay?: () => void;
-    onComplete?: () => void;
-    onRepeat?: () => void;
-    onStop?: () => void;
+interface AnimationPlaybackControls {
+    currentTime: number;
+    stop: () => void;
+}
+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$1<V = any> extends AnimationLifecycleOptions<V>, AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
+    delay?: number;
+    keyframes: V[];
+    elapsed?: number;
+    driver?: Driver;
+    type?: "decay" | "spring" | "keyframes" | "tween" | "inertia";
+    duration?: number;
+    autoplay?: boolean;
 }
 /**
  * @public
  */
-declare type AnimationOptions$2<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
-    delay?: number;
-    type?: "tween" | "spring";
-};
+declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
 /**
- * Animate a single value or a `MotionValue`.
- *
- * The first argument is either a `MotionValue` to animate, or an initial animation value.
- *
- * The second is either a value to animate to, or an array of keyframes to animate through.
- *
- * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
- *
- * Returns `AnimationPlaybackControls`, currently just a `stop` method.
- *
- * ```javascript
- * const x = useMotionValue(0)
- *
- * useEffect(() => {
- *   const controls = animate(x, 100, {
- *     type: "spring",
- *     stiffness: 2000,
- *     onComplete: v => {}
- *   })
- *
- *   return controls.stop
- * })
- * ```
- *
  * @public
  */
-declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: AnimationOptions$2<V>): AnimationPlaybackControls;
+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;
+}
 
 /**
  * @public
@@ -1092,139 +1174,6 @@ declare class MotionValue<V = any> {
 }
 declare function motionValue<V>(init: V, options?: MotionValueOptions): 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$1<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;
-    autoplay?: boolean;
-}
-/**
- * @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;
-}
-
 interface RefObject<T> {
     current: T | null;
 }
@@ -1622,7 +1571,7 @@ declare type AnimationOptions = {
 };
 declare function animateVisualElement(visualElement: VisualElement, definition: AnimationDefinition, options?: AnimationOptions): Promise<void>;
 
-interface AnimationState {
+interface AnimationState$1 {
     animateChanges: (options?: AnimationOptions, type?: AnimationType) => Promise<any>;
     setActive: (type: AnimationType, isActive: boolean, options?: AnimationOptions) => Promise<any>;
     setAnimateFunction: (fn: any) => void;
@@ -1801,7 +1750,7 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
     /**
      * The AnimationState, this is hydrated by the animation Feature.
      */
-    animationState?: AnimationState;
+    animationState?: AnimationState$1;
     /**
      * The options used to create this VisualElement. The Options type is defined
      * by the inheriting VisualElement and is passed straight through to the render functions.
@@ -3715,6 +3664,45 @@ declare const Reorder: {
     } & React$1.RefAttributes<any>>;
 };
 
+/**
+ * @public
+ */
+interface AnimationPlaybackLifecycles<V> {
+    onUpdate?: (latest: V) => void;
+    onPlay?: () => void;
+    onComplete?: () => void;
+    onRepeat?: () => void;
+    onStop?: () => void;
+}
+/**
+ * Animate a single value or a `MotionValue`.
+ *
+ * The first argument is either a `MotionValue` to animate, or an initial animation value.
+ *
+ * The second is either a value to animate to, or an array of keyframes to animate through.
+ *
+ * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
+ *
+ * Returns `AnimationPlaybackControls`, currently just a `stop` method.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ *
+ * useEffect(() => {
+ *   const controls = animate(x, 100, {
+ *     type: "spring",
+ *     stiffness: 2000,
+ *     onComplete: v => {}
+ *   })
+ *
+ *   return controls.stop
+ * })
+ * ```
+ *
+ * @public
+ */
+declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: Transition & AnimationPlaybackLifecycles<V>): AnimationPlaybackControls;
+
 interface AxisScrollInfo {
     current: number;
     offset: number[];
@@ -4417,44 +4405,19 @@ declare function useResetProjection(): () => void;
  */
 declare function buildTransform(transform: HTMLRenderState["transform"], { enableHardwareAcceleration, allowTransformNone, }: DOMVisualElementOptions, transformIsDefault: boolean, transformTemplate?: MotionProps["transformTemplate"]): string;
 
-declare function animateValue<V = number>({ duration, driver, elapsed, repeat: repeatMax, repeatType, repeatDelay, keyframes, autoplay, onPlay, onStop, onComplete, onRepeat, onUpdate, type, ...options }: AnimationOptions$1<V>): {
-    stop: () => void;
-    /**
-     * Set the current time of the animation. This is purposefully
-     * mirroring the WAAPI animation API to make them interchanagable.
-     * Going forward this file should be ported more towards
-     * https://github.com/motiondivision/motionone/blob/main/packages/animation/src/Animation.ts
-     * Which behaviourally adheres to WAAPI as far as possible.
-     *
-     * WARNING: This is not safe to use for most animations. We currently
-     * only use it for handoff from WAAPI within Framer.
-     *
-     * This animation function consumes time every frame rather than being sampled for time.
-     * So the sample() method performs some headless frames to ensure
-     * repeats are handled correctly. Ideally in the future we will replace
-     * that method with this, once repeat calculations are pure.
-     */
-    currentTime: number;
-    /**
-     * animate() can't yet be sampled for time, instead it
-     * consumes time. So to sample it we have to run a low
-     * temporal-resolution version.
-     *
-     * isControlled should be set to true if sample is being run within
-     * a loop. This indicates that we're not arbitrarily sampling
-     * the animation but running it one step after another. Therefore
-     * we don't need to run a low-res version here. This is a stop-gap
-     * until a rewrite can sample for time.
-     */
-    sample: (t: number, isControlled?: boolean) => {
-        done: boolean;
-        value: V;
-    };
-};
+interface AnimationState<V> {
+    value: V;
+    done: boolean;
+}
+interface KeyframeGenerator<V> {
+    calculatedDuration: null | number;
+    next: (t: number) => AnimationState<V>;
+}
 
-declare function inertia({ keyframes, velocity, min, max, power, timeConstant, bounceStiffness, bounceDamping, restDelta, modifyTarget, driver, onUpdate, onComplete, onStop, }: AnimationOptions$1): {
-    stop: () => void;
-};
+interface MainThreadAnimationControls<V> extends AnimationPlaybackControls {
+    sample: (t: number) => AnimationState<V>;
+}
+declare function animateValue<V = number>({ autoplay, delay, driver, keyframes, type, repeat, repeatDelay, repeatType, onPlay, onStop, onComplete, onUpdate, ...options }: AnimationOptions$1<V>): MainThreadAnimationControls<V>;
 
 declare type Transformer = (v: any) => any;
 declare type ValueType = {
@@ -4515,13 +4478,7 @@ declare function startOptimizedAppearAnimation(element: HTMLElement, name: strin
 
 declare const optimizedAppearDataAttribute: string;
 
-/**
- * This is based on the spring implementation of Wobble https://github.com/skevy/wobble
- */
-declare function spring({ keyframes, restDelta, restSpeed, ...options }: AnimationOptions$1<number>): Animation$1<number>;
-declare namespace spring {
-    var needsInterpolation: (a: any, b: any) => boolean;
-}
+declare function spring({ keyframes, restDelta, restSpeed, ...options }: AnimationOptions$1<number>): KeyframeGenerator<number>;
 
 interface NodeGroup {
     add: (node: IProjectionNode) => void;
@@ -4586,4 +4543,4 @@ declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMoti
 
 declare const AnimateSharedLayout: React$1.FunctionComponent<React$1.PropsWithChildren<unknown>>;
 
-export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycleOptions, AnimationLifecycles, AnimationOptions$2 as AnimationOptions, AnimationPlaybackControls, AnimationPlaybackOptions, AnimationProps, AnimationType, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, ControlsAnimationDefinition, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DecayOptions, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DevMessage, DragControls, DragElastic, DragHandlers, DraggableProps, DurationSpringOptions, Easing, EasingDefinition, EasingFunction, EasingModifier, EventInfo, FeatureBundle, FeatureDefinition, FeatureDefinitions, FeaturePackage, FeaturePackages, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, HydratedFeatureDefinition, HydratedFeatureDefinitions, IProjectionNode, Inertia, InertiaOptions$1 as InertiaOptions, InterpolateOptions, KeyframeOptions, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, MixerFactory, 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, SpringOptions, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, ValueType, Variant, VariantLabels, Variants, VelocityOptions, VisualElement, VisualState, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateValue, animateVisualElement, animationControls, animations, anticipate, backIn, backInOut, backOut, buildTransform, calcLength, checkTargetForNewValues, circIn, circInOut, circOut, clamp, color, complex, createBox, createDomMotionComponent, createMotionComponent, cubicBezier, delay, distance, distance2D, domAnimation, domMax, easeIn, easeInOut, easeOut, filterProps, frameData, inView, inertia, interpolate, invariant, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mix, motion, motionValue, optimizedAppearDataAttribute, pipe, progress, px, resolveMotionValue, scroll, spring, startOptimizedAppearAnimation, sync, transform, unwrapMotionComponent, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useWillChange, warning, wrap };
+export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationLifecycleOptions, AnimationLifecycles, AnimationOptions$1 as AnimationOptions, AnimationPlaybackControls, AnimationPlaybackOptions, AnimationProps, AnimationType, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, ControlsAnimationDefinition, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DecayOptions, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DevMessage, DragControls, DragElastic, DragHandlers, DraggableProps, DurationSpringOptions, Easing, EasingDefinition, EasingFunction, EasingModifier, EventInfo, FeatureBundle, FeatureDefinition, FeatureDefinitions, FeaturePackage, FeaturePackages, FlatTree, FocusHandlers, ForwardRefComponent, HTMLMotionProps, HoverHandlers, HydratedFeatureDefinition, HydratedFeatureDefinitions, IProjectionNode, Inertia, InertiaOptions$1 as InertiaOptions, InterpolateOptions, KeyframeOptions, Keyframes, KeyframesTarget, LayoutGroup, LayoutGroupContext, LayoutProps, LazyFeatureBundle$1 as LazyFeatureBundle, LazyMotion, LazyProps, MixerFactory, 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, SpringOptions, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, ValueTarget, ValueType, Variant, VariantLabels, Variants, VelocityOptions, VisualElement, VisualState, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateValue, animateVisualElement, animationControls, animations, anticipate, backIn, backInOut, backOut, buildTransform, calcLength, checkTargetForNewValues, circIn, circInOut, circOut, clamp, color, complex, createBox, createDomMotionComponent, createMotionComponent, cubicBezier, delay, distance, distance2D, domAnimation, domMax, easeIn, easeInOut, easeOut, filterProps, frameData, inView, interpolate, invariant, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mix, motion, motionValue, optimizedAppearDataAttribute, pipe, progress, px, resolveMotionValue, scroll, spring, startOptimizedAppearAnimation, sync, transform, unwrapMotionComponent, useAnimation, useAnimationControls, useAnimationFrame, useCycle, useAnimatedState as useDeprecatedAnimatedState, useInvertedScale as useDeprecatedInvertedScale, useDomEvent, useDragControls, useElementScroll, useForceUpdate, useInView, useInstantLayoutTransition, useInstantTransition, useIsPresent, useIsomorphicLayoutEffect, useMotionTemplate, useMotionValue, useMotionValueEvent, usePresence, useReducedMotion, useReducedMotionConfig, useResetProjection, useScroll, useSpring, useTime, useTransform, useUnmountEffect, useVelocity, useViewportScroll, useWillChange, warning, wrap };