framer-motion 12.7.3 → 12.7.5-alpha.0

package/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -1,394 +0,0 @@
-import { isGenerator, calcGeneratorDuration, activeAnimations } from 'motion-dom';
-import { invariant, millisecondsToSeconds, secondsToMilliseconds } from 'motion-utils';
-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 { frameloopDriver } from './drivers/driver-frameloop.mjs';
-import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.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 {
-    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;
-        /**
-         * 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.
-         */
-        this.pendingPlayState = "running";
-        /**
-         * The time at which the animation was started.
-         */
-        this.startTime = null;
-        this.state = "idle";
-        /**
-         * 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();
-            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?.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));
-        }
-    }
-    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;
-        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]));
-            keyframes$1 = [0, 100];
-        }
-        const generator = generatorFactory({ ...this.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,
-                keyframes: [...keyframes$1].reverse(),
-                velocity: -velocity,
-            });
-        }
-        /**
-         * If duration is undefined and we have repeat options,
-         * we need to calculate a duration from the generator.
-         *
-         * We set it to the generator itself to cache the duration.
-         * Any timeline resolver will need to have already precalculated
-         * the duration by this step.
-         */
-        if (generator.calculatedDuration === null) {
-            generator.calculatedDuration = calcGeneratorDuration(generator);
-        }
-        const { calculatedDuration } = generator;
-        const resolvedDuration = calculatedDuration + repeatDelay;
-        const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
-        return {
-            generator,
-            mirroredGenerator,
-            mapPercentToKeyframes,
-            calculatedDuration,
-            resolvedDuration,
-            totalDuration,
-        };
-    }
-    onPostResolved() {
-        const { autoplay = true } = this.options;
-        activeAnimations.mainThread++;
-        this.play();
-        if (this.pendingPlayState === "paused" || !autoplay) {
-            this.pause();
-        }
-        else {
-            this.state = this.pendingPlayState;
-        }
-    }
-    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;
-        if (this.startTime === null)
-            return generator.next(0);
-        const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options;
-        /**
-         * requestAnimationFrame timestamps can come through as lower than
-         * the startTime as set by performance.now(). Here we prevent this,
-         * though in the future it could be possible to make setting startTime
-         * a pending operation that gets resolved here.
-         */
-        if (this.speed > 0) {
-            this.startTime = Math.min(this.startTime, timestamp);
-        }
-        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;
-        }
-        // Rebase on delay
-        const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1);
-        const isInDelayPhase = this.speed >= 0
-            ? timeWithoutDelay < 0
-            : timeWithoutDelay > totalDuration;
-        this.currentTime = Math.max(timeWithoutDelay, 0);
-        // If this animation has finished, set the current time  to the total duration.
-        if (this.state === "finished" && this.holdTime === null) {
-            this.currentTime = totalDuration;
-        }
-        let elapsed = this.currentTime;
-        let frameGenerator = generator;
-        if (repeat) {
-            /**
-             * Get the current progress (0-1) of the animation. If t is >
-             * than duration we'll get values like 2.5 (midway through the
-             * third iteration)
-             */
-            const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration;
-            /**
-             * Get the current iteration (0 indexed). For instance the floor of
-             * 2.5 is 2.
-             */
-            let currentIteration = Math.floor(progress);
-            /**
-             * Get the current progress of the iteration by taking the remainder
-             * so 2.5 is 0.5 through iteration 2
-             */
-            let iterationProgress = progress % 1.0;
-            /**
-             * If iteration progress is 1 we count that as the end
-             * of the previous iteration.
-             */
-            if (!iterationProgress && progress >= 1) {
-                iterationProgress = 1;
-            }
-            iterationProgress === 1 && currentIteration--;
-            currentIteration = Math.min(currentIteration, repeat + 1);
-            /**
-             * Reverse progress if we're not running in "normal" direction
-             */
-            const isOddIteration = Boolean(currentIteration % 2);
-            if (isOddIteration) {
-                if (repeatType === "reverse") {
-                    iterationProgress = 1 - iterationProgress;
-                    if (repeatDelay) {
-                        iterationProgress -= repeatDelay / resolvedDuration;
-                    }
-                }
-                else if (repeatType === "mirror") {
-                    frameGenerator = mirroredGenerator;
-                }
-            }
-            elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
-        }
-        /**
-         * If we're in negative time, set state as the initial keyframe.
-         * This prevents delay: x, duration: 0 animations from finishing
-         * instantly.
-         */
-        const state = isInDelayPhase
-            ? { done: false, value: keyframes[0] }
-            : frameGenerator.next(elapsed);
-        if (mapPercentToKeyframes) {
-            state.value = mapPercentToKeyframes(state.value);
-        }
-        let { done } = state;
-        if (!isInDelayPhase && calculatedDuration !== null) {
-            done =
-                this.speed >= 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);
-        }
-        if (onUpdate) {
-            onUpdate(state.value);
-        }
-        if (isAnimationFinished) {
-            this.finish();
-        }
-        return state;
-    }
-    get duration() {
-        const { resolved } = this;
-        return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;
-    }
-    get time() {
-        return millisecondsToSeconds(this.currentTime);
-    }
-    set time(newTime) {
-        newTime = secondsToMilliseconds(newTime);
-        this.currentTime = newTime;
-        if (this.holdTime !== null || this.speed === 0) {
-            this.holdTime = newTime;
-        }
-        else if (this.driver) {
-            this.startTime = this.driver.now() - newTime / this.speed;
-        }
-    }
-    get speed() {
-        return this.playbackSpeed;
-    }
-    set speed(newSpeed) {
-        const hasChanged = this.playbackSpeed !== newSpeed;
-        this.playbackSpeed = newSpeed;
-        if (hasChanged) {
-            this.time = millisecondsToSeconds(this.currentTime);
-        }
-    }
-    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;
-        if (!this.driver) {
-            this.driver = driver((timestamp) => this.tick(timestamp));
-        }
-        onPlay && onPlay();
-        const now = this.driver.now();
-        if (this.holdTime !== null) {
-            this.startTime = now - this.holdTime;
-        }
-        else if (!this.startTime) {
-            this.startTime = startTime ?? this.calcStartTime();
-        }
-        else if (this.state === "finished") {
-            this.startTime = now;
-        }
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
-        }
-        this.cancelTime = this.startTime;
-        this.holdTime = null;
-        /**
-         * Set playState to running only after we've used it in
-         * the previous logic.
-         */
-        this.state = "running";
-        this.driver.start();
-    }
-    pause() {
-        if (!this._resolved) {
-            this.pendingPlayState = "paused";
-            return;
-        }
-        this.state = "paused";
-        this.holdTime = this.currentTime ?? 0;
-    }
-    complete() {
-        if (this.state !== "running") {
-            this.play();
-        }
-        this.pendingPlayState = this.state = "finished";
-        this.holdTime = null;
-    }
-    finish() {
-        this.teardown();
-        this.state = "finished";
-        const { onComplete } = this.options;
-        onComplete && onComplete();
-    }
-    cancel() {
-        if (this.cancelTime !== null) {
-            this.tick(this.cancelTime);
-        }
-        this.teardown();
-        this.updateFinishedPromise();
-    }
-    teardown() {
-        this.state = "idle";
-        this.stopDriver();
-        this.resolveFinishedPromise();
-        this.updateFinishedPromise();
-        this.startTime = this.cancelTime = null;
-        this.resolver.cancel();
-        activeAnimations.mainThread--;
-    }
-    stopDriver() {
-        if (!this.driver)
-            return;
-        this.driver.stop();
-        this.driver = undefined;
-    }
-    sample(time) {
-        this.startTime = 0;
-        return this.tick(time, true);
-    }
-    get finished() {
-        return this.currentFinishedPromise;
-    }
-}
-// Legacy interface
-function animateValue(options) {
-    return new MainThreadAnimation(options);
-}
-
-export { MainThreadAnimation, animateValue };

