framer-motion 12.7.4 → 12.7.5-alpha.0

package/dist/cjs/dom-mini.js

@@ -5,58 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var motionDom = require('motion-dom');
 var motionUtils = require('motion-utils');
 
-const wrap = (min, max, v) => {
-    const rangeSize = max - min;
-    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
-};
-
-const isEasingArray = (ease) => {
-    return Array.isArray(ease) && typeof ease[0] !== "number";
-};
-
-function getEasingForSegment(easing, i) {
-    return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
-}
-
-/*
-  Value in range from progress
-
-  Given a lower limit and an upper limit, we return the value within
-  that range as expressed by progress (usually a number from 0 to 1)
-
-  So progress = 0.5 would change
-
-  from -------- to
-
-  to
-
-  from ---- to
-
-  E.g. from = 10, to = 20, progress = 0.5 => 15
-
-  @param [number]: Lower limit of range
-  @param [number]: Upper limit of range
-  @param [number]: The progress between lower and upper limits expressed 0-1
-  @return [number]: Value as calculated from progress within range (not limited within range)
-*/
-const mixNumber = (from, to, progress) => {
-    return from + (to - from) * progress;
-};
-
-function fillOffset(offset, remaining) {
-    const min = offset[offset.length - 1];
-    for (let i = 1; i <= remaining; i++) {
-        const offsetProgress = motionUtils.progress(0, remaining, i);
-        offset.push(mixNumber(min, 1, offsetProgress));
-    }
-}
-
-function defaultOffset(arr) {
-    const offset = [0];
-    fillOffset(offset, arr.length - 1);
-    return offset;
-}
-
 const isMotionValue = (value) => Boolean(value && value.getVelocity);
 
 function isDOMKeyframes(keyframes) {
@@ -121,8 +69,8 @@ function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
     for (let i = 0; i < keyframes.length; i++) {
         sequence.push({
             value: keyframes[i],
-            at: mixNumber(startTime, endTime, offset[i]),
-            easing: getEasingForSegment(easing, i),
+            at: motionDom.mixNumber(startTime, endTime, offset[i]),
+            easing: motionUtils.getEasingForSegment(easing, i),
         });
     }
 }
@@ -196,7 +144,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
         let maxDuration = 0;
         const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
             const valueKeyframesAsList = keyframesAsList(valueKeyframes);
-            const { delay = 0, times = defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
+            const { delay = 0, times = motionDom.defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
             let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
             /**
              * Resolve stagger() if defined.
@@ -244,7 +192,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              * Fill out if offset if fewer offsets than keyframes
              */
             const remainder = times.length - valueKeyframesAsList.length;
-            remainder > 0 && fillOffset(times, remainder);
+            remainder > 0 && motionDom.fillOffset(times, remainder);
             /**
              * If only one value has been set, ie [1], push a null to the start of
              * the keyframe array. This will let us mark a keyframe at this point
@@ -268,7 +216,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
                         times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
                         ease.push(keyframeIndex === 0
                             ? "linear"
-                            : getEasingForSegment(originalEase, keyframeIndex - 1));
+                            : motionUtils.getEasingForSegment(originalEase, keyframeIndex - 1));
                     }
                 }
                 normalizeTimes(times, repeat);
@@ -395,7 +343,27 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = motionDom.resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
     motionUtils.invariant(Boolean(numElements), "No valid element provided.");
-    const animations = [];
+    /**
+     * WAAPI doesn't support interrupting animations.
+     *
+     * Therefore, starting animations requires a three-step process:
+     * 1. Stop existing animations (write styles to DOM)
+     * 2. Resolve keyframes (read styles from DOM)
+     * 3. Create new animations (write styles to DOM)
+     *
+     * The hybrid `animate()` function uses AsyncAnimation to resolve
+     * keyframes before creating new animations, which removes style
+     * thrashing. Here, we have much stricter filesize constraints.
+     * Therefore we do this in a synchronous way that ensures that
+     * at least within `animate()` calls there is no style thrashing.
+     *
+     * In the motion-native-animate-mini-interrupt benchmark this
+     * was 80% faster than a single loop.
+     */
+    const animationDefinitions = [];
+    /**
+     * Step 1: Build options and stop existing animations (write)
+     */
     for (let i = 0; i < numElements; i++) {
         const element = elements[i];
         const elementTransition = { ...options };
@@ -406,21 +374,69 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             elementTransition.delay = elementTransition.delay(i, numElements);
         }
         for (const valueName in keyframes) {
-            const valueKeyframes = keyframes[valueName];
+            let valueKeyframes = keyframes[valueName];
+            if (!Array.isArray(valueKeyframes)) {
+                valueKeyframes = [valueKeyframes];
+            }
             const valueOptions = {
                 ...motionDom.getValueTransition(elementTransition, valueName),
             };
             valueOptions.duration && (valueOptions.duration = motionUtils.secondsToMilliseconds(valueOptions.duration));
             valueOptions.delay && (valueOptions.delay = motionUtils.secondsToMilliseconds(valueOptions.delay));
-            animations.push(new motionDom.NativeAnimation({
-                element,
-                name: valueName,
-                keyframes: valueKeyframes,
-                transition: valueOptions,
-                allowFlatten: !elementTransition.type && !elementTransition.ease,
-            }));
+            /**
+             * If there's an existing animation playing on this element then stop it
+             * before creating a new one.
+             */
+            const map = motionDom.getAnimationMap(element);
+            const key = motionDom.animationMapKey(valueName, valueOptions.pseudoElement || "");
+            const currentAnimation = map.get(key);
+            currentAnimation && currentAnimation.stop();
+            animationDefinitions.push({
+                map,
+                key,
+                unresolvedKeyframes: valueKeyframes,
+                options: {
+                    ...valueOptions,
+                    element,
+                    name: valueName,
+                    allowFlatten: !elementTransition.type && !elementTransition.ease,
+                },
+            });
         }
     }
+    /**
+     * Step 2: Resolve keyframes (read)
+     */
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { unresolvedKeyframes, options: animationOptions } = animationDefinitions[i];
+        const { element, name, pseudoElement } = animationOptions;
+        if (!pseudoElement && unresolvedKeyframes[0] === null) {
+            unresolvedKeyframes[0] = motionDom.getComputedStyle(element, name);
+        }
+        motionDom.fillWildcards(unresolvedKeyframes);
+        motionDom.applyPxDefaults(unresolvedKeyframes, name);
+        /**
+         * If we only have one keyframe, explicitly read the initial keyframe
+         * from the computed style. This is to ensure consistency with WAAPI behaviour
+         * for restarting animations, for instance .play() after finish, when it
+         * has one vs two keyframes.
+         */
+        if (!pseudoElement && unresolvedKeyframes.length < 2) {
+            unresolvedKeyframes.unshift(motionDom.getComputedStyle(element, name));
+        }
+        animationOptions.keyframes = unresolvedKeyframes;
+    }
+    /**
+     * Step 3: Create new animations (write)
+     */
+    const animations = [];
+    for (let i = 0; i < animationDefinitions.length; i++) {
+        const { map, key, options: animationOptions } = animationDefinitions[i];
+        const animation = new motionDom.NativeAnimation(animationOptions);
+        map.set(key, animation);
+        animation.finished.finally(() => map.delete(key));
+        animations.push(animation);
+    }
     return animations;
 }