framer-motion 10.2.2 → 10.2.4

package/dist/index.d.ts

@@ -877,13 +877,6 @@ interface CustomValueType {
     toValue: () => number | string;
 }
 
-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.
  */
@@ -895,9 +888,17 @@ declare type Update = (timestamp: number) => void;
 interface DriverControls {
     start: () => void;
     stop: () => void;
+    now: () => number;
 }
 declare type Driver = (update: Update) => DriverControls;
 
+/**
+ * @public
+ */
+interface AnimationPlaybackControls {
+    currentTime: number;
+    stop: () => void;
+}
 interface VelocityOptions {
     velocity?: number;
     restSpeed?: number;
@@ -940,11 +941,12 @@ interface KeyframeOptions {
     ease?: Easing | Easing[];
     times?: number[];
 }
-interface AnimationOptions$2<V = any> extends AnimationLifecycleOptions<V>, AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
+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";
+    type?: "decay" | "spring" | "keyframes" | "tween" | "inertia";
     duration?: number;
     autoplay?: boolean;
 }
@@ -952,10 +954,6 @@ interface AnimationOptions$2<V = any> extends AnimationLifecycleOptions<V>, Anim
  * @public
  */
 declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
-interface PlaybackControls {
-    stop: () => void;
-    currentTime?: number;
-}
 /**
  * @public
  */
@@ -1346,59 +1344,6 @@ declare class NodeStack {
     removeLeadSnapshot(): void;
 }
 
-/**
- * @public
- */
-interface AnimationPlaybackControls {
-    stop: () => void;
-    isAnimating: () => boolean;
-}
-/**
- * @public
- */
-interface AnimationPlaybackLifecycles<V> {
-    onUpdate?: (latest: V) => void;
-    onPlay?: () => void;
-    onComplete?: () => void;
-    onRepeat?: () => void;
-    onStop?: () => void;
-}
-/**
- * @public
- */
-declare type AnimationOptions$1<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
-    delay?: number;
-    type?: "tween" | "spring";
-};
-/**
- * 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$1<V>): AnimationPlaybackControls;
-
 interface WithDepth {
     depth: number;
 }
@@ -1572,9 +1517,12 @@ declare function MeasureLayout(props: MotionProps & {
     visualElement: VisualElement;
 }): JSX.Element;
 
+interface FeatureClass<Props = unknown> {
+    new (props: Props): Feature<Props>;
+}
 declare type HydratedFeatureDefinition = {
     isEnabled: (props: MotionProps) => boolean;
-    Feature: typeof Feature<unknown>;
+    Feature: FeatureClass<unknown>;
     ProjectionNode?: any;
     MeasureLayout?: typeof MeasureLayout;
 };
@@ -1623,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;
@@ -1802,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.
@@ -3716,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[];
@@ -4418,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$2<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$2): {
-    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 = {
@@ -4516,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$2<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;
@@ -4587,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$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, PlaybackControls, 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 };