package/dist/es/animation/animators/drivers/driver-frameloop.mjs

@@ -1,16 +0,0 @@
-import { frame, cancelFrame, frameData, time } from 'motion-dom';
-
-const frameloopDriver = (update) => {
-    const passTimestamp = ({ timestamp }) => update(timestamp);
-    return {
-        start: () => frame.update(passTimestamp, true),
-        stop: () => cancelFrame(passTimestamp),
-        /**
-         * If we're processing this frame we can use the
-         * framelocked timestamp to keep things in sync.
-         */
-        now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),
-    };
-};
-
-export { frameloopDriver };

package/dist/es/animation/animators/utils/accelerated-values.mjs

@@ -1,14 +0,0 @@
-/**
- * A list of values that can be hardware-accelerated.
- */
-const acceleratedValues = new Set([
-    "opacity",
-    "clipPath",
-    "filter",
-    "transform",
-    // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
-    // or until we implement support for linear() easing.
-    // "background-color"
-]);
-
-export { acceleratedValues };

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

@@ -1,42 +0,0 @@
-import { isGenerator } from 'motion-dom';
-import { warning } from 'motion-utils';
-import { isAnimatable } from '../../utils/is-animatable.mjs';
-
-function hasKeyframesChanged(keyframes) {
-    const current = keyframes[0];
-    if (keyframes.length === 1)
-        return true;
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] !== current)
-            return true;
-    }
-}
-function canAnimate(keyframes, name, type, velocity) {
-    /**
-     * Check if we're able to animate between the start and end keyframes,
-     * and throw a warning if we're attempting to animate between one that's
-     * animatable and another that isn't.
-     */
-    const originKeyframe = keyframes[0];
-    if (originKeyframe === null)
-        return false;
-    /**
-     * These aren't traditionally animatable but we do support them.
-     * In future we could look into making this more generic or replacing
-     * this function with mix() === mixImmediate
-     */
-    if (name === "display" || name === "visibility")
-        return true;
-    const targetKeyframe = keyframes[keyframes.length - 1];
-    const isOriginAnimatable = isAnimatable(originKeyframe, name);
-    const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-    warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
-    // Always skip if any of these are true
-    if (!isOriginAnimatable || !isTargetAnimatable) {
-        return false;
-    }
-    return (hasKeyframesChanged(keyframes) ||
-        ((type === "spring" || isGenerator(type)) && velocity));
-}
-
-export { canAnimate };

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

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

