framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"animate-elements.mjs","sources":["../../../../../src/animation/animators/waapi/animate-elements.ts"],"sourcesContent":["import {\n    animationMapKey,\n    AnimationPlaybackControls,\n    AnimationScope,\n    applyPxDefaults,\n    DOMKeyframesDefinition,\n    AnimationOptions as DynamicAnimationOptions,\n    ElementOrSelector,\n    fillWildcards,\n    getAnimationMap,\n    getComputedStyle,\n    getValueTransition,\n    NativeAnimation,\n    NativeAnimationOptions,\n    resolveElements,\n    UnresolvedValueKeyframe,\n    ValueKeyframe,\n} from \"motion-dom\"\nimport { invariant, secondsToMilliseconds } from \"motion-utils\"\n\ninterface AnimationDefinition {\n    map: Map<string, NativeAnimation<any>>\n    key: string\n    unresolvedKeyframes: UnresolvedValueKeyframe[]\n    options: Omit<NativeAnimationOptions, \"keyframes\"> & {\n        keyframes?: ValueKeyframe[]\n    }\n}\n\nexport function animateElements(\n    elementOrSelector: ElementOrSelector,\n    keyframes: DOMKeyframesDefinition,\n    options?: DynamicAnimationOptions,\n    scope?: AnimationScope\n) {\n    const elements = resolveElements(elementOrSelector, scope) as Array<\n        HTMLElement | SVGElement\n    >\n    const numElements = elements.length\n\n    invariant(\n        Boolean(numElements),\n        \"No valid elements provided.\",\n        \"no-valid-elements\"\n    )\n\n    /**\n     * WAAPI doesn't support interrupting animations.\n     *\n     * Therefore, starting animations requires a three-step process:\n     * 1. Stop existing animations (write styles to DOM)\n     * 2. Resolve keyframes (read styles from DOM)\n     * 3. Create new animations (write styles to DOM)\n     *\n     * The hybrid `animate()` function uses AsyncAnimation to resolve\n     * keyframes before creating new animations, which removes style\n     * thrashing. Here, we have much stricter filesize constraints.\n     * Therefore we do this in a synchronous way that ensures that\n     * at least within `animate()` calls there is no style thrashing.\n     *\n     * In the motion-native-animate-mini-interrupt benchmark this\n     * was 80% faster than a single loop.\n     */\n    const animationDefinitions: AnimationDefinition[] = []\n\n    /**\n     * Step 1: Build options and stop existing animations (write)\n     */\n    for (let i = 0; i < numElements; i++) {\n        const element = elements[i]\n        const elementTransition: DynamicAnimationOptions = { ...options }\n\n        /**\n         * Resolve stagger function if provided.\n         */\n        if (typeof elementTransition.delay === \"function\") {\n            elementTransition.delay = elementTransition.delay(i, numElements)\n        }\n\n        for (const valueName in keyframes) {\n            let valueKeyframes = keyframes[valueName as keyof typeof keyframes]!\n\n            if (!Array.isArray(valueKeyframes)) {\n                valueKeyframes = [valueKeyframes]\n            }\n\n            const valueOptions = {\n                ...getValueTransition(elementTransition as any, valueName),\n            }\n\n            valueOptions.duration &&= secondsToMilliseconds(\n                valueOptions.duration\n            )\n\n            valueOptions.delay &&= secondsToMilliseconds(valueOptions.delay)\n\n            /**\n             * If there's an existing animation playing on this element then stop it\n             * before creating a new one.\n             */\n            const map = getAnimationMap(element)\n            const key = animationMapKey(\n                valueName,\n                valueOptions.pseudoElement || \"\"\n            )\n            const currentAnimation = map.get(key)\n            currentAnimation && currentAnimation.stop()\n\n            animationDefinitions.push({\n                map,\n                key,\n                unresolvedKeyframes: valueKeyframes,\n                options: {\n                    ...valueOptions,\n                    element,\n                    name: valueName,\n                    allowFlatten:\n                        !elementTransition.type && !elementTransition.ease,\n                },\n            })\n        }\n    }\n\n    /**\n     * Step 2: Resolve keyframes (read)\n     */\n    for (let i = 0; i < animationDefinitions.length; i++) {\n        const { unresolvedKeyframes, options: animationOptions } =\n            animationDefinitions[i]\n\n        const { element, name, pseudoElement } = animationOptions\n        if (!pseudoElement && unresolvedKeyframes[0] === null) {\n            unresolvedKeyframes[0] = getComputedStyle(element, name)\n        }\n\n        fillWildcards(unresolvedKeyframes)\n        applyPxDefaults(unresolvedKeyframes, name)\n\n        /**\n         * If we only have one keyframe, explicitly read the initial keyframe\n         * from the computed style. This is to ensure consistency with WAAPI behaviour\n         * for restarting animations, for instance .play() after finish, when it\n         * has one vs two keyframes.\n         */\n        if (!pseudoElement && unresolvedKeyframes.length < 2) {\n            unresolvedKeyframes.unshift(getComputedStyle(element, name))\n        }\n\n        animationOptions.keyframes = unresolvedKeyframes as ValueKeyframe[]\n    }\n\n    /**\n     * Step 3: Create new animations (write)\n     */\n    const animations: AnimationPlaybackControls[] = []\n    for (let i = 0; i < animationDefinitions.length; i++) {\n        const { map, key, options: animationOptions } = animationDefinitions[i]\n        const animation = new NativeAnimation(\n            animationOptions as NativeAnimationOptions\n        )\n\n        map.set(key, animation)\n        animation.finished.finally(() => map.delete(key))\n\n        animations.push(animation)\n    }\n\n    return animations\n}\n"],"names":[],"mappings":"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"}