motion 12.0.0-alpha.2 → 12.0.0

package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -1,17 +1,17 @@
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
+import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';
-import { spring } from '../generators/spring/index.mjs';
+import { clamp } from '../../utils/clamp.mjs';
+import { mix } from '../../utils/mix/index.mjs';
+import { pipe } from '../../utils/pipe.mjs';
 import { inertia } from '../generators/inertia.mjs';
 import { keyframes } from '../generators/keyframes.mjs';
+import { spring } from '../generators/spring/index.mjs';
 import { BaseAnimation } from './BaseAnimation.mjs';
-import { pipe } from '../../utils/pipe.mjs';
-import { mix } from '../../utils/mix/index.mjs';
-import { calcGeneratorDuration } from '../generators/utils/calc-duration.mjs';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';
-import { clamp } from '../../utils/clamp.mjs';
-import { invariant } from '../../utils/errors.mjs';
 import { frameloopDriver } from './drivers/driver-frameloop.mjs';
 import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
-import { isGenerator } from '../generators/utils/is-generator.mjs';
 
 const generators = {
     decay: inertia,
@@ -61,13 +61,13 @@ class MainThreadAnimation extends BaseAnimation {
          * animation.stop is returned as a reference from a useEffect.
          */
         this.stop = () => {
-            const { onStop } = this.options;
-            onStop && onStop();
             this.resolver.cancel();
             this.isStopped = true;
             if (this.state === "idle")
                 return;
             this.teardown();
+            const { onStop } = this.options;
+            onStop && onStop();
         };
         const { name, motionValue, element, keyframes } = this.options;
         const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;

package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs

@@ -1,5 +1,5 @@
-import { warning } from '../../../utils/errors.mjs';
-import { isGenerator } from '../../generators/utils/is-generator.mjs';
+import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
+import { isGenerator } from '../../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { isAnimatable } from '../../utils/is-animatable.mjs';
 
 function hasKeyframesChanged(keyframes) {

package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs

@@ -1,14 +1,13 @@
+import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
+import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { createGeneratorEasing } from '../../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
+import { isGenerator } from '../../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { NativeAnimationControls } from '../../../../../../motion-dom/dist/es/animation/waapi/NativeAnimationControls.mjs';
+import { supportsLinearEasing } from '../../../../../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 import { startWaapiAnimation } from './index.mjs';
-import { createGeneratorEasing } from '../../../easing/utils/create-generator-easing.mjs';
 import { browserNumberValueTypes } from '../../../render/dom/value-types/number-browser.mjs';
-import { invariant } from '../../../utils/errors.mjs';
-import { noop } from '../../../utils/noop.mjs';
-import { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
-import { isGenerator } from '../../generators/utils/is-generator.mjs';
-import { attachTimeline } from './utils/attach-timeline.mjs';
 import { getFinalKeyframe } from './utils/get-final-keyframe.mjs';
 import { setCSSVar, setStyle } from './utils/style.mjs';
-import { supportsLinearEasing } from './utils/supports-linear-easing.mjs';
 import { supportsPartialKeyframes } from './utils/supports-partial-keyframes.mjs';
 import { supportsWaapi } from './utils/supports-waapi.mjs';
 
@@ -33,12 +32,9 @@ function getElementAnimationState(element) {
     state.set(element, animationState);
     return state.get(element);
 }
-class NativeAnimation {
+class NativeAnimation extends NativeAnimationControls {
     constructor(element, valueName, valueKeyframes, options) {
         const isCSSVar = valueName.startsWith("--");
-        this.setValue = isCSSVar ? setCSSVar : setStyle;
-        this.options = options;
-        this.updateFinishedPromise();
         invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
         const existingAnimation = getElementAnimationState(element).get(valueName);
         existingAnimation && existingAnimation.stop();
@@ -51,6 +47,7 @@ class NativeAnimation {
             valueKeyframes = [valueKeyframes];
         }
         hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
+        // TODO: Replace this with toString()?
         if (isGenerator(options.type)) {
             const generatorOptions = createGeneratorEasing(options, 100, options.type);
             options.ease = supportsLinearEasing()
@@ -62,92 +59,35 @@ class NativeAnimation {
         else {
             options.ease = options.ease || defaultEasing;
         }
-        this.removeAnimation = () => { var _a; return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName); };
         const onFinish = () => {
-            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, this.options));
+            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
             this.cancel();
             this.resolveFinishedPromise();
         };
+        const init = () => {
+            this.setValue = isCSSVar ? setCSSVar : setStyle;
+            this.options = options;
+            this.updateFinishedPromise();
+            this.removeAnimation = () => {
+                const elementState = state.get(element);
+                elementState && elementState.delete(valueName);
+            };
+        };
         if (!supportsWaapi()) {
+            super();
+            init();
             onFinish();
         }
         else {
-            this.animation = startWaapiAnimation(element, valueName, valueKeyframes, options);
+            super(startWaapiAnimation(element, valueName, valueKeyframes, options));
+            init();
             if (options.autoplay === false) {
                 this.animation.pause();
             }
             this.animation.onfinish = onFinish;
-            if (this.pendingTimeline) {
-                attachTimeline(this.animation, this.pendingTimeline);
-            }
             getElementAnimationState(element).set(valueName, this);
         }
     }
-    get duration() {
-        return millisecondsToSeconds(this.options.duration || 300);
-    }
-    get time() {
-        var _a;
-        if (this.animation) {
-            return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-        }
-        return 0;
-    }
-    set time(newTime) {
-        if (this.animation) {
-            this.animation.currentTime = secondsToMilliseconds(newTime);
-        }
-    }
-    get speed() {
-        return this.animation ? this.animation.playbackRate : 1;
-    }
-    set speed(newSpeed) {
-        if (this.animation) {
-            this.animation.playbackRate = newSpeed;
-        }
-    }
-    get state() {
-        return this.animation ? this.animation.playState : "finished";
-    }
-    get startTime() {
-        return this.animation ? this.animation.startTime : null;
-    }
-    flatten() {
-        var _a;
-        if (!this.animation)
-            return;
-        (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
-    }
-    play() {
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
-        }
-        this.animation && this.animation.play();
-    }
-    pause() {
-        this.animation && this.animation.pause();
-    }
-    stop() {
-        if (!this.animation ||
-            this.state === "idle" ||
-            this.state === "finished") {
-            return;
-        }
-        if (this.animation.commitStyles) {
-            this.animation.commitStyles();
-        }
-        this.cancel();
-    }
-    complete() {
-        this.animation && this.animation.finish();
-    }
-    cancel() {
-        this.removeAnimation();
-        try {
-            this.animation && this.animation.cancel();
-        }
-        catch (e) { }
-    }
     /**
      * Allows the returned animation to be awaited or promise-chained. Currently
      * resolves when the animation finishes at all but in a future update could/should
@@ -161,14 +101,15 @@ class NativeAnimation {
             this.resolveFinishedPromise = resolve;
         });
     }
-    attachTimeline(timeline) {
-        if (!this.animation) {
-            this.pendingTimeline = timeline;
-        }
-        else {
-            attachTimeline(this.animation, timeline);
+    play() {
+        if (this.state === "finished") {
+            this.updateFinishedPromise();
         }
-        return noop;
+        super.play();
+    }
+    cancel() {
+        this.removeAnimation();
+        super.cancel();
     }
 }
 

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs

@@ -1,7 +1,7 @@
-import { resolveElements } from '../../../render/dom/utils/resolve-element.mjs';
-import { invariant } from '../../../utils/errors.mjs';
-import { secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
-import { getValueTransition } from '../../utils/get-value-transition.mjs';
+import { invariant } from '../../../../../../motion-utils/dist/es/errors.mjs';
+import { secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { getValueTransition } from '../../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
+import { resolveElements } from '../../../../../../motion-dom/dist/es/utils/resolve-elements.mjs';
 import { NativeAnimation } from './NativeAnimation.mjs';
 
 function animateElements(elementOrSelector, keyframes, options, scope) {

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-sequence.mjs

@@ -0,0 +1,14 @@
+import { GroupPlaybackControls } from '../../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { createAnimationsFromSequence } from '../../sequence/create.mjs';
+import { animateElements } from './animate-elements.mjs';
+
+function animateSequence(definition, options) {
+    const animations = [];
+    createAnimationsFromSequence(definition, options).forEach(({ keyframes, transition }, element) => {
+        animations.push(...animateElements(element, keyframes, transition));
+    });
+    return new GroupPlaybackControls(animations);
+}
+
+export { animateSequence };

package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs

@@ -1,4 +1,5 @@
-import { GroupPlaybackControls } from '../../GroupPlaybackControls.mjs';
+import { GroupPlaybackControls } from '../../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
 import { animateElements } from './animate-elements.mjs';
 
 const createScopedWaapiAnimate = (scope) => {

package/dist/es/framer-motion/dist/es/animation/animators/waapi/index.mjs

@@ -1,4 +1,5 @@
-import { mapEasingToNativeEasing } from './easing.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { mapEasingToNativeEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/easing.mjs';
 
 function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
     const keyframeOptions = { [valueName]: keyframes };

package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs

@@ -1,4 +1,5 @@
-import { memo } from '../../../../utils/memo.mjs';
+import '../../../../../../../motion-utils/dist/es/errors.mjs';
+import { memo } from '../../../../../../../motion-utils/dist/es/memo.mjs';
 
 const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
     try {

package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs

@@ -1,4 +1,5 @@
-import { memo } from '../../../../utils/memo.mjs';
+import '../../../../../../../motion-utils/dist/es/errors.mjs';
+import { memo } from '../../../../../../../motion-utils/dist/es/memo.mjs';
 
 const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 

package/dist/es/framer-motion/dist/es/animation/generators/spring/defaults.mjs

@@ -0,0 +1,27 @@
+const springDefaults = {
+    // Default spring physics
+    stiffness: 100,
+    damping: 10,
+    mass: 1.0,
+    velocity: 0.0,
+    // Default duration/bounce-based options
+    duration: 800, // in ms
+    bounce: 0.3,
+    visualDuration: 0.3, // in seconds
+    // Rest thresholds
+    restSpeed: {
+        granular: 0.01,
+        default: 2,
+    },
+    restDelta: {
+        granular: 0.005,
+        default: 0.5,
+    },
+    // Limits
+    minDuration: 0.01, // in seconds
+    maxDuration: 10.0, // in seconds
+    minDamping: 0.05,
+    maxDamping: 1,
+};
+
+export { springDefaults };

package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs

@@ -1,22 +1,19 @@
-import { warning } from '../../../utils/errors.mjs';
+import { warning } from '../../../../../../motion-utils/dist/es/errors.mjs';
+import { secondsToMilliseconds, millisecondsToSeconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
 import { clamp } from '../../../utils/clamp.mjs';
-import { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';
+import { springDefaults } from './defaults.mjs';
 
 const safeMin = 0.001;
-const minDuration = 0.01;
-const maxDuration = 10.0;
-const minDamping = 0.05;
-const maxDamping = 1;
-function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {
+function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
     let envelope;
     let derivative;
-    warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less");
+    warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
     let dampingRatio = 1 - bounce;
     /**
      * Restrict dampingRatio and duration to within acceptable ranges.
      */
-    dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-    duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));
+    dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
+    duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds(duration));
     if (dampingRatio < 1) {
         /**
          * Underdamped spring
@@ -60,8 +57,8 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, })
     duration = secondsToMilliseconds(duration);
     if (isNaN(undampedFreq)) {
         return {
-            stiffness: 100,
-            damping: 10,
+            stiffness: springDefaults.stiffness,
+            damping: springDefaults.damping,
             duration,
         };
     }
@@ -86,4 +83,4 @@ function calcAngularFreq(undampedFreq, dampingRatio) {
     return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
 
-export { calcAngularFreq, findSpring, maxDamping, maxDuration, minDamping, minDuration };
+export { calcAngularFreq, findSpring };

package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs

@@ -1,5 +1,10 @@
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';
+import '../../../../../../motion-utils/dist/es/errors.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { calcGeneratorDuration, maxGeneratorDuration } from '../../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
+import { generateLinearEasing } from '../../../../../../motion-dom/dist/es/animation/waapi/utils/linear.mjs';
+import { clamp } from '../../../utils/clamp.mjs';
 import { calcGeneratorVelocity } from '../utils/velocity.mjs';
+import { springDefaults } from './defaults.mjs';
 import { findSpring, calcAngularFreq } from './find.mjs';
 
 const durationKeys = ["duration", "bounce"];
@@ -9,29 +14,53 @@ function isSpringType(options, keys) {
 }
 function getSpringOptions(options) {
     let springOptions = {
-        velocity: 0.0,
-        stiffness: 100,
-        damping: 10,
-        mass: 1.0,
+        velocity: springDefaults.velocity,
+        stiffness: springDefaults.stiffness,
+        damping: springDefaults.damping,
+        mass: springDefaults.mass,
         isResolvedFromDuration: false,
         ...options,
     };
     // stiffness/damping/mass overrides duration/bounce
     if (!isSpringType(options, physicsKeys) &&
         isSpringType(options, durationKeys)) {
-        const derived = findSpring(options);
-        springOptions = {
-            ...springOptions,
-            ...derived,
-            mass: 1.0,
-        };
-        springOptions.isResolvedFromDuration = true;
+        if (options.visualDuration) {
+            const visualDuration = options.visualDuration;
+            const root = (2 * Math.PI) / (visualDuration * 1.2);
+            const stiffness = root * root;
+            const damping = 2 *
+                clamp(0.05, 1, 1 - (options.bounce || 0)) *
+                Math.sqrt(stiffness);
+            springOptions = {
+                ...springOptions,
+                mass: springDefaults.mass,
+                stiffness,
+                damping,
+            };
+        }
+        else {
+            const derived = findSpring(options);
+            springOptions = {
+                ...springOptions,
+                ...derived,
+                mass: springDefaults.mass,
+            };
+            springOptions.isResolvedFromDuration = true;
+        }
     }
     return springOptions;
 }
-function spring({ keyframes, restDelta, restSpeed, ...options }) {
-    const origin = keyframes[0];
-    const target = keyframes[keyframes.length - 1];
+function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+    const options = typeof optionsOrVisualDuration !== "object"
+        ? {
+            visualDuration: optionsOrVisualDuration,
+            keyframes: [0, 1],
+            bounce,
+        }
+        : optionsOrVisualDuration;
+    let { restSpeed, restDelta } = options;
+    const origin = options.keyframes[0];
+    const target = options.keyframes[options.keyframes.length - 1];
     /**
      * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
      * to reduce GC during animation.
@@ -53,8 +82,12 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
      * ratio between feeling good and finishing as soon as changes are imperceptible.
      */
     const isGranularScale = Math.abs(initialDelta) < 5;
-    restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
-    restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);
+    restSpeed || (restSpeed = isGranularScale
+        ? springDefaults.restSpeed.granular
+        : springDefaults.restSpeed.default);
+    restDelta || (restDelta = isGranularScale
+        ? springDefaults.restDelta.granular
+        : springDefaults.restDelta.default);
     let resolveSpring;
     if (dampingRatio < 1) {
         const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
@@ -95,7 +128,7 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
                     dampedAngularFreq);
         };
     }
