motion 12.7.4 → 12.7.5-alpha.1

package/dist/es/motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs

@@ -0,0 +1,179 @@
+import { time } from '../frameloop/sync-time.mjs';
+import { JSAnimation } from './JSAnimation.mjs';
+import { getFinalKeyframe } from './keyframes/get-final.mjs';
+import { KeyframeResolver, flushKeyframeResolvers } from './keyframes/KeyframesResolver.mjs';
+import { NativeAnimationExtended } from './NativeAnimationExtended.mjs';
+import { canAnimate } from './utils/can-animate.mjs';
+import { WithPromise } from './utils/WithPromise.mjs';
+import { supportsBrowserAnimation } from './waapi/supports/waapi.mjs';
+import { MotionGlobalConfig } from '../../../../motion-utils/dist/es/global-config.mjs';
+import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
+
+/**
+ * Maximum time allowed between an animation being created and it being
+ * resolved for us to use the latter as the start time.
+ *
+ * This is to ensure that while we prefer to "start" an animation as soon
+ * as it's triggered, we also want to avoid a visual jump if there's a big delay
+ * between these two moments.
+ */
+const MAX_RESOLVE_DELAY = 40;
+class AsyncMotionValueAnimation extends WithPromise {
+    constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", keyframes, name, motionValue, element, ...options }) {
+        super();
+        /**
+         * Bound to support return animation.stop pattern
+         */
+        this.stop = () => {
+            if (this._animation) {
+                this._animation.stop();
+                this.stopTimeline?.();
+            }
+            else {
+                this.keyframeResolver?.cancel();
+            }
+        };
+        this.createdAt = time.now();
+        const optionsWithDefaults = {
+            autoplay,
+            delay,
+            type,
+            repeat,
+            repeatDelay,
+            repeatType,
+            name,
+            motionValue,
+            element,
+            ...options,
+        };
+        const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
+        this.keyframeResolver = new KeyframeResolver$1(keyframes, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue, element);
+        this.keyframeResolver?.scheduleResolve();
+    }
+    onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
+        this.keyframeResolver = undefined;
+        const { name, type, velocity, delay, isHandoff, onUpdate, onComplete } = options;
+        this.resolvedAt = time.now();
+        /**
+         * If we can't animate this value with the resolved keyframes
+         * then we should complete it immediately.
+         */
+        if (!canAnimate(keyframes, name, type, velocity)) {
+            if (MotionGlobalConfig.instantAnimations || !delay) {
+                onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));
+            }
+            keyframes[0] = keyframes[keyframes.length - 1];
+            options.duration = 0;
+            options.repeat = 0;
+        }
+        /**
+         * Resolve startTime for the animation.
+         *
+         * This method uses the createdAt and resolvedAt to calculate the
+         * animation startTime. *Ideally*, we would use the createdAt time as t=0
+         * as the following frame would then be the first frame of the animation in
+         * progress, which would feel snappier.
+         *
+         * However, if there's a delay (main thread work) between the creation of
+         * the animation and the first commited frame, we prefer to use resolvedAt
+         * to avoid a sudden jump into the animation.
+         */
+        const startTime = sync
+            ? !this.resolvedAt
+                ? this.createdAt
+                : this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY
+                    ? this.resolvedAt
+                    : this.createdAt
+            : undefined;
+        const resolvedOptions = {
+            startTime,
+            finalKeyframe,
+            ...options,
+            keyframes,
+        };
+        /**
+         * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
+         * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
+         * optimised animation.
+         */
+        const animation = !isHandoff && supportsBrowserAnimation(resolvedOptions)
+            ? new NativeAnimationExtended({
+                ...resolvedOptions,
+                element: resolvedOptions.motionValue.owner.current,
+            })
+            : new JSAnimation(resolvedOptions);
+        animation.finished
+            .then(() => {
+            onComplete?.();
+            this.notifyFinished();
+        })
+            .catch(noop);
+        if (this.pendingTimeline) {
+            this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
+            this.pendingTimeline = undefined;
+        }
+        this._animation = animation;
+    }
+    get finished() {
+        if (!this._animation) {
+            return this._finished;
+        }
+        else {
+            return this.animation.finished;
+        }
+    }
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
+    }
+    get animation() {
+        if (!this._animation) {
+            flushKeyframeResolvers();
+        }
+        return this._animation;
+    }
+    get duration() {
+        return this.animation.duration;
+    }
+    get time() {
+        return this.animation.time;
+    }
+    set time(newTime) {
+        this.animation.time = newTime;
+    }
+    get speed() {
+        return this.animation.speed;
+    }
+    get state() {
+        return this.animation.state;
+    }
+    set speed(newSpeed) {
+        this.animation.speed = newSpeed;
+    }
+    get startTime() {
+        return this.animation.startTime;
+    }
+    attachTimeline(timeline) {
+        if (this._animation) {
+            this.stopTimeline = this.animation.attachTimeline(timeline);
+        }
+        else {
+            this.pendingTimeline = timeline;
+        }
+        return () => this.stop();
+    }
+    play() {
+        this.animation.play();
+    }
+    pause() {
+        this.animation.pause();
+    }
+    complete() {
+        console.log("async animation complete");
+        this.animation.complete();
+    }
+    cancel() {
+        this.animation.cancel();
+    }
+}
+
+export { AsyncMotionValueAnimation };

