motion 12.7.3 → 12.7.5-alpha.0

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,23 @@ 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) {
+        this.pause();
+        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 };

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

@@ -1,92 +1,88 @@
-import { style } from '../render/dom/style.mjs';
+import { setStyle } from '../render/dom/style-set.mjs';
+import { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';
 import { getFinalKeyframe } from './keyframes/get-final.mjs';
-import { hydrateKeyframes } from './keyframes/hydrate.mjs';
+import { WithPromise } from './utils/WithPromise.mjs';
 import { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';
 import { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';
 import { invariant } from '../../../../motion-utils/dist/es/errors.mjs';
 import { millisecondsToSeconds, secondsToMilliseconds } from '../../../../motion-utils/dist/es/time-conversion.mjs';
 import { noop } from '../../../../motion-utils/dist/es/noop.mjs';
 
-const animationMaps = new WeakMap();
-const animationMapKey = (name, pseudoElement) => `${name}:${pseudoElement}`;
-function getAnimationMap(element) {
-    const map = animationMaps.get(element) || new Map();
-    animationMaps.set(element, map);
-    return map;
-}
 /**
  * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
  */
-class NativeAnimation {
+class NativeAnimation extends WithPromise {
     constructor(options) {
-        /**
-         * If we already have an animation, we don't need to instantiate one
-         * and can just use this as a controls interface.
-         */
-        if ("animation" in options) {
-            this.animation = options.animation;
+        super();
+        this.finishedTime = null;
+        this.isStopped = false;
+        if (!options)
             return;
-        }
-        const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
-        let { transition } = options;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, } = options;
         this.isPseudoElement = Boolean(pseudoElement);
         this.allowFlatten = allowFlatten;
-        /**
-         * Stop any existing animations on the element before reading existing keyframes.
-         *
-         * TODO: Check for VisualElement before using animation state. This is a fallback
-         * for mini animate(). Do this when implementing NativeAnimationExtended.
-         */
-        const animationMap = getAnimationMap(element);
-        const key = animationMapKey(name, pseudoElement || "");
-        const currentAnimation = animationMap.get(key);
-        currentAnimation && currentAnimation.stop();
-        /**
-         * TODO: If these keyframes aren't correctly hydrated then we want to throw
-         * run an instant animation.
-         */
-        const keyframes = hydrateKeyframes(element, name, unresolvedKeyframes, pseudoElement);
-        invariant(typeof transition.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
-        transition = applyGeneratorOptions(transition);
+        this.options = options;
+        invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        const transition = applyGeneratorOptions(options);
         this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
         if (transition.autoplay === false) {
             this.animation.pause();
         }
-        this.removeAnimation = () => animationMap.delete(key);
         this.animation.onfinish = () => {
+            this.finishedTime = this.time;
             if (!pseudoElement) {
-                style.set(element, name, getFinalKeyframe(keyframes, transition));
-                this.cancel();
+                const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
+                if (this.updateMotionValue) {
+                    this.updateMotionValue(keyframe);
+                }
+                else {
+                    /**
+                     * If we can, we want to commit the final style as set by the user,
+                     * rather than the computed keyframe value supplied by the animation.
+                     */
+                    setStyle(element, name, keyframe);
+                }
+                this.animation.cancel();
             }
+            this.notifyFinished();
         };
-        /**
-         * TODO: Check for VisualElement before using animation state.
-         */
-        animationMap.set(key, this);
     }
     play() {
+        if (this.isStopped)
+            return;
         this.animation.play();
+        if (this.state === "finished") {
+            this.updateFinished();
+        }
     }
     pause() {
         this.animation.pause();
     }
     complete() {
-        this.animation.finish();
+        this.animation.finish?.();
     }
     cancel() {
         try {
             this.animation.cancel();
         }
         catch (e) { }
-        this.removeAnimation();
     }
     stop() {
+        if (this.isStopped)
+            return;
+        this.isStopped = true;
         const { state } = this;
         if (state === "idle" || state === "finished") {
             return;
         }
-        this.commitStyles();
-        this.cancel();
+        if (this.updateMotionValue) {
+            this.updateMotionValue();
+        }
+        else {
+            this.commitStyles();
+        }
+        if (!this.isPseudoElement)
+            this.cancel();
     }
     /**
      * WAAPI doesn't natively have any interruption capabilities.
@@ -106,13 +102,14 @@ class NativeAnimation {
         }
     }
     get duration() {
-        const duration = this.animation.effect?.getComputedTiming().duration || 0;
+        const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
         return millisecondsToSeconds(Number(duration));
     }
     get time() {
         return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
     }
     set time(newTime) {
+        this.finishedTime = null;
         this.animation.currentTime = secondsToMilliseconds(newTime);
     }
     /**
@@ -123,37 +120,37 @@ class NativeAnimation {
         return this.animation.playbackRate;
     }
     set speed(newSpeed) {
+        // Allow backwards playback after finishing
+        if (newSpeed < 0)
+            this.finishedTime = null;
         this.animation.playbackRate = newSpeed;
     }
     get state() {
-        return this.animation.playState;
+        return this.finishedTime !== null
+            ? "finished"
+            : this.animation.playState;
     }
     get startTime() {
         return Number(this.animation.startTime);
     }
-    get finished() {
-        return this.animation.finished;
-    }
-    flatten() {
-        if (this.allowFlatten) {
-            this.animation.effect?.updateTiming({ easing: "linear" });
-        }
+    set startTime(newStartTime) {
+        this.animation.startTime = newStartTime;
     }
     /**
      * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
      */
-    attachTimeline(timeline) {
-        this.animation.timeline = timeline;
+    attachTimeline({ timeline, observe }) {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
+        }
         this.animation.onfinish = null;
-        return noop;
-    }
-    /**
-     * Allows the animation to be awaited.
-     *
-     * @deprecated Use `finished` instead.
-     */
-    then(onResolve, onReject) {
-        return this.finished.then(onResolve).catch(onReject);
+        if (supportsScrollTimeline()) {
+            this.animation.timeline = timeline;
+            return noop;
+        }
+        else {
+            return observe(this);
+        }
     }
 }