framer-motion 12.7.3 → 12.7.5-alpha.0

package/dist/{types.d-B50aGbjN.d.ts → types.d-B1Voffvi.d.ts}

@@ -1,38 +1,9 @@
 /// <reference types="react" />
-import { Easing, TransformProperties, SVGPathProperties, VariableKeyframesDefinition, MotionValue, AnimationPlaybackControls, ValueAnimationOptions, Transition as Transition$1, EasingFunction, ProgressTimeline, Batcher } from 'motion-dom';
 import * as React$1 from 'react';
 import { SVGAttributes, CSSProperties, PropsWithoutRef, RefAttributes, JSX } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-
-interface Point {
-    x: number;
-    y: number;
-}
-interface Axis {
-    min: number;
-    max: number;
-}
-interface Box {
-    x: Axis;
-    y: Axis;
-}
-interface BoundingBox {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-}
-interface AxisDelta {
-    translate: number;
-    scale: number;
-    origin: number;
-    originPoint: number;
-}
-interface Delta {
-    x: AxisDelta;
-    y: AxisDelta;
-}
-type TransformPoint = (point: Point) => Point;
+import { TransformProperties, SVGPathProperties, VariableKeyframesDefinition, MotionValue, AnimationPlaybackControls, KeyframeResolver, OnKeyframesResolved, Transition as Transition$1, Batcher } from 'motion-dom';
+import { Easing, Point, TransformPoint, Box, Axis, Delta, BoundingBox } from 'motion-utils';
 
 type GenericKeyframesTarget<V> = V[] | Array<null | V>;
 /**
@@ -1368,50 +1339,6 @@ interface AnimationTypeState {
     prevProp?: VariantLabels | TargetAndTransition;
 }
 
-type UnresolvedKeyframes<T extends string | number> = Array<T | null>;
-type ResolvedKeyframes<T extends string | number> = Array<T>;
-type OnKeyframesResolved<T extends string | number> = (resolvedKeyframes: ResolvedKeyframes<T>, finalKeyframe: T) => void;
-declare class KeyframeResolver<T extends string | number = any> {
-    name?: string;
-    element?: VisualElement<any>;
-    finalKeyframe?: T;
-    suspendedScrollY?: number;
-    protected unresolvedKeyframes: UnresolvedKeyframes<string | number>;
-    private motionValue?;
-    private onComplete;
-    /**
-     * Track whether this resolver has completed. Once complete, it never
-     * needs to attempt keyframe resolution again.
-     */
-    private isComplete;
-    /**
-     * Track whether this resolver is async. If it is, it'll be added to the
-     * resolver queue and flushed in the next frame. Resolvers that aren't going
-     * to trigger read/write thrashing don't need to be async.
-     */
-    private isAsync;
-    /**
-     * Track whether this resolver needs to perform a measurement
-     * to resolve its keyframes.
-     */
-    needsMeasurement: boolean;
-    /**
-     * Track whether this resolver is currently scheduled to resolve
-     * to allow it to be cancelled and resumed externally.
-     */
-    isScheduled: boolean;
-    constructor(unresolvedKeyframes: UnresolvedKeyframes<string | number>, onComplete: OnKeyframesResolved<T>, name?: string, motionValue?: MotionValue<T>, element?: VisualElement<any>, isAsync?: boolean);
-    scheduleResolve(): void;
-    readKeyframes(): void;
-    setFinalKeyframe(): void;
-    measureInitialState(): void;
-    renderEndStyles(): void;
-    measureEndState(): void;
-    complete(): void;
-    cancel(): void;
-    resume(): void;
-}
-
 /**
  * A VisualElement is an imperative abstraction around UI elements such as
  * HTMLElement, SVGElement, Three.Object3D etc.
@@ -2586,11 +2513,6 @@ interface MotionProps extends AnimationProps, EventProps, PanHandlers, TapHandle
 }
 
 type ResolveKeyframes<V extends string | number> = (keyframes: V[], onComplete: OnKeyframesResolved<V>, name?: string, motionValue?: any) => KeyframeResolver<V>;
-interface ValueAnimationOptionsWithRenderContext<V extends string | number = number> extends ValueAnimationOptions<V> {
-    KeyframeResolver?: typeof KeyframeResolver;
-    motionValue?: MotionValue<V>;
-    element?: VisualElement;
-}
 type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
 /**
  * @public
@@ -2877,63 +2799,6 @@ type HTMLMotionComponents = {
     [K in keyof HTMLElements]: ForwardRefComponent<HTMLElements[K], HTMLMotionProps<K>>;
 };
 
-interface ScrollOptions {
-    source?: HTMLElement;
-    container?: HTMLElement;
-    target?: Element;
-    axis?: "x" | "y";
-    offset?: ScrollOffset;
-}
-type OnScrollProgress = (progress: number) => void;
-type OnScrollWithInfo = (progress: number, info: ScrollInfo) => void;
-type OnScroll = OnScrollProgress | OnScrollWithInfo;
-interface AxisScrollInfo {
-    current: number;
-    offset: number[];
-    progress: number;
-    scrollLength: number;
-    velocity: number;
-    targetOffset: number;
-    targetLength: number;
-    containerLength: number;
-    interpolatorOffsets?: number[];
-    interpolate?: EasingFunction;
-}
-interface ScrollInfo {
-    time: number;
-    x: AxisScrollInfo;
-    y: AxisScrollInfo;
-}
-type OnScrollInfo = (info: ScrollInfo) => void;
-type SupportedEdgeUnit = "px" | "vw" | "vh" | "%";
-type EdgeUnit = `${number}${SupportedEdgeUnit}`;
-type NamedEdges = "start" | "end" | "center";
-type EdgeString = NamedEdges | EdgeUnit | `${number}`;
-type Edge = EdgeString | number;
-type ProgressIntersection = [number, number];
-type Intersection = `${Edge} ${Edge}`;
-type ScrollOffset = Array<Edge | Intersection | ProgressIntersection>;
-interface ScrollInfoOptions {
-    container?: HTMLElement;
-    target?: Element;
-    axis?: "x" | "y";
-    offset?: ScrollOffset;
-}
-
-declare global {
-    interface Window {
-        ScrollTimeline: ScrollTimeline;
-    }
-}
-declare class ScrollTimeline implements ProgressTimeline {
-    constructor(options: ScrollOptions);
-    currentTime: null | {
-        value: number;
-    };
-    cancel?: VoidFunction;
-}
-declare function scroll(onScroll: OnScroll | AnimationPlaybackControls, { axis, ...options }?: ScrollOptions): VoidFunction;
-
 type UnionStringArray<T extends Readonly<string[]>> = T[number];
 declare const svgElements: readonly ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"];
 type SVGElements = UnionStringArray<typeof svgElements>;
@@ -3014,4 +2879,4 @@ declare global {
 
 type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents;
 
-export { type ForwardRefComponent as $, type Axis as A, type Box as B, type CustomValueType as C, type DOMMotionComponents as D, type EventInfo as E, type FeatureBundle as F, type GenericKeyframesTarget as G, type HTMLMotionProps as H, type IProjectionNode as I, SwitchLayoutGroupContext as J, KeyframeResolver as K, type DragElastic as L, type MotionProps as M, type DraggableProps as N, type OnScrollInfo as O, type Point as P, type DragHandlers as Q, type ResolvedKeyframes as R, type ScrollInfoOptions as S, type TapHandlers as T, type LayoutProps as U, type ValueAnimationOptionsWithRenderContext as V, type AnimationProps as W, type MotionAdvancedProps as X, type MotionStyle as Y, type MotionTransform as Z, type VariantLabels as _, MotionConfigContext as a, type SVGAttributesAsMotionValues as a0, type SVGMotionProps as a1, type AnimationLifecycles as a2, type CreateVisualElement as a3, FlatTree as a4, type Inertia as a5, type Keyframes as a6, type KeyframesTarget as a7, type None as a8, type Orchestration as a9, type Repeat as aa, type ResolvedKeyframesTarget as ab, type ResolvedSingleTarget as ac, type ResolvedValueTarget as ad, type SingleTarget as ae, type Spring as af, type Target as ag, type TargetAndTransition as ah, type Transition as ai, type Tween as aj, type ValueTarget as ak, type Variant as al, type Variants as am, type ResolveKeyframes as an, scroll as ao, type HydratedFeatureDefinition as ap, type HydratedFeatureDefinitions as aq, type FeatureDefinition as ar, type FeatureDefinitions as as, type FeaturePackage as at, type LazyFeatureBundle as au, type RenderComponent as av, type BoundingBox as aw, type AxisDelta as ax, type Delta as ay, type TransformPoint as az, type HTMLElements as b, type MotionComponentProps as c, type HTMLMotionComponents as d, type SVGMotionComponents as e, type FeaturePackages as f, type AnimationControls as g, VisualElement as h, type AnimationDefinition as i, type VisualElementAnimationOptions as j, type ResolvedValues as k, type HTMLRenderState as l, type ScrapeMotionValuesFromProps as m, makeUseVisualState as n, type VisualState as o, type AnimationType as p, DragControls as q, type PanInfo as r, type FocusHandlers as s, type HoverHandlers as t, useDragControls as u, type PanHandlers as v, type TapInfo as w, createRendererMotionComponent as x, optimizedAppearDataAttribute as y, PresenceContext as z };
+export { type KeyframesTarget as $, type AnimationControls as A, type MotionAdvancedProps as B, type CustomValueType as C, type DOMMotionComponents as D, type EventInfo as E, type FeatureBundle as F, type GenericKeyframesTarget as G, type HTMLMotionProps as H, type IProjectionNode as I, type MotionStyle as J, type MotionTransform as K, type LayoutProps as L, type MotionProps as M, type VariantLabels as N, type ForwardRefComponent as O, type PanInfo as P, type SVGAttributesAsMotionValues as Q, type ResolvedValues as R, type SVGMotionComponents as S, type TapHandlers as T, type SVGMotionProps as U, VisualElement as V, type AnimationLifecycles as W, type CreateVisualElement as X, FlatTree as Y, type Inertia as Z, type Keyframes as _, MotionConfigContext as a, type None as a0, type Orchestration as a1, type Repeat as a2, type ResolvedKeyframesTarget as a3, type ResolvedSingleTarget as a4, type ResolvedValueTarget as a5, type SingleTarget as a6, type Spring as a7, type Target as a8, type TargetAndTransition as a9, type Transition as aa, type Tween as ab, type ValueTarget as ac, type Variant as ad, type Variants as ae, type ResolveKeyframes as af, type HydratedFeatureDefinition as ag, type HydratedFeatureDefinitions as ah, type FeatureDefinition as ai, type FeatureDefinitions as aj, type FeaturePackage as ak, type LazyFeatureBundle as al, type RenderComponent as am, type HTMLElements as b, type MotionComponentProps as c, type HTMLMotionComponents as d, type FeaturePackages as e, type AnimationDefinition as f, type VisualElementAnimationOptions as g, type HTMLRenderState as h, type ScrapeMotionValuesFromProps as i, type VisualState as j, type AnimationType as k, DragControls as l, makeUseVisualState as m, type FocusHandlers as n, type HoverHandlers as o, type PanHandlers as p, type TapInfo as q, createRendererMotionComponent as r, optimizedAppearDataAttribute as s, PresenceContext as t, useDragControls as u, SwitchLayoutGroupContext as v, type DragElastic as w, type DraggableProps as x, type DragHandlers as y, type AnimationProps as z };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "12.7.3",
+    "version": "12.7.5-alpha.0",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -87,8 +87,8 @@
         "measure": "rollup -c ./rollup.size.config.mjs"
     },
     "dependencies": {
-        "motion-dom": "^12.7.3",
-        "motion-utils": "^12.7.2",
+        "motion-dom": "^12.7.5-alpha.0",
+        "motion-utils": "^12.7.5-alpha.0",
         "tslib": "^2.4.0"
     },
     "devDependencies": {
@@ -115,7 +115,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "35.1 kB"
+            "maxSize": "34.9 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -123,7 +123,7 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "17.9 kB"
+            "maxSize": "17.85 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
@@ -131,16 +131,16 @@
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "18.7 kB"
+            "maxSize": "19.1 kB"
         },
         {
             "path": "./dist/size-rollup-scroll.js",
-            "maxSize": "5.3 kB"
+            "maxSize": "5.15 kB"
         },
         {
             "path": "./dist/size-rollup-waapi-animate.js",
-            "maxSize": "2.7 kB"
+            "maxSize": "2.26 kB"
         }
     ],
-    "gitHead": "b9f31f14292536d6cedd465f38c4df7d71987eca"
+    "gitHead": "187bd70fe43313377c136d91b04f6aba6cfbd37a"
 }

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

@@ -1,319 +0,0 @@
-import { supportsLinearEasing, startWaapiAnimation, attachTimeline, isGenerator, isWaapiSupportedEasing } from 'motion-dom';
-import { millisecondsToSeconds, secondsToMilliseconds, noop } from 'motion-utils';
-import { anticipate } from '../../easing/anticipate.mjs';
-import { backInOut } from '../../easing/back.mjs';
-import { circInOut } from '../../easing/circ.mjs';
-import { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver.mjs';
-import { BaseAnimation } from './BaseAnimation.mjs';
-import { MainThreadAnimation } from './MainThreadAnimation.mjs';
-import { acceleratedValues } from './utils/accelerated-values.mjs';
-import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';
-import { supportsWaapi } from './waapi/utils/supports-waapi.mjs';
-
-/**
- * 10ms is chosen here as it strikes a balance between smooth
- * results (more than one keyframe per frame at 60fps) and
- * keyframe quantity.
- */
-const sampleDelta = 10; //ms
-/**
- * Implement a practical max duration for keyframe generation
- * to prevent infinite loops
- */
-const maxDuration = 20000;
-/**
- * Check if an animation can run natively via WAAPI or requires pregenerated keyframes.
- * WAAPI doesn't support spring or function easings so we run these as JS animation before
- * handing off.
- */
-function requiresPregeneratedKeyframes(options) {
-    return (isGenerator(options.type) ||
-        options.type === "spring" ||
-        !isWaapiSupportedEasing(options.ease));
-}
-function pregenerateKeyframes(keyframes, options) {
-    /**
-     * Create a main-thread animation to pregenerate keyframes.
-     * We sample this at regular intervals to generate keyframes that we then
-     * linearly interpolate between.
-     */
-    const sampleAnimation = new MainThreadAnimation({
-        ...options,
-        keyframes,
-        repeat: 0,
-        delay: 0,
-        isGenerator: true,
-    });
-    let state = { done: false, value: keyframes[0] };
-    const pregeneratedKeyframes = [];
-    /**
-     * Bail after 20 seconds of pre-generated keyframes as it's likely
-     * we're heading for an infinite loop.
-     */
-    let t = 0;
-    while (!state.done && t < maxDuration) {
-        state = sampleAnimation.sample(t);
-        pregeneratedKeyframes.push(state.value);
-        t += sampleDelta;
-    }
-    return {
-        times: undefined,
-        keyframes: pregeneratedKeyframes,
-        duration: t - sampleDelta,
-        ease: "linear",
-    };
-}
-const unsupportedEasingFunctions = {
-    anticipate,
-    backInOut,
-    circInOut,
-};
-function isUnsupportedEase(key) {
-    return key in unsupportedEasingFunctions;
-}
-class AcceleratedAnimation extends BaseAnimation {
-    constructor(options) {
-        super(options);
-        const { name, motionValue, element, keyframes } = this.options;
-        this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);
-        this.resolver.scheduleResolve();
-    }
-    initPlayback(keyframes, finalKeyframe) {
-        let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
-        /**
-         * If element has since been unmounted, return false to indicate
-         * the animation failed to initialised.
-         */
-        if (!motionValue.owner || !motionValue.owner.current) {
-            return false;
-        }
-        /**
-         * If the user has provided an easing function name that isn't supported
-         * by WAAPI (like "anticipate"), we need to provide the corressponding
-         * function. This will later get converted to a linear() easing function.
-         */
-        if (typeof ease === "string" &&
-            supportsLinearEasing() &&
-            isUnsupportedEase(ease)) {
-            ease = unsupportedEasingFunctions[ease];
-        }
-        /**
-         * If this animation needs pre-generated keyframes then generate.
-         */
-        if (requiresPregeneratedKeyframes(this.options)) {
-            const { onComplete, onUpdate, motionValue, element, ...options } = this.options;
-            const pregeneratedAnimation = pregenerateKeyframes(keyframes, options);
-            keyframes = pregeneratedAnimation.keyframes;
-            // If this is a very short animation, ensure we have
-            // at least two keyframes to animate between as older browsers
-            // can't animate between a single keyframe.
-            if (keyframes.length === 1) {
-                keyframes[1] = keyframes[0];
-            }
-            duration = pregeneratedAnimation.duration;
-            times = pregeneratedAnimation.times;
-            ease = pregeneratedAnimation.ease;
-            type = "keyframes";
-        }
-        const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
-        // Override the browser calculated startTime with one synchronised to other JS
-        // and WAAPI animations starting this event loop.
-        animation.startTime = startTime ?? this.calcStartTime();
-        if (this.pendingTimeline) {
-            attachTimeline(animation, this.pendingTimeline);
-            this.pendingTimeline = undefined;
-        }
-        else {
-            /**
-             * Prefer the `onfinish` prop as it's more widely supported than
-             * the `finished` promise.
-             *
-             * Here, we synchronously set the provided MotionValue to the end
-             * keyframe. If we didn't, when the WAAPI animation is finished it would
-             * be removed from the element which would then revert to its old styles.
-             */
-            animation.onfinish = () => {
-                const { onComplete } = this.options;
-                motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete && onComplete();
-                this.cancel();
-                this.resolveFinishedPromise();
-            };
-        }
-        return {
-            animation,
-            duration,
-            times,
-            type,
-            ease,
-            keyframes: keyframes,
-        };
-    }
-    get duration() {
-        const { resolved } = this;
-        if (!resolved)
-            return 0;
-        const { duration } = resolved;
-        return millisecondsToSeconds(duration);
-    }
-    get time() {
-        const { resolved } = this;
-        if (!resolved)
-            return 0;
-        const { animation } = resolved;
-        return millisecondsToSeconds(animation.currentTime || 0);
-    }
-    set time(newTime) {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        animation.currentTime = secondsToMilliseconds(newTime);
-    }
-    get speed() {
-        const { resolved } = this;
-        if (!resolved)
-            return 1;
-        const { animation } = resolved;
-        return animation.playbackRate;
-    }
-    get finished() {
-        return this.resolved.animation.finished;
-    }
-    set speed(newSpeed) {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        animation.playbackRate = newSpeed;
-    }
-    get state() {
-        const { resolved } = this;
-        if (!resolved)
-            return "idle";
-        const { animation } = resolved;
-        return animation.playState;
-    }
-    get startTime() {
-        const { resolved } = this;
-        if (!resolved)
-            return null;
-        const { animation } = resolved;
-        // Coerce to number as TypeScript incorrectly types this
-        // as CSSNumberish
-        return animation.startTime;
-    }
-    /**
-     * Replace the default DocumentTimeline with another AnimationTimeline.
-     * Currently used for scroll animations.
-     */
-    attachTimeline(timeline) {
-        if (!this._resolved) {
-            this.pendingTimeline = timeline;
-        }
-        else {
-            const { resolved } = this;
-            if (!resolved)
-                return noop;
-            const { animation } = resolved;
-            attachTimeline(animation, timeline);
-        }
-        return noop;
-    }
-    play() {
-        if (this.isStopped)
-            return;
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        if (animation.playState === "finished") {
-            this.updateFinishedPromise();
-        }
-        animation.play();
-    }
-    pause() {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        animation.pause();
-    }
-    stop() {
-        this.resolver.cancel();
-        this.isStopped = true;
-        if (this.state === "idle")
-            return;
-        this.resolveFinishedPromise();
-        this.updateFinishedPromise();
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation, keyframes, duration, type, ease, times } = resolved;
-        if (animation.playState === "idle" ||
-            animation.playState === "finished") {
-            return;
-        }
-        /**
-         * WAAPI doesn't natively have any interruption capabilities.
-         *
-         * Rather than read commited styles back out of the DOM, we can
-         * create a renderless JS animation and sample it twice to calculate
-         * its current value, "previous" value, and therefore allow
-         * Motion to calculate velocity for any subsequent animation.
-         */
-        if (this.time) {
-            const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
-            const sampleAnimation = new MainThreadAnimation({
-                ...options,
-                keyframes,
-                duration,
-                type,
-                ease,
-                times,
-                isGenerator: true,
-            });
-            const sampleTime = secondsToMilliseconds(this.time);
-            motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
-        }
-        const { onStop } = this.options;
-        onStop && onStop();
-        this.cancel();
-    }
-    complete() {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        resolved.animation.finish();
-    }
-    cancel() {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        resolved.animation.cancel();
-    }
-    static supports(options) {
-        const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
-        if (!motionValue ||
-            !motionValue.owner ||
-            !(motionValue.owner.current instanceof HTMLElement)) {
-            return false;
-        }
-        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
-        return (supportsWaapi() &&
-            name &&
-            acceleratedValues.has(name) &&
-            (name !== "transform" || !transformTemplate) &&
-            /**
-             * If we're outputting values to onUpdate then we can't use WAAPI as there's
-             * no way to read the value from WAAPI every frame.
-             */
-            !onUpdate &&
-            !repeatDelay &&
-            repeatType !== "mirror" &&
-            damping !== 0 &&
-            type !== "inertia");
-    }
-}
-
-export { AcceleratedAnimation };

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

