framer-motion 10.12.18 → 10.12.21

package/dist/index.d.ts

@@ -1180,6 +1180,9 @@ declare type VariableTransitions = {
     [key: `--${string}`]: Transition;
 };
 declare type AnimationOptionsWithValueOverrides<V = any> = StyleTransitions & SVGPathTransitions & SVGTransitions & VariableTransitions & ValueAnimationTransition<V>;
+interface DynamicAnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
+    delay?: number | DynamicOption<number>;
+}
 declare type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
 /**
  * @public
@@ -2189,7 +2192,7 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
      * 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;
+    readValue(key: string): string | number | MotionValue<any> | 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.
@@ -4007,10 +4010,25 @@ interface SequenceOptions extends AnimationPlaybackOptions {
     duration?: number;
     defaultTransition?: Transition;
 }
-
-interface DynamicAnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
-    delay?: number | DynamicOption<number>;
+interface AbsoluteKeyframe {
+    value: string | number | null;
+    at: number;
+    easing?: Easing;
 }
+declare type ValueSequence = AbsoluteKeyframe[];
+interface SequenceMap {
+    [key: string]: ValueSequence;
+}
+declare type ResolvedAnimationDefinition = {
+    keyframes: {
+        [key: string]: UnresolvedValueKeyframe[];
+    };
+    transition: {
+        [key: string]: Transition;
+    };
+};
+declare type ResolvedAnimationDefinitions = Map<Element | MotionValue, ResolvedAnimationDefinition>;
+
 declare const createScopedAnimate: (scope?: AnimationScope) => {
     <V>(from: V, to: V | GenericKeyframesTarget<V>, options?: ValueAnimationTransition<V> | undefined): AnimationPlaybackControls;
     <V_1>(value: MotionValue<V_1>, keyframes: V_1 | GenericKeyframesTarget<V_1>, options?: ValueAnimationTransition<V_1> | undefined): AnimationPlaybackControls;
@@ -4273,7 +4291,7 @@ interface MotionContextProps<Instance = unknown> {
 }
 declare const MotionContext: React$1.Context<MotionContextProps<unknown>>;
 
-declare function checkTargetForNewValues(visualElement: VisualElement, target: TargetWithKeyframes, origin: ResolvedValues): void;
+declare function checkTargetForNewValues(visualElement: VisualElement, target: TargetWithKeyframes, origin: ResolvedValues): boolean;
 
 declare const createBox: () => Box;
 
@@ -4912,4 +4930,4 @@ declare function useInvertedScale(scale?: Partial<ScaleMotionValues>): ScaleMoti
 
 declare const AnimateSharedLayout: React$1.FunctionComponent<React$1.PropsWithChildren<unknown>>;
 
-export { AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationDefinition, AnimationLifecycles, AnimationOptionsWithValueOverrides, AnimationPlaybackControls, AnimationPlaybackLifecycles, AnimationPlaybackOptions, AnimationProps, AnimationScope, AnimationType, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, CSSStyleDeclarationWithTransform, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DOMKeyframesDefinition, DecayOptions, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DevMessage, DragControls, DragElastic, DragHandlers, DraggableProps, DurationSpringOptions, DynamicOption, Easing, EasingDefinition, EasingFunction, EasingModifier, 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, SVGKeyframesDefinition, SVGMotionProps, SVGPathKeyframesDefinition, SVGPathTransitions, SVGTransitions, ScrapeMotionValuesFromProps, ScrollMotionValues, SingleTarget, Spring, SpringOptions, StyleKeyframesDefinition, StyleTransitions, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition$1 as Transition, Tween, UnresolvedValueKeyframe, ValueAnimationOptions, ValueAnimationTransition, ValueKeyframe, ValueKeyframesDefinition, ValueTarget, ValueType, VariableKeyframesDefinition, VariableTransitions, Variant, VariantLabels, Variants, VelocityOptions, VisualElement, VisualState, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateValue, animateVisualElement, animationControls, animations, anticipate, backIn, backInOut, backOut, buildTransform, calcLength, cancelFrame, cancelSync, checkTargetForNewValues, circIn, circInOut, circOut, clamp, color, complex, createBox, createDomMotionComponent, createMotionComponent, createScopedAnimate, cubicBezier, delay, distance, distance2D, domAnimation, domMax, easeIn, easeInOut, easeOut, filterProps, frame, frameData, inView, interpolate, invariant, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mirrorEasing, mix, motion, motionValue, optimizedAppearDataAttribute, pipe, progress, px, resolveMotionValue, reverseEasing, scroll, spring, stagger, startOptimizedAppearAnimation, steps, stepsOrder, sync, transform, unwrapMotionComponent, useAnimate, 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, visualElementStore, warning, wrap };
+export { AbsoluteKeyframe, AnimatePresence, AnimatePresenceProps, AnimateSharedLayout, AnimationControls, AnimationDefinition, AnimationLifecycles, AnimationOptionsWithValueOverrides, AnimationPlaybackControls, AnimationPlaybackLifecycles, AnimationPlaybackOptions, AnimationProps, AnimationScope, AnimationSequence, AnimationType, At, Axis, AxisDelta, BezierDefinition, BoundingBox, Box, CSSStyleDeclarationWithTransform, CreateVisualElement, CustomDomComponent, CustomValueType, Cycle, CycleState, DOMKeyframesDefinition, DOMSegment, DOMSegmentWithTransition, DecayOptions, DelayedFunction, Delta, DeprecatedLayoutGroupContext, DevMessage, DragControls, DragElastic, DragHandlers, DraggableProps, DurationSpringOptions, DynamicAnimationOptions, DynamicOption, Easing, EasingDefinition, EasingFunction, EasingModifier, 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, MotionValueSegment, MotionValueSegmentWithTransition, None, Orchestration, PanHandlers, PanInfo, PassiveEffect, Point, PresenceContext, RelayoutInfo, RenderComponent, Reorder, Repeat, ResolveLayoutTransition, ResolvedAnimationDefinition, ResolvedAnimationDefinitions, ResolvedKeyframesTarget, ResolvedSingleTarget, ResolvedValueTarget, ResolvedValues, SVGAttributesAsMotionValues, SVGKeyframesDefinition, SVGMotionProps, SVGPathKeyframesDefinition, SVGPathTransitions, SVGTransitions, ScrapeMotionValuesFromProps, ScrollMotionValues, Segment, SequenceLabel, SequenceLabelWithTime, SequenceMap, SequenceOptions, SequenceTime, SingleTarget, Spring, SpringOptions, StyleKeyframesDefinition, StyleTransitions, Subscriber, SwitchLayoutGroupContext, TapHandlers, TapInfo, Target, TargetAndTransition, TransformPoint, Transition$1 as Transition, Tween, UnresolvedValueKeyframe, ValueAnimationOptions, ValueAnimationTransition, ValueKeyframe, ValueKeyframesDefinition, ValueSequence, ValueTarget, ValueType, VariableKeyframesDefinition, VariableTransitions, Variant, VariantLabels, Variants, VelocityOptions, VisualElement, VisualState, addPointerEvent, addPointerInfo, addScaleCorrector, animate, animateValue, animateVisualElement, animationControls, animations, anticipate, backIn, backInOut, backOut, buildTransform, calcLength, cancelFrame, cancelSync, checkTargetForNewValues, circIn, circInOut, circOut, clamp, color, complex, createBox, createDomMotionComponent, createMotionComponent, createScopedAnimate, cubicBezier, delay, distance, distance2D, domAnimation, domMax, easeIn, easeInOut, easeOut, filterProps, frame, frameData, inView, interpolate, invariant, isBrowser, isDragActive, isMotionComponent, isMotionValue, isValidMotionProp, m, makeUseVisualState, mirrorEasing, mix, motion, motionValue, optimizedAppearDataAttribute, pipe, progress, px, resolveMotionValue, reverseEasing, scroll, spring, stagger, startOptimizedAppearAnimation, steps, stepsOrder, sync, transform, unwrapMotionComponent, useAnimate, 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, visualElementStore, warning, wrap };

package/dist/projection.dev.js

@@ -938,7 +938,7 @@
              * 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.
              */
