framer-motion/dist/es/components/AnimateView/animate-view-layers.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"animate-view-layers.mjs","sources":["../../../../src/components/AnimateView/animate-view-layers.ts"],"sourcesContent":["import {\n    AnimationPlaybackControls,\n    applyGeneratorOptions,\n    getValueTransition,\n    getViewAnimationLayerInfo,\n    getViewAnimations,\n    GroupAnimation,\n    mapEasingToNativeEasing,\n    NativeAnimation,\n    NativeAnimationWrapper,\n    Target,\n    Transition,\n} from \"motion-dom\"\nimport { secondsToMilliseconds } from \"motion-utils\"\nimport { ViewAnimationOptions, ViewAnimationType } from \"./types\"\n\n/**\n * Animate the pseudo-element layers React's ViewTransition has generated for\n * a named view boundary, either retiming the browser's animations or\n * replacing its crossfade with custom keyframes.\n */\nexport function animateViewLayers(\n    name: string,\n    animationType: ViewAnimationType,\n    {\n        transition,\n        onAnimationStart,\n        onAnimationComplete,\n        ...props\n    }: ViewAnimationOptions,\n    types: string[]\n): VoidFunction {\n    const layerAnimations: AnimationPlaybackControls[] = []\n    const definition = props[animationType]\n    const { transition: typeTransition, ...values } =\n        (typeof definition === \"function\" ? definition(types) : definition) ||\n        {}\n    const hasValues = Object.keys(values).length > 0\n    let hasMatchingAnimation = false\n\n    for (const viewAnimation of getViewAnimations()) {\n        if (viewAnimation.playState === \"finished\") continue\n\n        const { effect } = viewAnimation\n        if (!(effect instanceof KeyframeEffect) || !effect.pseudoElement)\n            continue\n\n        const info = getViewAnimationLayerInfo(effect.pseudoElement)\n        if (!info || info.layer !== name) continue\n        hasMatchingAnimation = true\n\n        /**\n         * Custom values replace the browser's crossfade (old/new layers).\n         * The group layer carries the position/size morph, so keep it running\n         * with Motion's timing.\n         */\n        if (hasValues && info.type !== \"group\") {\n            viewAnimation.cancel()\n        } else {\n            const transitionName = info.type === \"group\" ? \"layout\" : \"\"\n            let options = {\n                ...getValueTransition(transition, transitionName),\n                ...getValueTransition(typeTransition, transitionName),\n            }\n            options.duration = secondsToMilliseconds(options.duration ?? 0.3)\n            options = applyGeneratorOptions(options)\n\n            effect.updateTiming({\n                delay: secondsToMilliseconds(options.delay ?? 0),\n                duration: options.duration,\n                easing: mapEasingToNativeEasing(\n                    options.ease,\n                    options.duration!\n                ) as string,\n            })\n            layerAnimations.push(new NativeAnimationWrapper(viewAnimation))\n        }\n    }\n\n    if (hasValues && hasMatchingAnimation) {\n        layerAnimations.push(\n            ...createLayerAnimations(\n                name,\n                animationType,\n                values,\n                transition,\n                typeTransition\n            )\n        )\n    }\n\n    const animation = new GroupAnimation(layerAnimations)\n    let active = true\n    onAnimationStart?.(animation, animationType)\n    if (onAnimationComplete) {\n        animation.finished.then(() => {\n            if (active) onAnimationComplete(animationType)\n        })\n    }\n\n    return () => {\n        active = false\n        animation.cancel()\n    }\n}\n\nfunction createLayerAnimations(\n    layerName: string,\n    animationType: ViewAnimationType,\n    values: Target,\n    defaultTransition: Transition | undefined,\n    transition: Transition | undefined\n): AnimationPlaybackControls[] {\n    const animations: AnimationPlaybackControls[] = []\n\n    for (const [name, value] of Object.entries(values)) {\n        let keyframes = value\n        const options = {\n            ...getValueTransition(defaultTransition, name),\n            ...getValueTransition(transition, name),\n        }\n\n        options.duration &&= secondsToMilliseconds(options.duration)\n\n        options.delay &&= secondsToMilliseconds(options.delay)\n\n        if (name === \"opacity\" && !Array.isArray(keyframes)) {\n            const initialValue = animationType === \"enter\" ? 0 : 1\n            keyframes = [initialValue, keyframes]\n        }\n\n        const animation = new NativeAnimation({\n            ...options,\n            element: document.documentElement,\n            name,\n            pseudoElement: `::view-transition-${\n                animationType === \"enter\" ? \"new\" : \"old\"\n            }(${layerName})`,\n            keyframes,\n        })\n\n        animations.push(animation)\n    }\n\n    return animations\n}\n"],"names":[],"mappings":"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"}