framer-motion 11.14.3 → 11.15.0

package/dist/cjs/client.js

@@ -250,10 +250,11 @@ function createRenderStep(runNextFrame) {
             }
             isProcessing = true;
             [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Clear the next frame queue
-            nextFrame.clear();
             // Execute this frame
             thisFrame.forEach(triggerCallback);
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
             isProcessing = false;
             if (flushNextFrame) {
                 flushNextFrame = false;
@@ -3333,7 +3334,7 @@ class MotionValue {
          * 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 = "11.14.3";
+        this.version = "11.15.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5840,7 +5841,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.14.3", `Attempting to mix Motion versions ${nextValue.version} with 11.14.3 may not work as expected.`);
+                warnOnce(nextValue.version === "11.15.0", `Attempting to mix Motion versions ${nextValue.version} with 11.15.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/dom.js

@@ -75,10 +75,11 @@ function createRenderStep(runNextFrame) {
             }
             isProcessing = true;
             [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Clear the next frame queue
-            nextFrame.clear();
             // Execute this frame
             thisFrame.forEach(triggerCallback);
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
             isProcessing = false;
             if (flushNextFrame) {
                 flushNextFrame = false;
@@ -280,7 +281,7 @@ class MotionValue {
          * 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 = "11.14.3";
+        this.version = "11.15.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -1126,7 +1127,24 @@ function compareByTime(a, b) {
     }
 }
 
+/**
+ * Take an array of times that represent repeated keyframes. For instance
+ * if we have original times of [0, 0.5, 1] then our repeated times will
+ * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
+ * down to a 0-1 scale.
+ */
+function normalizeTimes(times, repeat) {
+    for (let i = 0; i < times.length; i++) {
+        times[i] = times[i] / (repeat + 1);
+    }
+}
+
+function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+    return duration * (repeat + 1);
+}
+
 const defaultSegmentEasing = "easeInOut";
+const MAX_REPEAT = 20;
 function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
     const defaultDuration = defaultTransition.duration || 0.3;
     const animationDefinitions = new Map();
@@ -1169,7 +1187,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$1(valueKeyframesAsList), type = "keyframes", ...remainingTransition } = valueTransition;
+            const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
             let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
             /**
              * Resolve stagger() if defined.
@@ -1207,7 +1225,6 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             }
             duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
             const startTime = currentTime + calculatedDelay;
-            const targetTime = startTime + duration;
             /**
              * If there's only one time offset of 0, fill in a second with length 1
              */
@@ -1226,6 +1243,28 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              */
             valueKeyframesAsList.length === 1 &&
                 valueKeyframesAsList.unshift(null);
+            /**
+             * Handle repeat options
+             */
+            if (repeat) {
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                duration = calculateRepeatDuration(duration, repeat);
+                const originalKeyframes = [...valueKeyframesAsList];
+                const originalTimes = [...times];
+                ease = Array.isArray(ease) ? [...ease] : [ease];
+                const originalEase = [...ease];
+                for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+                    valueKeyframesAsList.push(...originalKeyframes);
+                    for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
+                        times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+                        ease.push(keyframeIndex === 0
+                            ? "linear"
+                            : getEasingForSegment(originalEase, keyframeIndex - 1));
+                    }
+                }
+                normalizeTimes(times, repeat);
+            }
+            const targetTime = startTime + duration;
             /**
              * Add keyframes, mapping offsets to absolute time.
              */
@@ -4117,7 +4156,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.14.3", `Attempting to mix Motion versions ${nextValue.version} with 11.14.3 may not work as expected.`);
+                warnOnce(nextValue.version === "11.15.0", `Attempting to mix Motion versions ${nextValue.version} with 11.15.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/index.js

@@ -318,10 +318,11 @@ function createRenderStep(runNextFrame) {
             }
             isProcessing = true;
             [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Clear the next frame queue
-            nextFrame.clear();
             // Execute this frame
             thisFrame.forEach(triggerCallback);
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
             isProcessing = false;
             if (flushNextFrame) {
                 flushNextFrame = false;
@@ -3416,7 +3417,7 @@ class MotionValue {
          * 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 = "11.14.3";
+        this.version = "11.15.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5939,7 +5940,24 @@ function compareByTime(a, b) {
     }
 }
 
+/**
+ * Take an array of times that represent repeated keyframes. For instance
+ * if we have original times of [0, 0.5, 1] then our repeated times will
+ * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
+ * down to a 0-1 scale.
+ */
+function normalizeTimes(times, repeat) {
+    for (let i = 0; i < times.length; i++) {
+        times[i] = times[i] / (repeat + 1);
+    }
+}
+
+function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+    return duration * (repeat + 1);
+}
+
 const defaultSegmentEasing = "easeInOut";
+const MAX_REPEAT = 20;
 function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
     const defaultDuration = defaultTransition.duration || 0.3;
     const animationDefinitions = new Map();
@@ -5982,7 +6000,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$1(valueKeyframesAsList), type = "keyframes", ...remainingTransition } = valueTransition;
+            const { delay = 0, times = defaultOffset$1(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
             let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
             /**
              * Resolve stagger() if defined.
@@ -6020,7 +6038,6 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             }
             duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
             const startTime = currentTime + calculatedDelay;
-            const targetTime = startTime + duration;
             /**
              * If there's only one time offset of 0, fill in a second with length 1
              */
@@ -6039,6 +6056,28 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              */
             valueKeyframesAsList.length === 1 &&
                 valueKeyframesAsList.unshift(null);
+            /**
+             * Handle repeat options
+             */
+            if (repeat) {
+                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+                duration = calculateRepeatDuration(duration, repeat);
+                const originalKeyframes = [...valueKeyframesAsList];
+                const originalTimes = [...times];
+                ease = Array.isArray(ease) ? [...ease] : [ease];
+                const originalEase = [...ease];
+                for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+                    valueKeyframesAsList.push(...originalKeyframes);
+                    for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
+                        times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+                        ease.push(keyframeIndex === 0
+                            ? "linear"
+                            : getEasingForSegment(originalEase, keyframeIndex - 1));
+                    }
+                }
+                normalizeTimes(times, repeat);
+            }
+            const targetTime = startTime + duration;
             /**
              * Add keyframes, mapping offsets to absolute time.
              */
@@ -6243,7 +6282,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "11.14.3", `Attempting to mix Motion versions ${nextValue.version} with 11.14.3 may not work as expected.`);
+                warnOnce(nextValue.version === "11.15.0", `Attempting to mix Motion versions ${nextValue.version} with 11.15.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/m.js

@@ -101,10 +101,11 @@ function createRenderStep(runNextFrame) {
             }
             isProcessing = true;
             [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Clear the next frame queue
-            nextFrame.clear();
             // Execute this frame
             thisFrame.forEach(triggerCallback);
+            // Clear the frame so no callbacks remain. This is to avoid
+            // memory leaks should this render step not run for a while.
+            thisFrame.clear();
             isProcessing = false;
             if (flushNextFrame) {
                 flushNextFrame = false;

package/dist/client.d.ts

@@ -2538,9 +2538,9 @@ declare global {
 
 type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
-declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | React$1.ForwardRefExoticComponent<Props>, { forwardMotionProps }?: {
+declare const createMotionComponent: <Props, TagName extends string = "div">(Component: string | TagName | React$1.ComponentType<Props>, { forwardMotionProps }?: {
     forwardMotionProps: boolean;
-}) => TagName extends "symbol" | "filter" | "stop" | "clipPath" | "mask" | "marker" | "animate" | "text" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : React$1.ForwardRefExoticComponent<MotionComponentProps<React$1.PropsWithChildren<Props>>>;
+}) => TagName extends "symbol" | "filter" | "stop" | "clipPath" | "mask" | "marker" | "animate" | "text" | "path" | "image" | "circle" | "switch" | "svg" | keyof HTMLElements | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "line" | "linearGradient" | "metadata" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "textPath" | "tspan" | "use" | "view" ? DOMMotionComponents[TagName] : React$1.ComponentType<MotionComponentProps<React$1.PropsWithChildren<Props>>>;
 
 /**
  * HTML components

package/dist/dom.d.ts

@@ -665,6 +665,24 @@ interface SequenceOptions extends AnimationPlaybackOptions {
     duration?: number;
     defaultTransition?: Transition;
 }
+interface AbsoluteKeyframe {
+    value: string | number | null;
+    at: number;
+    easing?: Easing;
+}
+type ValueSequence = AbsoluteKeyframe[];
+interface SequenceMap {
+    [key: string]: ValueSequence;
+}
+type ResolvedAnimationDefinition = {
+    keyframes: {
+        [key: string]: UnresolvedValueKeyframe[];
+    };
+    transition: {
+        [key: string]: Transition;
+    };
+};
+type ResolvedAnimationDefinitions = Map<Element | MotionValue, ResolvedAnimationDefinition>;
 
 /**
  * Creates an animation function that is optionally scoped
@@ -1017,4 +1035,4 @@ declare const sync: Batcher;
  */
 declare const cancelSync: Record<string, (process: Process) => void>;
 
-export { type BezierDefinition, type DOMKeyframesDefinition, type DelayedFunction, type Direction, type DynamicAnimationOptions, type Easing, type EasingDefinition, type EasingFunction, type EasingModifier, type InterpolateOptions, type MixerFactory, MotionValue, type PassiveEffect, type Subscriber, animate, animateMini, anticipate, backIn, backInOut, backOut, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, createScopedAnimate, cubicBezier, delayInSeconds as delay, distance, distance2D, easeIn, easeInOut, easeOut, frame, frameData, frameSteps, inView, inertia, interpolate, keyframes, mirrorEasing, mix, motionValue, pipe, progress, reverseEasing, scroll, scrollInfo, spring, stagger, steps, sync, time, transform, wrap };
+export { type AbsoluteKeyframe, type AnimationSequence, type At, type BezierDefinition, type DOMKeyframesDefinition, type DOMSegment, type DOMSegmentWithTransition, type DelayedFunction, type Direction, type DynamicAnimationOptions, type Easing, type EasingDefinition, type EasingFunction, type EasingModifier, type InterpolateOptions, type MixerFactory, MotionValue, type MotionValueSegment, type MotionValueSegmentWithTransition, type ObjectSegment, type ObjectSegmentWithTransition, type ObjectTarget, type PassiveEffect, type ResolvedAnimationDefinition, type ResolvedAnimationDefinitions, type Segment, type SequenceLabel, type SequenceLabelWithTime, type SequenceMap, type SequenceOptions, type SequenceTime, type Subscriber, type ValueSequence, animate, animateMini, anticipate, backIn, backInOut, backOut, cancelFrame, cancelSync, circIn, circInOut, circOut, clamp, createScopedAnimate, cubicBezier, delayInSeconds as delay, distance, distance2D, easeIn, easeInOut, easeOut, frame, frameData, frameSteps, inView, inertia, interpolate, keyframes, mirrorEasing, mix, motionValue, pipe, progress, reverseEasing, scroll, scrollInfo, spring, stagger, steps, sync, time, transform, wrap };