framer-motion 12.38.0 → 12.40.0

package/dist/cjs/dom.js

@@ -27,8 +27,8 @@ function resolveSubjects(subject, keyframes, scope, selectorCache) {
     }
 }
 
-function calculateRepeatDuration(duration, repeat, _repeatDelay) {
-    return duration * (repeat + 1);
+function calculateRepeatDuration(duration, repeat, repeatDelay) {
+    return duration * (repeat + 1) + repeatDelay * repeat;
 }
 
 /**
@@ -84,10 +84,14 @@ function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
  * 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.
+ *
+ * `repeatDelayUnits` is the repeatDelay expressed in units of a single
+ * iteration's duration, so the total span equals `(repeat + 1) + repeat * repeatDelayUnits`.
  */
-function normalizeTimes(times, repeat) {
+function normalizeTimes(times, repeat, repeatDelayUnits = 0) {
+    const totalUnits = repeat + 1 + repeat * repeatDelayUnits;
     for (let i = 0; i < times.length; i++) {
-        times[i] = times[i] / (repeat + 1);
+        times[i] = times[i] / totalUnits;
     }
 }
 
@@ -208,25 +212,73 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             valueKeyframesAsList.length === 1 &&
                 valueKeyframesAsList.unshift(null);
             /**
-             * Handle repeat options
+             * Segments can't express `repeat: Infinity` or very large
+             * counts — they'd leave dead time after the segment or
+             * explode the keyframe array. Ignore with a warning.
              */
             if (repeat) {
-                motionUtils.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
-                duration = calculateRepeatDuration(duration, repeat);
+                motionUtils.warning(repeat < MAX_REPEAT, `Sequence segments can't repeat ${repeat} times — ignoring repeat option. Use a value below ${MAX_REPEAT} or apply repeat at the sequence level instead.`);
+            }
+            if (repeat && repeat < MAX_REPEAT) {
+                /**
+                 * Express repeatDelay in units of a single iteration's duration
+                 * so it can be added to the per-iteration time offsets below
+                 * before they're normalized to 0-1.
+                 */
+                const repeatDelayUnits = duration > 0 ? repeatDelay / duration : 0;
+                duration = calculateRepeatDuration(duration, repeat, repeatDelay);
                 const originalKeyframes = [...valueKeyframesAsList];
                 const originalTimes = [...times];
                 ease = Array.isArray(ease) ? [...ease] : [ease];
                 const originalEase = [...ease];
+                /**
+                 * For reverse/mirror, alternate iterations play the segment
+                 * backwards. mirror matches JSAnimation's mirroredGenerator:
+                 * reversed keyframes, easings unchanged. reverse matches
+                 * JSAnimation's iterationProgress = 1 - p: reversed
+                 * keyframes, easing array reversed AND each function easing
+                 * mapped through reverseEasing (string easings unchanged —
+                 * they're resolved later by the keyframes engine).
+                 */
+                const isFlipping = repeatType === "reverse" || repeatType === "mirror";
+                let flippedKeyframes = originalKeyframes;
+                let flippedEases = originalEase;
+                if (isFlipping) {
+                    flippedKeyframes = [...originalKeyframes].reverse();
+                    if (repeatType === "reverse") {
+                        flippedEases = [...originalEase]
+                            .reverse()
+                            .map((e) => typeof e === "function"
+                            ? motionUtils.reverseEasing(e)
+                            : e);
+                    }
+                }
                 for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
-                    valueKeyframesAsList.push(...originalKeyframes);
-                    for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
-                        times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+                    const isFlipped = isFlipping && repeatIndex % 2 === 0;
+                    const iterKeyframes = isFlipped
+                        ? flippedKeyframes
+                        : originalKeyframes;
+                    const iterEase = isFlipped ? flippedEases : originalEase;
+                    const iterStartOffset = (repeatIndex + 1) * (1 + repeatDelayUnits);
+                    /**
+                     * If repeatDelay is set, hold the previous iteration's
+                     * final value through the delay by inserting a keyframe
+                     * at the moment the next iteration begins.
+                     */
+                    if (repeatDelayUnits > 0) {
+                        valueKeyframesAsList.push(valueKeyframesAsList[valueKeyframesAsList.length - 1]);
+                        times.push(iterStartOffset);
+                        ease.push("linear");
+                    }
+                    valueKeyframesAsList.push(...iterKeyframes);
+                    for (let keyframeIndex = 0; keyframeIndex < iterKeyframes.length; keyframeIndex++) {
+                        times.push(originalTimes[keyframeIndex] + iterStartOffset);
                         ease.push(keyframeIndex === 0
                             ? "linear"
-                            : motionUtils.getEasingForSegment(originalEase, keyframeIndex - 1));
+                            : motionUtils.getEasingForSegment(iterEase, keyframeIndex - 1));
                     }
                 }
-                normalizeTimes(times, repeat);
+                normalizeTimes(times, repeat, repeatDelayUnits);
             }
             const targetTime = startTime + duration;
             /**
@@ -474,21 +526,24 @@ function isSequence(value) {
  * to a specific element.
  */
 function createScopedAnimate(options = {}) {
-    const { scope, reduceMotion } = options;
+    const { scope, reduceMotion, skipAnimations } = options;
     /**
      * Implementation
      */
     function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
         let animations = [];
         let animationOnComplete;
+        const inherited = {};
+        if (reduceMotion !== undefined)
+            inherited.reduceMotion = reduceMotion;
+        if (skipAnimations !== undefined)
+            inherited.skipAnimations = skipAnimations;
         if (isSequence(subjectOrSequence)) {
             const { onComplete, ...sequenceOptions } = optionsOrKeyframes || {};
             if (typeof onComplete === "function") {
                 animationOnComplete = onComplete;
             }
-            animations = animateSequence(subjectOrSequence, reduceMotion !== undefined
-                ? { reduceMotion, ...sequenceOptions }
-                : sequenceOptions, scope);
+            animations = animateSequence(subjectOrSequence, { ...inherited, ...sequenceOptions }, scope);
         }
         else {
             // Extract top-level onComplete so it doesn't get applied per-value
@@ -496,9 +551,7 @@ function createScopedAnimate(options = {}) {
             if (typeof onComplete === "function") {
                 animationOnComplete = onComplete;
             }
-            animations = animateSubject(subjectOrSequence, optionsOrKeyframes, (reduceMotion !== undefined
-                ? { reduceMotion, ...rest }
-                : rest), scope);
+            animations = animateSubject(subjectOrSequence, optionsOrKeyframes, { ...inherited, ...rest }, scope);
         }
         const animation = new motionDom.GroupAnimationWithThen(animations);
         if (animationOnComplete) {
@@ -900,10 +953,16 @@ function measure(container, target = container, info) {
     info.y.containerLength = container.clientHeight;
     /**
      * In development mode ensure scroll containers aren't position: static as this makes
-     * it difficult to measure their relative positions.
+     * it difficult to measure their relative positions. The document scrolling element
+     * is exempt: offsetParent measurements naturally resolve relative to the document.
      */
     if (process.env.NODE_ENV !== "production") {
-        if (container && target && target !== container) {
+        if (container &&
+            target &&
+            target !== container &&
+            container !== document.documentElement &&
+            container !== document.scrollingElement &&
+            container !== document.body) {
             motionUtils.warnOnce(getComputedStyle(container).position !== "static", "Please ensure that the container has a non-static position, like 'relative', 'fixed', or 'absolute' to ensure scroll offset is calculated correctly.");
         }
     }
@@ -1185,6 +1244,14 @@ function attachToAnimation(animation, options) {
     });
 }
 
+/**
+ * Currently, we only support element tracking with `scrollInfo`, though in
+ * the future we can also offer ViewTimeline support.
+ */
+function isElementTracking(options) {
+    return options && (options.target || options.offset);
+}
+
 /**
  * If the onScroll function has two arguments, it's expecting
  * more specific information about the scroll from scrollInfo.
@@ -1193,7 +1260,7 @@ function isOnScrollWithInfo(onScroll) {
     return onScroll.length === 2;
 }
 function attachToFunction(onScroll, options) {
-    if (isOnScrollWithInfo(onScroll)) {
+    if (isOnScrollWithInfo(onScroll) || isElementTracking(options)) {
         return scrollInfo((info) => {
             onScroll(info[options.axis].progress, info);
         }, options);