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

A simple and powerful JavaScript animation library

{"version":3,"file":"start.mjs","sources":["../../../../src/animation/optimized-appear/start.ts"],"sourcesContent":["import {\n    AnyResolvedKeyframe,\n    Batcher,\n    MotionValue,\n    startWaapiAnimation,\n    ValueAnimationTransition,\n} from \"motion-dom\"\nimport { noop } from \"motion-utils\"\nimport { optimizedAppearDataId } from \"./data-id\"\nimport { getOptimisedAppearId } from \"./get-appear-id\"\nimport { handoffOptimizedAppearAnimation } from \"./handoff\"\nimport { appearAnimationStore, appearComplete, AppearStoreEntry } from \"./store\"\nimport { appearStoreId } from \"./store-id\"\nimport \"./types\"\nimport type { WithAppearProps } from \"./types\"\n\n/**\n * A single time to use across all animations to manually set startTime\n * and ensure they're all in sync.\n */\nlet startFrameTime: number\n\n/**\n * A dummy animation to detect when Chrome is ready to start\n * painting the page and hold off from triggering the real animation\n * until then. We only need one animation to detect paint ready.\n *\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1406850\n */\nlet readyAnimation: Animation\n\n/**\n * Keep track of animations that were suspended vs cancelled so we\n * can easily resume them when we're done measuring layout.\n */\nconst suspendedAnimations = new Set<AppearStoreEntry>()\n\nfunction resumeSuspendedAnimations() {\n    suspendedAnimations.forEach((data) => {\n        data.animation.play()\n        data.animation.startTime = data.startTime\n    })\n    suspendedAnimations.clear()\n}\n\nexport function startOptimizedAppearAnimation(\n    element: HTMLElement,\n    name: string,\n    keyframes: string[] | number[],\n    options: ValueAnimationTransition<number | string>,\n    onReady?: (animation: Animation) => void\n): void {\n    // Prevent optimised appear animations if Motion has already started animating.\n    if (window.MotionIsMounted) {\n        return\n    }\n\n    const id = element.dataset[optimizedAppearDataId]\n    if (!id) return\n\n    window.MotionHandoffAnimation = handoffOptimizedAppearAnimation\n\n    const storeId = appearStoreId(id, name)\n    if (!readyAnimation) {\n        readyAnimation = startWaapiAnimation(\n            element,\n            name,\n            [keyframes[0] as number, keyframes[0] as number],\n            /**\n             * 10 secs is basically just a super-safe duration to give Chrome\n             * long enough to get the animation ready.\n             */\n            { duration: 10000, ease: \"linear\" }\n        )\n\n        appearAnimationStore.set(storeId, {\n            animation: readyAnimation,\n            startTime: null,\n        })\n\n        /**\n         * If there's no readyAnimation then there's been no instantiation\n         * of handoff animations.\n         */\n        window.MotionHandoffAnimation = handoffOptimizedAppearAnimation\n\n        window.MotionHasOptimisedAnimation = (\n            elementId?: string,\n            valueName?: string\n        ) => {\n            if (!elementId) return false\n\n            /**\n             * Keep a map of elementIds that have started animating. We check\n             * via ID instead of Element because of hydration errors and\n             * pre-hydration checks. We also actively record IDs as they start\n             * animating rather than simply checking for data-appear-id as\n             * this attrbute might be present but not lead to an animation, for\n             * instance if the element's appear animation is on a different\n             * breakpoint.\n             */\n            if (!valueName) {\n                return appearComplete.has(elementId)\n            }\n\n            const animationId = appearStoreId(elementId, valueName)\n            return Boolean(appearAnimationStore.get(animationId))\n        }\n\n        window.MotionHandoffMarkAsComplete = (elementId: string): void => {\n            if (appearComplete.has(elementId)) {\n                appearComplete.set(elementId, true)\n            }\n        }\n\n        window.MotionHandoffIsComplete = (elementId: string): boolean => {\n            return appearComplete.get(elementId) === true\n        }\n\n        /**\n         * We only need to cancel transform animations as\n         * they're the ones that will interfere with the\n         * layout animation measurements.\n         */\n        window.MotionCancelOptimisedAnimation = (\n            elementId: string,\n            valueName: string,\n            frame?: Batcher,\n            canResume?: boolean\n        ) => {\n            const animationId = appearStoreId(elementId, valueName)\n            const data = appearAnimationStore.get(animationId)\n\n            if (!data) return\n\n            if (frame && canResume === undefined) {\n                /**\n                 * Wait until the end of the subsequent frame to cancel the animation\n                 * to ensure we don't remove the animation before the main thread has\n                 * had a chance to resolve keyframes and render.\n                 */\n                frame.postRender(() => {\n                    frame.postRender(() => {\n                        data.animation.cancel()\n                    })\n                })\n            } else {\n                data.animation.cancel()\n            }\n\n            if (frame && canResume) {\n                suspendedAnimations.add(data)\n                frame.render(resumeSuspendedAnimations)\n            } else {\n                appearAnimationStore.delete(animationId)\n\n                /**\n                 * If there are no more animations left, we can remove the cancel function.\n                 * This will let us know when we can stop checking for conflicting layout animations.\n                 */\n                if (!appearAnimationStore.size) {\n                    window.MotionCancelOptimisedAnimation = undefined\n                }\n            }\n        }\n\n        window.MotionCheckAppearSync = (\n            visualElement: WithAppearProps,\n            valueName: string,\n            value: MotionValue\n        ) => {\n            const appearId = getOptimisedAppearId(visualElement)\n\n            if (!appearId) return\n\n            const valueIsOptimised = window.MotionHasOptimisedAnimation?.(\n                appearId,\n                valueName\n            )\n            const externalAnimationValue =\n                visualElement.props.values?.[valueName]\n\n            if (!valueIsOptimised || !externalAnimationValue) return\n\n            const removeSyncCheck = value.on(\n                \"change\",\n                (latestValue: AnyResolvedKeyframe) => {\n                    if (externalAnimationValue.get() !== latestValue) {\n                        window.MotionCancelOptimisedAnimation?.(\n                            appearId,\n                            valueName\n                        )\n                        removeSyncCheck()\n                    }\n                }\n            )\n\n            return removeSyncCheck\n        }\n    }\n\n    const startAnimation = () => {\n        readyAnimation.cancel()\n\n        const appearAnimation = startWaapiAnimation(\n            element,\n            name,\n            keyframes,\n            options\n        )\n\n        /**\n         * Record the time of the first started animation. We call performance.now() once\n         * here and once in handoff to ensure we're getting\n         * close to a frame-locked time. This keeps all animations in sync.\n         */\n        if (startFrameTime === undefined) {\n            startFrameTime = performance.now()\n        }\n\n        appearAnimation.startTime = startFrameTime\n\n        appearAnimationStore.set(storeId, {\n            animation: appearAnimation,\n            startTime: startFrameTime,\n        })\n\n        if (onReady) onReady(appearAnimation)\n    }\n\n    appearComplete.set(id, false)\n\n    if (readyAnimation.ready) {\n        readyAnimation.ready.then(startAnimation).catch(noop)\n    } else {\n        startAnimation()\n    }\n}\n"],"names":[],"mappings":"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"}