framer-motion/dist/es/projection/styles/transform.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"transform.mjs","sources":["../../../../src/projection/styles/transform.ts"],"sourcesContent":["import type { Delta, Point } from \"motion-utils\"\nimport { ResolvedValues } from \"../../render/types\"\n\nexport function buildProjectionTransform(\n    delta: Delta,\n    treeScale: Point,\n    latestTransform?: ResolvedValues\n): string {\n    let transform = \"\"\n\n    /**\n     * The translations we use to calculate are always relative to the viewport coordinate space.\n     * But when we apply scales, we also scale the coordinate space of an element and its children.\n     * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need\n     * to move an element 100 pixels, we actually need to move it 200 in within that scaled space.\n     */\n    const xTranslate = delta.x.translate / treeScale.x\n    const yTranslate = delta.y.translate / treeScale.y\n    const zTranslate = latestTransform?.z || 0\n    if (xTranslate || yTranslate || zTranslate) {\n        transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `\n    }\n\n    /**\n     * Apply scale correction for the tree transform.\n     * This will apply scale to the screen-orientated axes.\n     */\n    if (treeScale.x !== 1 || treeScale.y !== 1) {\n        transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `\n    }\n\n    if (latestTransform) {\n        const { transformPerspective, rotate, rotateX, rotateY, skewX, skewY } =\n            latestTransform\n        if (transformPerspective)\n            transform = `perspective(${transformPerspective}px) ${transform}`\n        if (rotate) transform += `rotate(${rotate}deg) `\n        if (rotateX) transform += `rotateX(${rotateX}deg) `\n        if (rotateY) transform += `rotateY(${rotateY}deg) `\n        if (skewX) transform += `skewX(${skewX}deg) `\n        if (skewY) transform += `skewY(${skewY}deg) `\n    }\n\n    /**\n     * Apply scale to match the size of the element to the size we want it.\n     * This will apply scale to the element-orientated axes.\n     */\n    const elementScaleX = delta.x.scale * treeScale.x\n    const elementScaleY = delta.y.scale * treeScale.y\n    if (elementScaleX !== 1 || elementScaleY !== 1) {\n        transform += `scale(${elementScaleX}, ${elementScaleY})`\n    }\n\n    return transform || \"none\"\n}\n"],"names":[],"mappings":"SAGgB,wBAAwB,CACpC,KAAY,EACZ,SAAgB,EAChB,eAAgC,EAAA;IAEhC,IAAI,SAAS,GAAG,EAAE,CAAA;AAElB;;;;;AAKG;IACH,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAA;IAClD,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAA;AAClD,IAAA,MAAM,UAAU,GAAG,eAAe,EAAE,CAAC,IAAI,CAAC,CAAA;AAC1C,IAAA,IAAI,UAAU,IAAI,UAAU,IAAI,UAAU,EAAE;QACxC,SAAS,GAAG,eAAe,UAAU,CAAA,IAAA,EAAO,UAAU,CAAO,IAAA,EAAA,UAAU,MAAM,CAAA;KAChF;AAED;;;AAGG;AACH,IAAA,IAAI,SAAS,CAAC,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,KAAK,CAAC,EAAE;AACxC,QAAA,SAAS,IAAI,CAAA,MAAA,EAAS,CAAC,GAAG,SAAS,CAAC,CAAC,CAAK,EAAA,EAAA,CAAC,GAAG,SAAS,CAAC,CAAC,IAAI,CAAA;KAChE;IAED,IAAI,eAAe,EAAE;AACjB,QAAA,MAAM,EAAE,oBAAoB,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,GAClE,eAAe,CAAA;AACnB,QAAA,IAAI,oBAAoB;AACpB,YAAA,SAAS,GAAG,CAAe,YAAA,EAAA,oBAAoB,CAAO,IAAA,EAAA,SAAS,EAAE,CAAA;AACrE,QAAA,IAAI,MAAM;AAAE,YAAA,SAAS,IAAI,CAAA,OAAA,EAAU,MAAM,CAAA,KAAA,CAAO,CAAA;AAChD,QAAA,IAAI,OAAO;AAAE,YAAA,SAAS,IAAI,CAAA,QAAA,EAAW,OAAO,CAAA,KAAA,CAAO,CAAA;AACnD,QAAA,IAAI,OAAO;AAAE,YAAA,SAAS,IAAI,CAAA,QAAA,EAAW,OAAO,CAAA,KAAA,CAAO,CAAA;AACnD,QAAA,IAAI,KAAK;AAAE,YAAA,SAAS,IAAI,CAAA,MAAA,EAAS,KAAK,CAAA,KAAA,CAAO,CAAA;AAC7C,QAAA,IAAI,KAAK;AAAE,YAAA,SAAS,IAAI,CAAA,MAAA,EAAS,KAAK,CAAA,KAAA,CAAO,CAAA;KAChD;AAED;;;AAGG;IACH,MAAM,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAA;IACjD,MAAM,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAA;IACjD,IAAI,aAAa,KAAK,CAAC,IAAI,aAAa,KAAK,CAAC,EAAE;AAC5C,QAAA,SAAS,IAAI,CAAS,MAAA,EAAA,aAAa,CAAK,EAAA,EAAA,aAAa,GAAG,CAAA;KAC3D;IAED,OAAO,SAAS,IAAI,MAAM,CAAA;AAC9B;;;;"}