package/dist/es/animation/generators/inertia.mjs

@@ -1,87 +0,0 @@
-import { spring } from './spring/index.mjs';
-import { calcGeneratorVelocity } from './utils/velocity.mjs';
-
-function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
-    const origin = keyframes[0];
-    const state = {
-        done: false,
-        value: origin,
-    };
-    const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);
-    const nearestBoundary = (v) => {
-        if (min === undefined)
-            return max;
-        if (max === undefined)
-            return min;
-        return Math.abs(min - v) < Math.abs(max - v) ? min : max;
-    };
-    let amplitude = power * velocity;
-    const ideal = origin + amplitude;
-    const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);
-    /**
-     * If the target has changed we need to re-calculate the amplitude, otherwise
-     * the animation will start from the wrong position.
-     */
-    if (target !== ideal)
-        amplitude = target - origin;
-    const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
-    const calcLatest = (t) => target + calcDelta(t);
-    const applyFriction = (t) => {
-        const delta = calcDelta(t);
-        const latest = calcLatest(t);
-        state.done = Math.abs(delta) <= restDelta;
-        state.value = state.done ? target : latest;
-    };
-    /**
-     * Ideally this would resolve for t in a stateless way, we could
-     * do that by always precalculating the animation but as we know
-     * this will be done anyway we can assume that spring will
-     * be discovered during that.
-     */
-    let timeReachedBoundary;
-    let spring$1;
-    const checkCatchBoundary = (t) => {
-        if (!isOutOfBounds(state.value))
-            return;
-        timeReachedBoundary = t;
-        spring$1 = spring({
-            keyframes: [state.value, nearestBoundary(state.value)],
-            velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000
-            damping: bounceDamping,
-            stiffness: bounceStiffness,
-            restDelta,
-            restSpeed,
-        });
-    };
-    checkCatchBoundary(0);
-    return {
-        calculatedDuration: null,
-        next: (t) => {
-            /**
-             * We need to resolve the friction to figure out if we need a
-             * spring but we don't want to do this twice per frame. So here
-             * we flag if we updated for this frame and later if we did
-             * we can skip doing it again.
-             */
-            let hasUpdatedFrame = false;
-            if (!spring$1 && timeReachedBoundary === undefined) {
-                hasUpdatedFrame = true;
-                applyFriction(t);
-                checkCatchBoundary(t);
-            }
-            /**
-             * If we have a spring and the provided t is beyond the moment the friction
-             * animation crossed the min/max boundary, use the spring.
-             */
-            if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) {
-                return spring$1.next(t - timeReachedBoundary);
-            }
-            else {
-                !hasUpdatedFrame && applyFriction(t);
-                return state;
-            }
-        },
-    };
-}
-
-export { inertia };

package/dist/es/animation/generators/keyframes.mjs

@@ -1,51 +0,0 @@
-import { easeInOut } from '../../easing/ease.mjs';
-import { isEasingArray } from '../../easing/utils/is-easing-array.mjs';
-import { easingDefinitionToFunction } from '../../easing/utils/map.mjs';
-import { interpolate } from '../../utils/interpolate.mjs';
-import { defaultOffset } from '../../utils/offsets/default.mjs';
-import { convertOffsetToTimes } from '../../utils/offsets/time.mjs';
-
-function defaultEasing(values, easing) {
-    return values.map(() => easing || easeInOut).splice(0, values.length - 1);
-}
-function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
-    /**
-     * Easing functions can be externally defined as strings. Here we convert them
-     * into actual functions.
-     */
-    const easingFunctions = isEasingArray(ease)
-        ? ease.map(easingDefinitionToFunction)
-        : easingDefinitionToFunction(ease);
-    /**
-     * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator
-     * to reduce GC during animation.
-     */
-    const state = {
-        done: false,
-        value: keyframeValues[0],
-    };
-    /**
-     * Create a times array based on the provided 0-1 offsets
-     */
-    const absoluteTimes = convertOffsetToTimes(
-    // Only use the provided offsets if they're the correct length
-    // TODO Maybe we should warn here if there's a length mismatch
-    times && times.length === keyframeValues.length
-        ? times
-        : defaultOffset(keyframeValues), duration);
-    const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
-        ease: Array.isArray(easingFunctions)
-            ? easingFunctions
-            : defaultEasing(keyframeValues, easingFunctions),
-    });
-    return {
-        calculatedDuration: duration,
-        next: (t) => {
-            state.value = mapTimeToKeyframe(t);
-            state.done = t >= duration;
-            return state;
-        },
-    };
-}
-
-export { defaultEasing, keyframes };

package/dist/es/animation/generators/spring/defaults.mjs

@@ -1,27 +0,0 @@
-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 };