package/dist/es/motion-dom/dist/es/animation/GroupAnimation.mjs

@@ -1,8 +1,6 @@
-import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';
-
 class GroupAnimation {
     constructor(animations) {
-        // Bound to accomodate common `return animation.stop` pattern
+        // Bound to accomadate common `return animation.stop` pattern
         this.stop = () => this.runAll("stop");
         this.animations = animations.filter(Boolean);
     }
@@ -20,15 +18,8 @@ class GroupAnimation {
             this.animations[i][propName] = newValue;
         }
     }
-    attachTimeline(timeline, fallback) {
-        const subscriptions = this.animations.map((animation) => {
-            if (supportsScrollTimeline() && animation.attachTimeline) {
-                return animation.attachTimeline(timeline);
-            }
-            else if (typeof fallback === "function") {
-                return fallback(animation);
-            }
-        });
+    attachTimeline(timeline) {
+        const subscriptions = this.animations.map((animation) => animation.attachTimeline(timeline));
         return () => {
             subscriptions.forEach((cancel, i) => {
                 cancel && cancel();
@@ -48,6 +39,9 @@ class GroupAnimation {
     set speed(speed) {
         this.setAll("speed", speed);
     }
+    get state() {
+        return this.getAll("state");
+    }
     get startTime() {
         return this.getAll("startTime");
     }
@@ -61,9 +55,6 @@ class GroupAnimation {
     runAll(methodName) {
         this.animations.forEach((controls) => controls[methodName]());
     }
-    flatten() {
-        this.runAll("flatten");
-    }
     play() {
         this.runAll("play");
     }

package/dist/es/{framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs → motion-dom/dist/es/animation/JSAnimation.mjs}

@@ -1,68 +1,46 @@
-import { KeyframeResolver } from '../../render/utils/KeyframesResolver.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 { time } from '../frameloop/sync-time.mjs';
+import { activeAnimations } from '../stats/animation-count.mjs';
+import { mix } from '../utils/mix/index.mjs';
 import { frameloopDriver } from './drivers/driver-frameloop.mjs';
-import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
-import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
-import { calcGeneratorDuration } from '../../../../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs';
-import { activeAnimations } from '../../../../../motion-dom/dist/es/stats/animation-count.mjs';
-import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../../motion-utils/dist/es/time-conversion.mjs';
-import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
+import { inertia } from './generators/inertia.mjs';
+import { keyframes } from './generators/keyframes.mjs';
+import { calcGeneratorDuration } from './generators/utils/calc-duration.mjs';
+import { getFinalKeyframe } from './keyframes/get-final.mjs';
+import { replaceTransitionType } from './utils/replace-transition-type.mjs';
+import { WithPromise } from './utils/WithPromise.mjs';
+import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
+import { pipe } from '../../../../motion-utils/dist/es/pipe.mjs';
+import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
+import { clamp } from '../../../../motion-utils/dist/es/clamp.mjs';
 
-const generators = {
-    decay: inertia,
-    inertia,
-    tween: keyframes,
-    keyframes: keyframes,
-    spring,
-};
 const percentToProgress = (percent) => percent / 100;
-/**
- * Animation that runs on the main thread. Designed to be WAAPI-spec in the subset of
- * features we expose publically. Mostly the compatibility is to ensure visual identity
- * between both WAAPI and main thread animations.
- */
-class MainThreadAnimation extends BaseAnimation {
+class JSAnimation extends WithPromise {
     constructor(options) {
-        super(options);
-        /**
-         * The time at which the animation was paused.
-         */
-        this.holdTime = null;
-        /**
-         * The time at which the animation was cancelled.
-         */
-        this.cancelTime = null;
+        super();
+        this.state = "idle";
+        this.startTime = null;
+        this.isStopped = false;
         /**
          * The current time of the animation.
          */
         this.currentTime = 0;
         /**
-         * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
-         */
-        this.playbackSpeed = 1;
-        /**
-         * The state of the animation to apply when the animation is resolved. This
-         * allows calls to the public API to control the animation before it is resolved,
-         * without us having to resolve it first.
+         * The time at which the animation was paused.
          */
-        this.pendingPlayState = "running";
+        this.holdTime = null;
         /**
-         * The time at which the animation was started.
+         * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
          */
-        this.startTime = null;
-        this.state = "idle";
+        this.playbackSpeed = 1;
         /**
          * This method is bound to the instance to fix a pattern where
          * animation.stop is returned as a reference from a useEffect.
          */
         this.stop = () => {
-            this.resolver.cancel();
+            const { motionValue } = this.options;
+            if (motionValue && motionValue.updatedAt !== time.now()) {
+                this.tick(time.now());
+            }
             this.isStopped = true;
             if (this.state === "idle")
                 return;
@@ -70,49 +48,36 @@ class MainThreadAnimation extends BaseAnimation {
             const { onStop } = this.options;
             onStop && onStop();
         };
-        const { name, motionValue, element, keyframes } = this.options;
-        const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
-        const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
-        this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
-        this.resolver.scheduleResolve();
-    }
-    flatten() {
-        super.flatten();
-        // If we've already resolved the animation, re-initialise it
-        if (this._resolved) {
-            Object.assign(this._resolved, this.initPlayback(this._resolved.keyframes));
-        }
+        activeAnimations.mainThread++;
+        this.options = options;
+        this.initAnimation();
+        this.play();
+        if (options.autoplay === false)
+            this.pause();
     }
-    initPlayback(keyframes$1) {
-        const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;
-        const generatorFactory = isGenerator(type)
-            ? type
-            : generators[type] || keyframes;
-        /**
-         * If our generator doesn't support mixing numbers, we need to replace keyframes with
-         * [0, 100] and then make a function that maps that to the actual keyframes.
-         *
-         * 100 is chosen instead of 1 as it works nicer with spring animations.
-         */
-        let mapPercentToKeyframes;
-        let mirroredGenerator;
+    initAnimation() {
+        const { options } = this;
+        replaceTransitionType(options);
+        const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = options;
+        let { keyframes: keyframes$1 } = options;
+        const generatorFactory = type || keyframes;
         if (process.env.NODE_ENV !== "production" &&
             generatorFactory !== keyframes) {
             invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
         }
         if (generatorFactory !== keyframes &&
             typeof keyframes$1[0] !== "number") {
-            mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
+            this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
             keyframes$1 = [0, 100];
         }
-        const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 });
+        const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
         /**
          * If we have a mirror repeat type we need to create a second generator that outputs the
          * mirrored (not reversed) animation and later ping pong between the two generators.
          */
         if (repeatType === "mirror") {
-            mirroredGenerator = generatorFactory({
-                ...this.options,
+            this.mirroredGenerator = generatorFactory({
+                ...options,
                 keyframes: [...keyframes$1].reverse(),
                 velocity: -velocity,
             });
@@ -129,39 +94,29 @@ class MainThreadAnimation extends BaseAnimation {
             generator.calculatedDuration = calcGeneratorDuration(generator);
         }
         const { calculatedDuration } = generator;
-        const resolvedDuration = calculatedDuration + repeatDelay;
-        const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
-        return {
-            generator,
-            mirroredGenerator,
-            mapPercentToKeyframes,
-            calculatedDuration,
-            resolvedDuration,
-            totalDuration,
-        };
+        this.calculatedDuration = calculatedDuration;
+        this.resolvedDuration = calculatedDuration + repeatDelay;
+        this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;
+        this.generator = generator;
     }
-    onPostResolved() {
-        const { autoplay = true } = this.options;
-        activeAnimations.mainThread++;
-        this.play();
-        if (this.pendingPlayState === "paused" || !autoplay) {
-            this.pause();
+    updateTime(timestamp) {
+        const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
+        // Update currentTime
+        if (this.holdTime !== null) {
+            this.currentTime = this.holdTime;
         }
         else {
-            this.state = this.pendingPlayState;
+            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
+            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
+            // example.
+            this.currentTime = animationTime;
         }
     }
     tick(timestamp, sample = false) {
-        const { resolved } = this;
-        // If the animations has failed to resolve, return the final keyframe.
-        if (!resolved) {
-            const { keyframes } = this.options;
-            return { done: true, value: keyframes[keyframes.length - 1] };
-        }
-        const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = resolved;
+        const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration, } = this;
         if (this.startTime === null)
             return generator.next(0);
-        const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options;
+        const { delay = 0, keyframes, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe, } = this.options;
         /**
          * requestAnimationFrame timestamps can come through as lower than
          * the startTime as set by performance.now(). Here we prevent this,
@@ -174,23 +129,15 @@ class MainThreadAnimation extends BaseAnimation {
         else if (this.speed < 0) {
             this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
         }
-        // Update currentTime
         if (sample) {
             this.currentTime = timestamp;
         }
-        else if (this.holdTime !== null) {
-            this.currentTime = this.holdTime;
-        }
         else {
-            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
-            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
-            // example.
-            this.currentTime =
-                Math.round(timestamp - this.startTime) * this.speed;
+            this.updateTime(timestamp);
         }
         // Rebase on delay
-        const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1);
-        const isInDelayPhase = this.speed >= 0
+        const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1);
+        const isInDelayPhase = this.playbackSpeed >= 0
             ? timeWithoutDelay < 0
             : timeWithoutDelay > totalDuration;
         this.currentTime = Math.max(timeWithoutDelay, 0);
@@ -251,20 +198,21 @@ class MainThreadAnimation extends BaseAnimation {
         const state = isInDelayPhase
             ? { done: false, value: keyframes[0] }
             : frameGenerator.next(elapsed);
-        if (mapPercentToKeyframes) {
-            state.value = mapPercentToKeyframes(state.value);
+        if (mixKeyframes) {
+            state.value = mixKeyframes(state.value);
         }
         let { done } = state;
         if (!isInDelayPhase && calculatedDuration !== null) {
             done =
-                this.speed >= 0
+                this.playbackSpeed >= 0
                     ? this.currentTime >= totalDuration
                     : this.currentTime <= 0;
         }
         const isAnimationFinished = this.holdTime === null &&
             (this.state === "finished" || (this.state === "running" && done));
-        if (isAnimationFinished && finalKeyframe !== undefined) {
-            state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe);
+        // TODO: The exception for inertia could be cleaner here
+        if (isAnimationFinished && type !== inertia) {
+            state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
         }
         if (onUpdate) {
             onUpdate(state.value);
@@ -274,9 +222,16 @@ class MainThreadAnimation extends BaseAnimation {
         }
         return state;
     }
+    /**
+     * 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
+     * reject if its cancels.
+     */
+    then(resolve, reject) {
+        return this.finished.then(resolve, reject);
+    }
     get duration() {
-        const { resolved } = this;
-        return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;
+        return millisecondsToSeconds(this.calculatedDuration);
     }
     get time() {
         return millisecondsToSeconds(this.currentTime);
@@ -284,17 +239,20 @@ class MainThreadAnimation extends BaseAnimation {
     set time(newTime) {
         newTime = secondsToMilliseconds(newTime);
         this.currentTime = newTime;
-        if (this.holdTime !== null || this.speed === 0) {
+        if (this.startTime === null ||
+            this.holdTime !== null ||
+            this.playbackSpeed === 0) {
             this.holdTime = newTime;
         }
         else if (this.driver) {
-            this.startTime = this.driver.now() - newTime / this.speed;
+            this.startTime = this.driver.now() - newTime / this.playbackSpeed;
         }
     }
     get speed() {
         return this.playbackSpeed;
     }
     set speed(newSpeed) {
+        this.updateTime(time.now());
         const hasChanged = this.playbackSpeed !== newSpeed;
         this.playbackSpeed = newSpeed;
         if (hasChanged) {
@@ -302,13 +260,6 @@ class MainThreadAnimation extends BaseAnimation {
         }
     }
     play() {
-        if (!this.resolver.isScheduled) {
-            this.resolver.resume();
-        }
-        if (!this._resolved) {
-            this.pendingPlayState = "running";
-            return;
-        }
         if (this.isStopped)
             return;
         const { driver = frameloopDriver, onPlay, startTime } = this.options;
@@ -320,16 +271,17 @@ class MainThreadAnimation extends BaseAnimation {
         if (this.holdTime !== null) {
             this.startTime = now - this.holdTime;
         }
-        else if (!this.startTime) {
-            this.startTime = startTime ?? this.calcStartTime();
-        }
         else if (this.state === "finished") {
+            console.log("JSAnimation updateFinished");
+            this.updateFinished();
             this.startTime = now;
         }
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
+        else if (!this.startTime) {
+            this.startTime = startTime ?? now;
+        }
+        if (this.state === "finished" && this.speed < 0) {
+            this.startTime += this.calculatedDuration;
         }
-        this.cancelTime = this.startTime;
         this.holdTime = null;
         /**
          * Set playState to running only after we've used it in
@@ -339,40 +291,34 @@ class MainThreadAnimation extends BaseAnimation {
         this.driver.start();
     }
     pause() {
-        if (!this._resolved) {
-            this.pendingPlayState = "paused";
-            return;
-        }
         this.state = "paused";
-        this.holdTime = this.currentTime ?? 0;
+        this.updateTime(time.now());
+        this.holdTime = this.currentTime;
     }
     complete() {
         if (this.state !== "running") {
             this.play();
         }
-        this.pendingPlayState = this.state = "finished";
+        this.state = "finished";
         this.holdTime = null;
     }
     finish() {
+        this.notifyFinished();
         this.teardown();
         this.state = "finished";
         const { onComplete } = this.options;
         onComplete && onComplete();
     }
     cancel() {
-        if (this.cancelTime !== null) {
-            this.tick(this.cancelTime);
-        }
+        this.holdTime = null;
+        this.startTime = 0;
+        this.tick(0);
         this.teardown();
-        this.updateFinishedPromise();
     }
     teardown() {
         this.state = "idle";
         this.stopDriver();
-        this.resolveFinishedPromise();
-        this.updateFinishedPromise();
-        this.startTime = this.cancelTime = null;
-        this.resolver.cancel();
+        this.startTime = this.holdTime = null;
         activeAnimations.mainThread--;
     }
     stopDriver() {
@@ -381,17 +327,22 @@ class MainThreadAnimation extends BaseAnimation {
         this.driver.stop();
         this.driver = undefined;
     }
-    sample(time) {
+    sample(sampleTime) {
         this.startTime = 0;
-        return this.tick(time, true);
+        return this.tick(sampleTime, true);
     }
-    get finished() {
-        return this.currentFinishedPromise;
+    attachTimeline(timeline) {
+        if (this.options.allowFlatten) {
+            this.options.type = "keyframes";
+            this.options.ease = "linear";
+            this.initAnimation();
+        }
+        return timeline.observe(this);
     }
 }
-// Legacy interface
+// Legacy function support
 function animateValue(options) {
-    return new MainThreadAnimation(options);
+    return new JSAnimation(options);
 }
 
-export { MainThreadAnimation, animateValue };
+export { JSAnimation, animateValue };