-            this.version = "10.12.18";
+            this.version = "10.12.21";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -2307,12 +2307,10 @@
         let resolveFinishedPromise;
         let currentFinishedPromise;
         /**
-         * Create a new finished Promise every time we enter the
-         * finished state and resolve the old Promise. This is
-         * WAAPI-compatible behaviour.
+         * Resolve the current Promise every time we enter the
+         * finished state. This is WAAPI-compatible behaviour.
          */
         const updateFinishedPromise = () => {
-            resolveFinishedPromise && resolveFinishedPromise();
             currentFinishedPromise = new Promise((resolve) => {
                 resolveFinishedPromise = resolve;
             });
@@ -2480,6 +2478,7 @@
         const cancel = () => {
             playState = "idle";
             stopAnimationDriver();
+            resolveFinishedPromise();
             updateFinishedPromise();
             startTime = cancelTime = null;
         };
@@ -2487,7 +2486,7 @@
             playState = "finished";
             onComplete && onComplete();
             stopAnimationDriver();
-            updateFinishedPromise();
+            resolveFinishedPromise();
         };
         const play = () => {
             if (hasStopped)
@@ -2502,6 +2501,9 @@
             else if (!startTime || playState === "finished") {
                 startTime = now;
             }
+            if (playState === "finished") {
+                updateFinishedPromise();
+            }
             cancelTime = startTime;
             holdTime = null;
             /**
@@ -2618,9 +2620,8 @@
         let resolveFinishedPromise;
         let currentFinishedPromise;
         /**
-         * Create a new finished Promise every time we enter the
-         * finished state and resolve the old Promise. This is
-         * WAAPI-compatible behaviour.
+         * Resolve the current Promise every time we enter the
+         * finished state. This is WAAPI-compatible behaviour.
          */
         const updateFinishedPromise = () => {
             currentFinishedPromise = new Promise((resolve) => {
@@ -3196,7 +3197,7 @@
         const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
         const numNewValues = newValueKeys.length;
         if (!numNewValues)
-            return;
+            return false;
         for (let i = 0; i < numNewValues; i++) {
             const key = newValueKeys[i];
             const targetValue = target[key];
@@ -3237,6 +3238,7 @@
             if (value !== null)
                 visualElement.setBaseTarget(key, value);
         }
+        return true;
     }
     function getOriginFromTransition(key, transition) {
         if (!transition)
@@ -3433,6 +3435,9 @@
         x: getTranslateFromMatrix(4, 13),
         y: getTranslateFromMatrix(5, 14),
     };
+    // Alias translate longform names
+    positionalValues.translateX = positionalValues.x;
+    positionalValues.translateY = positionalValues.y;
     const convertChangedValueTypes = (target, visualElement, changedKeys) => {
         const originBbox = visualElement.measureViewportBox();
         const element = visualElement.current;
@@ -3672,7 +3677,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "10.12.18", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.18 may not work as expected.`);
+                    warnOnce(nextValue.version === "10.12.21", `Attempting to mix Framer Motion versions ${nextValue.version} with 10.12.21 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -4165,9 +4170,10 @@
          * directly from the instance (which might have performance implications).
          */
         readValue(key) {
+            var _a;
             return this.latestValues[key] !== undefined || !this.current
                 ? this.latestValues[key]
-                : this.readValueFromInstance(this.current, key, this.options);
+                : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
         }
         /**
          * Set the base target to later animate back to. This is currently
@@ -4251,7 +4257,11 @@
                     origin = transformValues(origin);
             }
             if (isMounted) {
-                checkTargetForNewValues(this, target, origin);
+                const newValues = checkTargetForNewValues(this, target, origin);
+                // If new values have been added, for instance named color values, transform these
+                if (transformValues && newValues) {
+                    origin = transformValues(origin);
+                }
                 const parsed = parseDomVariant(this, target, origin, transitionEnd);
                 transitionEnd = parsed.transitionEnd;
                 target = parsed.target;

package/dist/three-entry.d.ts

@@ -1822,7 +1822,7 @@ declare abstract class VisualElement<Instance = unknown, RenderState = unknown,
      * 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;
+    readValue(key: string): string | number | MotionValue<any> | 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.
@@ -2865,7 +2865,7 @@ interface MotionContextProps<Instance = unknown> {
 }
 declare const MotionContext: react.Context<MotionContextProps<unknown>>;
 
-declare function checkTargetForNewValues(visualElement: VisualElement, target: TargetWithKeyframes, origin: ResolvedValues): void;
+declare function checkTargetForNewValues(visualElement: VisualElement, target: TargetWithKeyframes, origin: ResolvedValues): boolean;
 
 declare const createBox: () => Box;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "10.12.18",
+    "version": "10.12.21",
     "description": "A simple and powerful React and JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -53,7 +53,7 @@
         "test-projection": "yarn run collect-projection-tests && start-server-and-test 'pushd ../../; python -m SimpleHTTPServer; popd' http://0.0.0.0:8000 'cypress run -s cypress/integration/projection.chrome.ts --config baseUrl=http://localhost:8000/'",
         "test-e2e-chrome": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --browser chrome  --spec \"cypress/integration/layout-relative.chrome.ts\"'",
         "test-e2e-electron": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --config ignoreTestFiles=*.chrome.ts'",
-        "test-e2e": "yarn test-appear && yarn test-projection",
+        "test-e2e": "yarn test-appear && yarn test-projection && yarn test-e2e-electron",
         "test-e2e-file": "start-server-and-test start-dev-server http://localhost:9990 'cypress run --headless --spec \"cypress/integration/while-in-view.ts\"'",
         "collect-appear-tests": "node ../../dev/optimized-appear/collect-appear-tests.js",
         "collect-projection-tests": "node ../../dev/projection/collect-projection-tests.js",
@@ -93,15 +93,15 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "15.34 kB"
+            "maxSize": "15.36 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "26.36 kB"
+            "maxSize": "26.38 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "16.08 kB"
+            "maxSize": "16.1 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
@@ -109,12 +109,12 @@
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "19.37 kB"
+            "maxSize": "19.39 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "31.14 kB"
+            "maxSize": "31.16 kB"
         }
     ],
-    "gitHead": "f4d78094383ec0dfe17c02f1845d1d8f9aee902e"
+    "gitHead": "86b73dc837473d5645e580985753537849761cc1"
 }