@@ -1,120 +0,0 @@
-import { time } from 'motion-dom';
-import { flushKeyframeResolvers } from '../../render/utils/KeyframesResolver.mjs';
-import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
-import { canAnimate } from './utils/can-animate.mjs';
-import { getFinalKeyframe } from './waapi/utils/get-final-keyframe.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 BaseAnimation {
-    constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
-        // Track whether the animation has been stopped. Stopped animations won't restart.
-        this.isStopped = false;
-        this.hasAttemptedResolve = false;
-        this.createdAt = time.now();
-        this.options = {
-            autoplay,
-            delay,
-            type,
-            repeat,
-            repeatDelay,
-            repeatType,
-            ...options,
-        };
-        this.updateFinishedPromise();
-    }
-    /**
-     * 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.
-     */
-    calcStartTime() {
-        if (!this.resolvedAt)
-            return this.createdAt;
-        return this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY
-            ? this.resolvedAt
-            : this.createdAt;
-    }
-    /**
-     * A getter for resolved data. If keyframes are not yet resolved, accessing
-     * this.resolved will synchronously flush all pending keyframe resolvers.
-     * This is a deoptimisation, but at its worst still batches read/writes.
-     */
-    get resolved() {
-        if (!this._resolved && !this.hasAttemptedResolve) {
-            flushKeyframeResolvers();
-        }
-        return this._resolved;
-    }
-    /**
-     * A method to be called when the keyframes resolver completes. This method
-     * will check if its possible to run the animation and, if not, skip it.
-     * Otherwise, it will call initPlayback on the implementing class.
-     */
-    onKeyframesResolved(keyframes, finalKeyframe) {
-        this.resolvedAt = time.now();
-        this.hasAttemptedResolve = true;
-        const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options;
-        /**
-         * If we can't animate this value with the resolved keyframes
-         * then we should complete it immediately.
-         */
-        if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
-            // Finish immediately
-            if (instantAnimationState.current || !delay) {
-                onUpdate &&
-                    onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete && onComplete();
-                this.resolveFinishedPromise();
-                return;
-            }
-            // Finish after a delay
-            else {
-                this.options.duration = 0;
-            }
-        }
-        const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe);
-        if (resolvedAnimation === false)
-            return;
-        this._resolved = {
-            keyframes,
-            finalKeyframe,
-            ...resolvedAnimation,
-        };
-        this.onPostResolved();
-    }
-    onPostResolved() { }
-    /**
-     * 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.currentFinishedPromise.then(resolve, reject);
-    }
-    flatten() {
-        if (!this.options.allowFlatten)
-            return;
-        this.options.type = "keyframes";
-        this.options.ease = "linear";
-    }
-    updateFinishedPromise() {
-        this.currentFinishedPromise = new Promise((resolve) => {
-            this.resolveFinishedPromise = resolve;
-        });
-    }
-}
-
-export { BaseAnimation };