framer-motion 10.3.4 → 10.4.0

package/dist/three-entry.d.ts

@@ -862,10 +862,7 @@ interface AnimationPlaybackControls {
     pause: () => void;
     then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
 }
-/**
- * @public
- */
-declare type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
 /**
  * @public
  */
@@ -889,7 +886,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.
      *
@@ -910,7 +907,7 @@ interface AnimationControls {
      *
      * @public
      */
-    set(definition: ControlsAnimationDefinition): void;
+    set(definition: AnimationDefinition): void;
     /**
      * Stops animations on all linked components.
      *
@@ -1451,8 +1448,7 @@ interface FeatureBundle extends FeaturePackages {
 
 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;
@@ -1460,8 +1456,8 @@ declare type AnimationOptions = {
 };
 
 interface AnimationState {
-    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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "10.3.4",
+    "version": "10.4.0",
     "description": "A simple and powerful React and JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -93,7 +93,7 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "14.7 kB"
+            "maxSize": "14.74 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
@@ -101,7 +101,7 @@
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "10 kB"
+            "maxSize": "15 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
@@ -109,12 +109,12 @@
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "18.71 kB"
+            "maxSize": "18.78 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
             "maxSize": "30.8 kB"
         }
     ],
-    "gitHead": "1842a8041eb4a11c2bf0f1c817383b9152bd98d5"
+    "gitHead": "3a3c4d1daa52b0ad724591e743fdebcad8f5aaf3"
 }

package/dist/es/render/utils/animation.mjs

@@ -1,145 +0,0 @@
-import { setTarget } from './setters.mjs';
-import { resolveVariant } from './resolve-dynamic-variants.mjs';
-import { transformProps } from '../html/utils/transform.mjs';
-import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';
-import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';
-import { createMotionValueAnimation } from '../../animation/index.mjs';
-import { sync } from '../../frameloop/index.mjs';
-
-function animateVisualElement(visualElement, definition, options = {}) {
-    visualElement.notify("AnimationStart", definition);
-    let animation;
-    if (Array.isArray(definition)) {
-        const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
-        animation = Promise.all(animations);
-    }
-    else if (typeof definition === "string") {
-        animation = animateVariant(visualElement, definition, options);
-    }
-    else {
-        const resolvedDefinition = typeof definition === "function"
-            ? resolveVariant(visualElement, definition, options.custom)
-            : definition;
-        animation = animateTarget(visualElement, resolvedDefinition, options);
-    }
-    return animation.then(() => visualElement.notify("AnimationComplete", definition));
-}
-function animateVariant(visualElement, variant, options = {}) {
-    const resolved = resolveVariant(visualElement, variant, options.custom);
-    let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
-    if (options.transitionOverride) {
-        transition = options.transitionOverride;
-    }
-    /**
-     * If we have a variant, create a callback that runs it as an animation.
-     * Otherwise, we resolve a Promise immediately for a composable no-op.
-     */
-    const getAnimation = resolved
-        ? () => animateTarget(visualElement, resolved, options)
-        : () => Promise.resolve();
-    /**
-     * If we have children, create a callback that runs all their animations.
-     * Otherwise, we resolve a Promise immediately for a composable no-op.
-     */
-    const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
-        ? (forwardDelay = 0) => {
-            const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
-            return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
-        }
-        : () => Promise.resolve();
-    /**
-     * If the transition explicitly defines a "when" option, we need to resolve either
-     * this animation or all children animations before playing the other.
-     */
-    const { when } = transition;
-    if (when) {
-        const [first, last] = when === "beforeChildren"
-            ? [getAnimation, getChildAnimations]
-            : [getChildAnimations, getAnimation];
-        return first().then(last);
-    }
-    else {
-        return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
-    }
-}
-/**
- * @internal
- */
-function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
-    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
-    const willChange = visualElement.getValue("willChange");
-    if (transitionOverride)
-        transition = transitionOverride;
-    const animations = [];
-    const animationTypeState = type &&
-        visualElement.animationState &&
-        visualElement.animationState.getState()[type];
-    for (const key in target) {
-        const value = visualElement.getValue(key);
-        const valueTarget = target[key];
-        if (!value ||
-            valueTarget === undefined ||
-            (animationTypeState &&
-                shouldBlockAnimation(animationTypeState, key))) {
-            continue;
-        }
-        const valueTransition = { delay, elapsed: 0, ...transition };
-        /**
-         * If this is the first time a value is being animated, check
-         * to see if we're handling off from an existing animation.
-         */
-        if (window.HandoffAppearAnimations && !value.hasAnimated) {
-            const appearId = visualElement.getProps()[optimizedAppearDataAttribute];
-            if (appearId) {
-                valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, sync);
-            }
-        }
-        let animation = value.start(createMotionValueAnimation(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
-            ? { type: false }
-            : valueTransition));
-        if (isWillChangeMotionValue(willChange)) {
-            willChange.add(key);
-            animation = animation.then(() => willChange.remove(key));
-        }
-        animations.push(animation);
-    }
-    return Promise.all(animations).then(() => {
-        transitionEnd && setTarget(visualElement, transitionEnd);
-    });
-}
-function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
-    const animations = [];
-    const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
-    const generateStaggerDuration = staggerDirection === 1
-        ? (i = 0) => i * staggerChildren
-        : (i = 0) => maxStaggerDuration - i * staggerChildren;
-    Array.from(visualElement.variantChildren)
-        .sort(sortByTreeOrder)
-        .forEach((child, i) => {
-        child.notify("AnimationStart", variant);
-        animations.push(animateVariant(child, variant, {
-            ...options,
-            delay: delayChildren + generateStaggerDuration(i),
-        }).then(() => child.notify("AnimationComplete", variant)));
-    });
-    return Promise.all(animations);
-}
-function stopAnimation(visualElement) {
-    visualElement.values.forEach((value) => value.stop());
-}
-function sortByTreeOrder(a, b) {
-    return a.sortNodePosition(b);
-}
-/**
- * Decide whether we should block this animation. Previously, we achieved this
- * just by checking whether the key was listed in protectedKeys, but this
- * posed problems if an animation was triggered by afterChildren and protectedKeys
- * had been set to true in the meantime.
- */
-function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
-    const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
-    needsAnimating[key] = false;
-    return shouldBlock;
-}
-
-export { animateVisualElement, sortByTreeOrder, stopAnimation };