-    return {
+    const generator = {
         calculatedDuration: isResolvedFromDuration ? duration || null : null,
         next: (t) => {
             const current = resolveSpring(t);
@@ -123,7 +156,13 @@ function spring({ keyframes, restDelta, restSpeed, ...options }) {
             state.value = state.done ? target : current;
             return state;
         },
+        toString: () => {
+            const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+            const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
+            return calculatedDuration + "ms " + easing;
+        },
     };
+    return generator;
 }
 
 export { spring };

package/dist/es/framer-motion/dist/es/animation/hooks/animation-controls.mjs

@@ -1,4 +1,4 @@
-import { invariant } from '../../utils/errors.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
 import { setTarget } from '../../render/utils/setters.mjs';
 import { animateVisualElement } from '../interfaces/visual-element.mjs';
 

package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs

@@ -1,13 +1,14 @@
-import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
-import { getDefaultTransition } from '../utils/default-transitions.mjs';
-import { getValueTransition } from '../utils/get-value-transition.mjs';
+import { GroupPlaybackControls } from '../../../../../motion-dom/dist/es/animation/controls/Group.mjs';
+import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { frame } from '../../frameloop/frame.mjs';
 import { MotionGlobalConfig } from '../../utils/GlobalConfig.mjs';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
-import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';
-import { frame } from '../../frameloop/frame.mjs';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
 import { MainThreadAnimation } from '../animators/MainThreadAnimation.mjs';
-import { GroupPlaybackControls } from '../GroupPlaybackControls.mjs';
+import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';
+import { getDefaultTransition } from '../utils/default-transitions.mjs';
 import { isTransitionDefined } from '../utils/is-transition-defined.mjs';
 
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {

package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs

@@ -1,9 +1,10 @@
-import { transformProps } from '../../render/html/utils/transform.mjs';
-import { animateMotionValue } from './motion-value.mjs';
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { getValueTransition } from '../../../../../motion-dom/dist/es/animation/utils/get-value-transition.mjs';
+import { positionalKeys } from '../../render/html/utils/keys-position.mjs';
 import { setTarget } from '../../render/utils/setters.mjs';
-import { getValueTransition } from '../utils/get-value-transition.mjs';
-import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
+import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
+import { animateMotionValue } from './motion-value.mjs';
 import { frame } from '../../frameloop/frame.mjs';
 
 /**
@@ -54,7 +55,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             }
         }
         addValueToWillChange(visualElement, key);
-        value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
+        value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && positionalKeys.has(key)
             ? { type: false }
             : valueTransition, visualElement, isHandoff));
         const animation = value.animation;

package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs

@@ -3,7 +3,8 @@ import { startWaapiAnimation } from '../animators/waapi/index.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
 import { handoffOptimizedAppearAnimation } from './handoff.mjs';
 import { appearAnimationStore, appearComplete } from './store.mjs';
-import { noop } from '../../utils/noop.mjs';
+import '../../../../../motion-utils/dist/es/errors.mjs';
+import { noop } from '../../../../../motion-utils/dist/es/noop.mjs';
 import { getOptimisedAppearId } from './get-appear-id.mjs';
 
 /**

package/dist/es/framer-motion/dist/es/animation/optimized-appear/store-id.mjs

@@ -1,4 +1,4 @@
-import { transformProps } from '../../render/html/utils/transform.mjs';
+import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 const appearStoreId = (elementId, valueName) => {
     const key = transformProps.has(valueName) ? "transform" : valueName;

package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs

@@ -1,16 +1,21 @@
-import { createGeneratorEasing } from '../../easing/utils/create-generator-easing.mjs';
+import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { progress } from '../../../../../motion-utils/dist/es/progress.mjs';
+import { secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
+import { createGeneratorEasing } from '../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';
+import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { getEasingForSegment } from '../../easing/utils/get-easing-for-segment.mjs';
 import { defaultOffset } from '../../utils/offsets/default.mjs';
 import { fillOffset } from '../../utils/offsets/fill.mjs';
-import { progress } from '../../utils/progress.mjs';
-import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { resolveSubjects } from '../animate/resolve-subjects.mjs';
-import { isGenerator } from '../generators/utils/is-generator.mjs';
+import { calculateRepeatDuration } from './utils/calc-repeat-duration.mjs';
 import { calcNextTime } from './utils/calc-time.mjs';
 import { addKeyframes } from './utils/edit.mjs';
+import { normalizeTimes } from './utils/normalize-times.mjs';
 import { compareByTime } from './utils/sort.mjs';
 
 const defaultSegmentEasing = "easeInOut";
+const MAX_REPEAT = 20;
 function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
     const defaultDuration = defaultTransition.duration || 0.3;
     const animationDefinitions = new Map();
@@ -53,7 +58,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", ...remainingTransition } = valueTransition;
+            const { delay = 0, times = defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
             let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
             /**
              * Resolve stagger() if defined.
@@ -91,7 +96,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
              */
@@ -110,6 +114,28 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
              */
             valueKeyframesAsList.length === 1 &&
                 valueKeyframesAsList.unshift(null);
+            /**
+             * Handle repeat options
+             */
+            if (repeat) {
+                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.
              */

package/dist/es/framer-motion/dist/es/animation/sequence/utils/calc-repeat-duration.mjs

@@ -0,0 +1,5 @@
+function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+    return duration * (repeat + 1);
+}
+
+export { calculateRepeatDuration };

package/dist/es/framer-motion/dist/es/animation/sequence/utils/normalize-times.mjs

@@ -0,0 +1,13 @@
+/**
+ * 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);
+    }
+}
+
+export { normalizeTimes };