framer-motion 10.3.4 → 10.4.0

package/dist/index.d.ts

@@ -17,14 +17,15 @@ declare type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOu
  */
 declare type Easing = EasingDefinition | EasingFunction;
 
+declare type GenericKeyframesTarget<V> = [null, ...V[]] | V[];
 /**
  * @public
  */
-declare type ResolvedKeyframesTarget = [null, ...number[]] | number[] | [null, ...string[]] | string[];
+declare type ResolvedKeyframesTarget = GenericKeyframesTarget<number> | GenericKeyframesTarget<string>;
 /**
  * @public
  */
-declare type KeyframesTarget = ResolvedKeyframesTarget | [null, ...CustomValueType[]] | CustomValueType[];
+declare type KeyframesTarget = ResolvedKeyframesTarget | GenericKeyframesTarget<CustomValueType>;
 /**
  * @public
  */
@@ -892,6 +893,15 @@ interface DriverControls {
 }
 declare type Driver = (update: Update) => DriverControls;
 
+interface AnimationPlaybackLifecycles<V> {
+    onUpdate?: (latest: V) => void;
+    onPlay?: () => void;
+    onComplete?: () => void;
+    onRepeat?: () => void;
+    onStop?: () => void;
+}
+declare type AnimateOptions<V = any> = Transition & AnimationPlaybackLifecycles<V>;
+declare type ElementOrSelector$1 = Element | Element[] | NodeListOf<Element> | string;
 /**
  * @public
  */
@@ -902,6 +912,29 @@ interface AnimationPlaybackControls {
     pause: () => void;
     then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
 }
+interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition"> {
+    x: number | string;
+    y: number | string;
+    z: number | string;
+    rotateX: number | string;
+    rotateY: number | string;
+    rotateZ: number | string;
+    scaleX: number;
+    scaleY: number;
+    scaleZ: number;
+    skewX: number | string;
+    skewY: number | string;
+}
+declare type ValueKeyframe = string | number;
+declare type UnresolvedValueKeyframe = ValueKeyframe | null;
+declare type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
+declare type StyleKeyframesDefinition = {
+    [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
+};
+declare type VariableKeyframesDefinition = {
+    [key: `--${string}`]: ValueKeyframesDefinition;
+};
+declare type DOMKeyframesDefinition = StyleKeyframesDefinition & VariableKeyframesDefinition;
 interface VelocityOptions {
     velocity?: number;
     restSpeed?: number;
@@ -944,7 +977,7 @@ interface KeyframeOptions {
     ease?: Easing | Easing[];
     times?: number[];
 }
-interface AnimationOptions$1<V = any> extends AnimationLifecycleOptions<V>, AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
+interface AnimationOptions<V = any> extends AnimationLifecycleOptions<V>, AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
     delay?: number;
     keyframes: V[];
     elapsed?: number;
@@ -953,10 +986,7 @@ interface AnimationOptions$1<V = any> extends AnimationLifecycleOptions<V>, Anim
     duration?: number;
     autoplay?: boolean;
 }
-/**
- * @public
- */
-declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
 /**
  * @public
  */
@@ -980,7 +1010,7 @@ interface AnimationControls {
      *
      * @public
      */
-    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
+    start(definition: AnimationDefinition, transitionOverride?: Transition): Promise<any>;
     /**
      * Instantly set to a set of properties or a variant.
      *
@@ -1001,7 +1031,7 @@ interface AnimationControls {
      *
      * @public
      */
-    set(definition: ControlsAnimationDefinition): void;
+    set(definition: AnimationDefinition): void;
     /**
      * Stops animations on all linked components.
      *
@@ -1566,18 +1596,16 @@ declare type RenderComponent<Instance, RenderState> = (Component: string | React
 
 declare type AnimationType = "animate" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "exit";
 
-declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
-declare type AnimationOptions = {
+declare type VisualElementAnimationOptions = {
     delay?: number;
     transitionOverride?: Transition;
     custom?: any;
     type?: AnimationType;
 };
-declare function animateVisualElement(visualElement: VisualElement, definition: AnimationDefinition, options?: AnimationOptions): Promise<void>;
 
 interface AnimationState$1 {
-    animateChanges: (options?: AnimationOptions, type?: AnimationType) => Promise<any>;
-    setActive: (type: AnimationType, isActive: boolean, options?: AnimationOptions) => Promise<any>;
+    animateChanges: (options?: VisualElementAnimationOptions, type?: AnimationType) => Promise<any>;
+    setActive: (type: AnimationType, isActive: boolean, options?: VisualElementAnimationOptions) => Promise<any>;
     setAnimateFunction: (fn: any) => void;
     getState: () => {
         [key: string]: AnimationTypeState;
@@ -3669,43 +3697,19 @@ declare const Reorder: {
 };
 
 /**
- * @public
+ * Animate a single value
  */
-interface AnimationPlaybackLifecycles<V> {
-    onUpdate?: (latest: V) => void;
-    onPlay?: () => void;
-    onComplete?: () => void;
-    onRepeat?: () => void;
-    onStop?: () => void;
-}
+declare function animate(from: string, to: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+declare function animate(from: number, to: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
 /**
- * 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
+ * Animate a MotionValue
+ */
+declare function animate(value: MotionValue<string>, keyframes: string | GenericKeyframesTarget<string>, options?: AnimateOptions<string>): AnimationPlaybackControls;
+declare function animate(value: MotionValue<number>, keyframes: number | GenericKeyframesTarget<number>, options?: AnimateOptions<number>): AnimationPlaybackControls;
+/**
+ * Animate DOM
  */
-declare function animate<V>(from: MotionValue<V> | V, to: V | V[], transition?: Transition & AnimationPlaybackLifecycles<V>): AnimationPlaybackControls;
+declare function animate<V>(value: ElementOrSelector$1, keyframes: DOMKeyframesDefinition, options?: AnimateOptions<V>): AnimationPlaybackControls;
 
 interface AxisScrollInfo {
     current: number;
@@ -4252,6 +4256,8 @@ declare const useAnimation: typeof useAnimationControls;
 declare type FrameCallback = (timestamp: number, delta: number) => void;
 declare function useAnimationFrame(callback: FrameCallback): void;
 
+declare function animateVisualElement(visualElement: VisualElement, definition: AnimationDefinition, options?: VisualElementAnimationOptions): Promise<void>;
+
 declare type Cycle = (i?: number) => void;
 declare type CycleState<T> = [T, Cycle];
 /**
@@ -4422,7 +4428,7 @@ interface KeyframeGenerator<V> {
 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 function animateValue<V = number>({ autoplay, delay, driver, keyframes, type, repeat, repeatDelay, repeatType, onPlay, onStop, onComplete, onUpdate, ...options }: AnimationOptions<V>): MainThreadAnimationControls<V>;
 
 declare type Transformer = (v: any) => any;
 declare type ValueType = {
@@ -4483,7 +4489,7 @@ declare function startOptimizedAppearAnimation(element: HTMLElement, name: strin
 
 declare const optimizedAppearDataAttribute: string;
 
-declare function spring({ keyframes, restDelta, restSpeed, ...options }: AnimationOptions$1<number>): KeyframeGenerator<number>;
+declare function spring({ keyframes, restDelta, restSpeed, ...options }: AnimationOptions<number>): KeyframeGenerator<number>;
 
 interface NodeGroup {
     add: (node: IProjectionNode) => void;
@@ -4548,4 +4554,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, 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 };
+export { AnimateOptions, AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationDefinition, AnimationLifecycleOptions, AnimationLifecycles, AnimationOptions, AnimationPlaybackControls, AnimationPlaybackLifecycles, AnimationPlaybackOptions, AnimationProps, AnimationType, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, CSSStyleDeclarationWithTransform, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DOMKeyframesDefinition, DecayOptions, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DevMessage, DragControls, DragElastic, DragHandlers, DraggableProps, DurationSpringOptions, Easing, EasingDefinition, EasingFunction, EasingModifier, ElementOrSelector$1 as ElementOrSelector, 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, StyleKeyframesDefinition, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition, Tween, UnresolvedValueKeyframe, ValueKeyframe, ValueKeyframesDefinition, ValueTarget, ValueType, VariableKeyframesDefinition, 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 };