@wix/motion 1.665.0 → 2.0.0-rc.3

package/dist/cjs/library/entrance/FlipIn.js

@@ -1,107 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.prepare = prepare;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-fadeIn', 'motion-flipIn'];
-}
-const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
-const POWER_TO_ROTATE_MAP = {
-  soft: 45,
-  medium: 90,
-  hard: 270
-};
-function getRotateFrom(direction, rotate) {
-  return {
-    x: ROTATE_MAP[direction].x * rotate,
-    y: ROTATE_MAP[direction].y * rotate
-  };
-}
-const ROTATE_MAP = {
-  top: {
-    x: 1,
-    y: 0
-  },
-  right: {
-    x: 0,
-    y: 1
-  },
-  bottom: {
-    x: -1,
-    y: 0
-  },
-  left: {
-    x: 0,
-    y: -1
-  }
-};
-function web(options, dom) {
-  prepare(options, dom);
-  return style(options);
-}
-function style(options) {
-  const {
-    direction = 'top',
-    power,
-    initialRotate = 90
-  } = options.namedEffect;
-  const [fadeIn, flipIn] = getNames(options);
-  const rotate = power && POWER_TO_ROTATE_MAP[power] || initialRotate;
-  const easing = options.easing || 'backOut';
-  const from = getRotateFrom(direction, rotate);
-  const custom = {
-    '--motion-rotate-x': `${from.x}deg`,
-    '--motion-rotate-y': `${from.y}deg`
-  };
-  return [{
-    ...options,
-    easing: 'quadOut',
-    name: fadeIn,
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      opacity: 0
-    }, {
-      opacity: 'var(--comp-opacity, 1)'
-    }]
-  }, {
-    ...options,
-    easing,
-    name: flipIn,
-    custom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      transform: `perspective(800px) rotate(var(--comp-rotate-z, 0deg)) rotateX(var(--motion-rotate-x , ${custom['--motion-rotate-x']})) rotateY(var(--motion-rotate-y , ${custom['--motion-rotate-y']}))`
-    }, {
-      transform: `perspective(800px) rotate(var(--comp-rotate-z, 0deg)) rotateX(0deg) rotateY(0deg)`
-    }]
-  }];
-}
-function prepare(options, dom) {
-  const {
-    direction = 'top',
-    power,
-    initialRotate = 90
-  } = options.namedEffect;
-  const rotate = power && POWER_TO_ROTATE_MAP[power] || initialRotate;
-  if (dom) {
-    let adjustedDirection = direction;
-    dom.measure(target => {
-      if (!target) {
-        return;
-      }
-      const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
-      adjustedDirection = (0, _utils.getAdjustedDirection)(DIRECTIONS, direction, parseInt(rotation, 10));
-    });
-    dom.mutate(target => {
-      const from = getRotateFrom(adjustedDirection, rotate);
-      target == null || target.style.setProperty('--motion-rotate-x', `${from.x}deg`);
-      target == null || target.style.setProperty('--motion-rotate-y', `${from.y}deg`);
-    });
-  }
-}
-//# sourceMappingURL=FlipIn.js.map

package/dist/cjs/library/entrance/FlipIn.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","DIRECTIONS","POWER_TO_ROTATE_MAP","soft","medium","hard","getRotateFrom","direction","rotate","x","ROTATE_MAP","y","top","right","bottom","left","web","options","dom","prepare","style","power","initialRotate","namedEffect","fadeIn","flipIn","easing","from","custom","name","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","adjustedDirection","measure","target","rotation","getComputedStyle","getPropertyValue","getAdjustedDirection","parseInt","mutate","setProperty"],"sources":["../../../../src/library/entrance/FlipIn.ts"],"sourcesContent":["import { getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';\nimport type { FlipIn, TimeAnimationOptions, DomApi } from '../../types';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-flipIn'];\n}\n\nconst DIRECTIONS = ['top', 'right', 'bottom', 'left'];\n\ntype Direction = (typeof DIRECTIONS)[number];\n\nconst POWER_TO_ROTATE_MAP = {\n  soft: 45,\n  medium: 90,\n  hard: 270,\n};\n\nfunction getRotateFrom(direction: Direction, rotate: number) {\n  return {\n    x: ROTATE_MAP[direction].x * rotate,\n    y: ROTATE_MAP[direction].y * rotate,\n  };\n}\n\nconst ROTATE_MAP: Record<Direction, { x: number; y: number }> = {\n  top: { x: 1, y: 0 },\n  right: { x: 0, y: 1 },\n  bottom: { x: -1, y: 0 },\n  left: { x: 0, y: -1 },\n};\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options);\n}\n\nexport function style(options: TimeAnimationOptions) {\n  const {\n    direction = 'top',\n    power,\n    initialRotate = 90,\n  } = options.namedEffect as FlipIn;\n  const [fadeIn, flipIn] = getNames(options);\n  const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;\n  const easing = options.easing || 'backOut';\n\n  const from = getRotateFrom(direction, rotate);\n\n  const custom = {\n    '--motion-rotate-x': `${from.x}deg`,\n    '--motion-rotate-y': `${from.y}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      easing: 'quadOut',\n      name: fadeIn,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      easing,\n      name: flipIn,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `perspective(800px) rotate(var(--comp-rotate-z, 0deg)) rotateX(var(--motion-rotate-x , ${custom['--motion-rotate-x']})) rotateY(var(--motion-rotate-y , ${custom['--motion-rotate-y']}))`,\n        },\n        {\n          transform: `perspective(800px) rotate(var(--comp-rotate-z, 0deg)) rotateX(0deg) rotateY(0deg)`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(options: TimeAnimationOptions, dom?: DomApi) {\n  const {\n    direction = 'top',\n    power,\n    initialRotate = 90,\n  } = options.namedEffect as FlipIn;\n\n  const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;\n\n  if (dom) {\n    let adjustedDirection: string = direction;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rotation =\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';\n      adjustedDirection = getAdjustedDirection(\n        DIRECTIONS,\n        direction,\n        parseInt(rotation, 10),\n      ) as (typeof DIRECTIONS)[number];\n    });\n\n    dom.mutate((target) => {\n      const from = getRotateFrom(adjustedDirection, rotate);\n\n      target?.style.setProperty('--motion-rotate-x', `${from.x}deg`);\n      target?.style.setProperty('--motion-rotate-y', `${from.y}deg`);\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/entrance/FloatIn.js

@@ -1,67 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-floatIn'];
-}
-const PARAMS_MAP = {
-  top: {
-    dx: 0,
-    dy: -1,
-    distance: 120
-  },
-  right: {
-    dx: 1,
-    dy: 0,
-    distance: 120
-  },
-  bottom: {
-    dx: 0,
-    dy: 1,
-    distance: 120
-  },
-  left: {
-    dx: -1,
-    dy: 0,
-    distance: 120
-  }
-};
-function web(options) {
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    direction = 'left'
-  } = options.namedEffect;
-  const [floatIn] = getNames(options);
-  const fromParams = PARAMS_MAP[direction];
-  const translateX = fromParams.dx * fromParams.distance;
-  const translateY = fromParams.dy * fromParams.distance;
-  const custom = {
-    '--motion-translate-x': `${translateX}px`,
-    '--motion-translate-y': `${translateY}px`
-  };
-  return [{
-    ...options,
-    name: floatIn,
-    easing: 'sineInOut',
-    custom,
-    keyframes: [{
-      offset: 0,
-      opacity: 0,
-      easing: 'step-end'
-    }, {
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      opacity: 0,
-      transform: `translate(${(0, _utils.toKeyframeValue)(custom, '--motion-translate-x', asWeb)}, ${(0, _utils.toKeyframeValue)(custom, '--motion-translate-y', asWeb)}) rotate(var(--comp-rotate-z, 0deg))`
-    }, {
-      opacity: 'var(--comp-opacity, 1)',
-      transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))'
-    }]
-  }];
-}
-//# sourceMappingURL=FloatIn.js.map

package/dist/cjs/library/entrance/FloatIn.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","PARAMS_MAP","top","dx","dy","distance","right","bottom","left","web","options","style","asWeb","direction","namedEffect","floatIn","fromParams","translateX","translateY","custom","name","easing","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","toKeyframeValue"],"sources":["../../../../src/library/entrance/FloatIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, FloatIn } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-floatIn'];\n}\n\nconst PARAMS_MAP = {\n  top: { dx: 0, dy: -1, distance: 120 },\n  right: { dx: 1, dy: 0, distance: 120 },\n  bottom: { dx: 0, dy: 1, distance: 120 },\n  left: { dx: -1, dy: 0, distance: 120 },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { direction = 'left' } = options.namedEffect as FloatIn;\n  const [floatIn] = getNames(options);\n  const fromParams = PARAMS_MAP[direction];\n\n  const translateX = fromParams.dx * fromParams.distance;\n  const translateY = fromParams.dy * fromParams.distance;\n\n  const custom = {\n    '--motion-translate-x': `${translateX}px`,\n    '--motion-translate-y': `${translateY}px`,\n  };\n\n  return [\n    {\n      ...options,\n      name: floatIn,\n      easing: 'sineInOut',\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          opacity: 0,\n          easing: 'step-end',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 0,\n          transform: `translate(${toKeyframeValue(\n            custom,\n            '--motion-translate-x',\n            asWeb,\n          )}, ${toKeyframeValue(\n            custom,\n            '--motion-translate-y',\n            asWeb,\n          )}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          opacity: 'var(--comp-opacity, 1)',\n          transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,gBAAgB,CAAC;AAC3B;AAEA,MAAMC,UAAU,GAAG;EACjBC,GAAG,EAAE;IAAEC,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACrCC,KAAK,EAAE;IAAEH,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACtCE,MAAM,EAAE;IAAEJ,EAAE,EAAE,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI,CAAC;EACvCG,IAAI,EAAE;IAAEL,EAAE,EAAE,CAAC,CAAC;IAAEC,EAAE,EAAE,CAAC;IAAEC,QAAQ,EAAE;EAAI;AACvC,CAAC;AAEM,SAASI,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IAAEC,SAAS,GAAG;EAAO,CAAC,GAAGH,OAAO,CAACI,WAAsB;EAC7D,MAAM,CAACC,OAAO,CAAC,GAAGhB,QAAQ,CAACW,OAAO,CAAC;EACnC,MAAMM,UAAU,GAAGf,UAAU,CAACY,SAAS,CAAC;EAExC,MAAMI,UAAU,GAAGD,UAAU,CAACb,EAAE,GAAGa,UAAU,CAACX,QAAQ;EACtD,MAAMa,UAAU,GAAGF,UAAU,CAACZ,EAAE,GAAGY,UAAU,CAACX,QAAQ;EAEtD,MAAMc,MAAM,GAAG;IACb,sBAAsB,EAAE,GAAGF,UAAU,IAAI;IACzC,sBAAsB,EAAE,GAAGC,UAAU;EACvC,CAAC;EAED,OAAO,CACL;IACE,GAAGR,OAAO;IACVU,IAAI,EAAEL,OAAO;IACbM,MAAM,EAAE,WAAW;IACnBF,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVH,MAAM,EAAE;IACV,CAAC,EACD;MACEE,MAAM,EAAEE,2BAAoB;MAC5BD,OAAO,EAAE,CAAC;MACVE,SAAS,EAAE,aAAa,IAAAC,sBAAe,EACrCR,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC,KAAK,IAAAe,sBAAe,EACnBR,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC;IACH,CAAC,EACD;MACEY,OAAO,EAAE,wBAAwB;MACjCE,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/cjs/library/entrance/FoldIn.js

@@ -1,134 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.prepare = prepare;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-fadeIn', 'motion-foldIn'];
-}
-const POWER_TO_ROTATE_MAP = {
-  soft: 35,
-  medium: 60,
-  hard: 90
-};
-const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
-const PARAM_MAP = {
-  top: {
-    x: -1,
-    y: 0,
-    origin: {
-      x: 0,
-      y: -50
-    }
-  },
-  right: {
-    x: 0,
-    y: -1,
-    origin: {
-      x: 50,
-      y: 0
-    }
-  },
-  bottom: {
-    x: 1,
-    y: 0,
-    origin: {
-      x: 0,
-      y: 50
-    }
-  },
-  left: {
-    x: 0,
-    y: 1,
-    origin: {
-      x: -50,
-      y: 0
-    }
-  }
-};
-function getRotateFrom(direction, rotate) {
-  return {
-    x: PARAM_MAP[direction].x * rotate,
-    y: PARAM_MAP[direction].y * rotate
-  };
-}
-function web(options, dom) {
-  prepare(options, dom);
-  return style(options);
-}
-function style(options) {
-  const {
-    direction = 'top',
-    power,
-    initialRotate = 90
-  } = options.namedEffect;
-  const [fadeIn, foldIn] = getNames(options);
-  const easing = options.easing || 'backOut';
-  const rotate = power && POWER_TO_ROTATE_MAP[power] || initialRotate;
-  const {
-    x,
-    y
-  } = PARAM_MAP[direction].origin;
-  const from = getRotateFrom(direction, rotate);
-  const custom = {
-    '--motion-origin-x': `${x}%`,
-    '--motion-origin-y': `${y}%`,
-    '--motion-rotate-x': `${from.x}deg`,
-    '--motion-rotate-y': `${from.y}deg`
-  };
-  return [{
-    ...options,
-    easing: 'quadOut',
-    name: fadeIn,
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      opacity: 0
-    }, {
-      opacity: 'var(--comp-opacity, 1)'
-    }]
-  }, {
-    ...options,
-    easing,
-    name: foldIn,
-    custom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-origin-x ,${custom['--motion-origin-x']}), var(--motion-origin-y, ${custom['--motion-origin-y']})) perspective(800px) rotateX(var(--motion-rotate-x, ${custom['--motion-rotate-x']})) rotateY(var(--motion-rotate-y, ${custom['--motion-rotate-y']})) translate(calc(-1 * var(--motion-origin-x ,${custom['--motion-origin-x']})), calc(-1 * var(--motion-origin-y, ${custom['--motion-origin-y']})))`
-    }, {
-      transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-origin-x ,${custom['--motion-origin-x']}), var(--motion-origin-y, ${custom['--motion-origin-y']})) perspective(800px) rotateX(0deg) rotateY(0deg) translate(calc(-1 * var(--motion-origin-x ,${custom['--motion-origin-x']})), calc(-1 * var(--motion-origin-y, ${custom['--motion-origin-y']})))`
-    }]
-  }];
-}
-function prepare(options, dom) {
-  const {
-    direction = 'top',
-    power,
-    initialRotate = 90
-  } = options.namedEffect;
-  const rotate = power && POWER_TO_ROTATE_MAP[power] || initialRotate;
-  if (dom) {
-    let adjustedDirection = direction;
-    dom.measure(target => {
-      if (!target) {
-        return;
-      }
-      const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
-      adjustedDirection = (0, _utils.getAdjustedDirection)(DIRECTIONS, direction, parseInt(rotation, 10));
-    });
-    dom.mutate(target => {
-      const {
-        origin
-      } = PARAM_MAP[adjustedDirection];
-      const newRotate = getRotateFrom(adjustedDirection, rotate);
-      target == null || target.style.setProperty('--motion-origin-x', `${origin.x}%`);
-      target == null || target.style.setProperty('--motion-origin-y', `${origin.y}%`);
-      target == null || target.style.setProperty('--motion-rotate-x', `${newRotate.x}deg`);
-      target == null || target.style.setProperty('--motion-rotate-y', `${newRotate.y}deg`);
-    });
-  }
-}
-//# sourceMappingURL=FoldIn.js.map

package/dist/cjs/library/entrance/FoldIn.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","POWER_TO_ROTATE_MAP","soft","medium","hard","DIRECTIONS","PARAM_MAP","top","x","y","origin","right","bottom","left","getRotateFrom","direction","rotate","web","options","dom","prepare","style","power","initialRotate","namedEffect","fadeIn","foldIn","easing","from","custom","name","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","adjustedDirection","measure","target","rotation","getComputedStyle","getPropertyValue","getAdjustedDirection","parseInt","mutate","newRotate","setProperty"],"sources":["../../../../src/library/entrance/FoldIn.ts"],"sourcesContent":["import type { FoldIn, TimeAnimationOptions, DomApi } from '../../types';\nimport { getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-foldIn'];\n}\n\nconst POWER_TO_ROTATE_MAP = {\n  soft: 35,\n  medium: 60,\n  hard: 90,\n};\n\nconst DIRECTIONS = ['top', 'right', 'bottom', 'left'];\n\ntype Direction = (typeof DIRECTIONS)[number];\n\nconst PARAM_MAP: Record<\n  Direction,\n  { x: number; y: number; origin: { x: number; y: number } }\n> = {\n  top: { x: -1, y: 0, origin: { x: 0, y: -50 } },\n  right: { x: 0, y: -1, origin: { x: 50, y: 0 } },\n  bottom: { x: 1, y: 0, origin: { x: 0, y: 50 } },\n  left: { x: 0, y: 1, origin: { x: -50, y: 0 } },\n};\n\nfunction getRotateFrom(direction: Direction, rotate: number) {\n  return {\n    x: PARAM_MAP[direction].x * rotate,\n    y: PARAM_MAP[direction].y * rotate,\n  };\n}\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options);\n}\n\nexport function style(options: TimeAnimationOptions) {\n  const {\n    direction = 'top',\n    power,\n    initialRotate = 90,\n  } = options.namedEffect as FoldIn;\n  const [fadeIn, foldIn] = getNames(options);\n  const easing = options.easing || 'backOut';\n  const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;\n  const { x, y } = PARAM_MAP[direction].origin;\n\n  const from = getRotateFrom(direction, rotate);\n\n  const custom = {\n    '--motion-origin-x': `${x}%`,\n    '--motion-origin-y': `${y}%`,\n    '--motion-rotate-x': `${from.x}deg`,\n    '--motion-rotate-y': `${from.y}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      easing: 'quadOut',\n      name: fadeIn,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      easing,\n      name: foldIn,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-origin-x ,${custom['--motion-origin-x']}), var(--motion-origin-y, ${custom['--motion-origin-y']})) perspective(800px) rotateX(var(--motion-rotate-x, ${custom['--motion-rotate-x']})) rotateY(var(--motion-rotate-y, ${custom['--motion-rotate-y']})) translate(calc(-1 * var(--motion-origin-x ,${custom['--motion-origin-x']})), calc(-1 * var(--motion-origin-y, ${custom['--motion-origin-y']})))`,\n        },\n        {\n          transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-origin-x ,${custom['--motion-origin-x']}), var(--motion-origin-y, ${custom['--motion-origin-y']})) perspective(800px) rotateX(0deg) rotateY(0deg) translate(calc(-1 * var(--motion-origin-x ,${custom['--motion-origin-x']})), calc(-1 * var(--motion-origin-y, ${custom['--motion-origin-y']})))`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(options: TimeAnimationOptions, dom?: DomApi) {\n  const {\n    direction = 'top',\n    power,\n    initialRotate = 90,\n  } = options.namedEffect as FoldIn;\n  const rotate = (power && POWER_TO_ROTATE_MAP[power]) || initialRotate;\n\n  if (dom) {\n    let adjustedDirection: Direction = direction;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rotation =\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';\n\n      adjustedDirection = getAdjustedDirection(\n        DIRECTIONS,\n        direction,\n        parseInt(rotation, 10),\n      ) as Direction;\n    });\n\n    dom.mutate((target) => {\n      const { origin } = PARAM_MAP[adjustedDirection];\n      const newRotate = getRotateFrom(adjustedDirection, rotate);\n\n      target?.style.setProperty('--motion-origin-x', `${origin.x}%`);\n      target?.style.setProperty('--motion-origin-y', `${origin.y}%`);\n      target?.style.setProperty('--motion-rotate-x', `${newRotate.x}deg`);\n      target?.style.setProperty('--motion-rotate-y', `${newRotate.y}deg`);\n    });\n  }\n}\n"],"mappings":";;;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC;AAC3C;AAEA,MAAMC,mBAAmB,GAAG;EAC1BC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,UAAU,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;AAIrD,MAAMC,SAGL,GAAG;EACFC,GAAG,EAAE;IAAEC,CAAC,EAAE,CAAC,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEC,MAAM,EAAE;MAAEF,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE,CAAC;IAAG;EAAE,CAAC;EAC9CE,KAAK,EAAE;IAAEH,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE,CAAC,CAAC;IAAEC,MAAM,EAAE;MAAEF,CAAC,EAAE,EAAE;MAAEC,CAAC,EAAE;IAAE;EAAE,CAAC;EAC/CG,MAAM,EAAE;IAAEJ,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEC,MAAM,EAAE;MAAEF,CAAC,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAG;EAAE,CAAC;EAC/CI,IAAI,EAAE;IAAEL,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE,CAAC;IAAEC,MAAM,EAAE;MAAEF,CAAC,EAAE,CAAC,EAAE;MAAEC,CAAC,EAAE;IAAE;EAAE;AAC/C,CAAC;AAED,SAASK,aAAaA,CAACC,SAAoB,EAAEC,MAAc,EAAE;EAC3D,OAAO;IACLR,CAAC,EAAEF,SAAS,CAACS,SAAS,CAAC,CAACP,CAAC,GAAGQ,MAAM;IAClCP,CAAC,EAAEH,SAAS,CAACS,SAAS,CAAC,CAACN,CAAC,GAAGO;EAC9B,CAAC;AACH;AAEO,SAASC,GAAGA,CAACC,OAA6B,EAAEC,GAAY,EAAE;EAC/DC,OAAO,CAACF,OAAO,EAAEC,GAAG,CAAC;EAErB,OAAOE,KAAK,CAACH,OAAO,CAAC;AACvB;AAEO,SAASG,KAAKA,CAACH,OAA6B,EAAE;EACnD,MAAM;IACJH,SAAS,GAAG,KAAK;IACjBO,KAAK;IACLC,aAAa,GAAG;EAClB,CAAC,GAAGL,OAAO,CAACM,WAAqB;EACjC,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAG3B,QAAQ,CAACmB,OAAO,CAAC;EAC1C,MAAMS,MAAM,GAAGT,OAAO,CAACS,MAAM,IAAI,SAAS;EAC1C,MAAMX,MAAM,GAAIM,KAAK,IAAIrB,mBAAmB,CAACqB,KAAK,CAAC,IAAKC,aAAa;EACrE,MAAM;IAAEf,CAAC;IAAEC;EAAE,CAAC,GAAGH,SAAS,CAACS,SAAS,CAAC,CAACL,MAAM;EAE5C,MAAMkB,IAAI,GAAGd,aAAa,CAACC,SAAS,EAAEC,MAAM,CAAC;EAE7C,MAAMa,MAAM,GAAG;IACb,mBAAmB,EAAE,GAAGrB,CAAC,GAAG;IAC5B,mBAAmB,EAAE,GAAGC,CAAC,GAAG;IAC5B,mBAAmB,EAAE,GAAGmB,IAAI,CAACpB,CAAC,KAAK;IACnC,mBAAmB,EAAE,GAAGoB,IAAI,CAACnB,CAAC;EAChC,CAAC;EAED,OAAO,CACL;IACE,GAAGS,OAAO;IACVS,MAAM,EAAE,SAAS;IACjBG,IAAI,EAAEL,MAAM;IACZI,MAAM,EAAE,CAAC,CAAC;IACVE,SAAS,EAAE,CACT;MAAEC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,EACzB;MAAEA,OAAO,EAAE;IAAyB,CAAC;EAEzC,CAAC,EACD;IACE,GAAGf,OAAO;IACVS,MAAM;IACNG,IAAI,EAAEJ,MAAM;IACZG,MAAM;IACNE,SAAS,EAAE,CACT;MACEC,MAAM,EAAEE,2BAAoB;MAC5BC,SAAS,EAAE,uEAAuEN,MAAM,CAAC,mBAAmB,CAAC,6BAA6BA,MAAM,CAAC,mBAAmB,CAAC,wDAAwDA,MAAM,CAAC,mBAAmB,CAAC,qCAAqCA,MAAM,CAAC,mBAAmB,CAAC,iDAAiDA,MAAM,CAAC,mBAAmB,CAAC,wCAAwCA,MAAM,CAAC,mBAAmB,CAAC;IACzc,CAAC,EACD;MACEM,SAAS,EAAE,uEAAuEN,MAAM,CAAC,mBAAmB,CAAC,6BAA6BA,MAAM,CAAC,mBAAmB,CAAC,gGAAgGA,MAAM,CAAC,mBAAmB,CAAC,wCAAwCA,MAAM,CAAC,mBAAmB,CAAC;IACrW,CAAC;EAEL,CAAC,CACF;AACH;AAEO,SAAST,OAAOA,CAACF,OAA6B,EAAEC,GAAY,EAAE;EACnE,MAAM;IACJJ,SAAS,GAAG,KAAK;IACjBO,KAAK;IACLC,aAAa,GAAG;EAClB,CAAC,GAAGL,OAAO,CAACM,WAAqB;EACjC,MAAMR,MAAM,GAAIM,KAAK,IAAIrB,mBAAmB,CAACqB,KAAK,CAAC,IAAKC,aAAa;EAErE,IAAIJ,GAAG,EAAE;IACP,IAAIiB,iBAA4B,GAAGrB,SAAS;IAE5CI,GAAG,CAACkB,OAAO,CAAEC,MAAM,IAAK;MACtB,IAAI,CAACA,MAAM,EAAE;QACX;MACF;MAEA,MAAMC,QAAQ,GACZC,gBAAgB,CAACF,MAAM,CAAC,CAACG,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,MAAM;MAExEL,iBAAiB,GAAG,IAAAM,2BAAoB,EACtCrC,UAAU,EACVU,SAAS,EACT4B,QAAQ,CAACJ,QAAQ,EAAE,EAAE,CACvB,CAAc;IAChB,CAAC,CAAC;IAEFpB,GAAG,CAACyB,MAAM,CAAEN,MAAM,IAAK;MACrB,MAAM;QAAE5B;MAAO,CAAC,GAAGJ,SAAS,CAAC8B,iBAAiB,CAAC;MAC/C,MAAMS,SAAS,GAAG/B,aAAa,CAACsB,iBAAiB,EAAEpB,MAAM,CAAC;MAE1DsB,MAAM,YAANA,MAAM,CAAEjB,KAAK,CAACyB,WAAW,CAAC,mBAAmB,EAAE,GAAGpC,MAAM,CAACF,CAAC,GAAG,CAAC;MAC9D8B,MAAM,YAANA,MAAM,CAAEjB,KAAK,CAACyB,WAAW,CAAC,mBAAmB,EAAE,GAAGpC,MAAM,CAACD,CAAC,GAAG,CAAC;MAC9D6B,MAAM,YAANA,MAAM,CAAEjB,KAAK,CAACyB,WAAW,CAAC,mBAAmB,EAAE,GAAGD,SAAS,CAACrC,CAAC,KAAK,CAAC;MACnE8B,MAAM,YAANA,MAAM,CAAEjB,KAAK,CAACyB,WAAW,CAAC,mBAAmB,EAAE,GAAGD,SAAS,CAACpC,CAAC,KAAK,CAAC;IACrE,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

package/dist/cjs/library/entrance/GlideIn.js

@@ -1,89 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.prepare = prepare;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-glideIn'];
-}
-const EASING_MAP = {
-  soft: 'cubicInOut',
-  medium: 'quintInOut',
-  hard: 'backOut'
-};
-function web(options, dom) {
-  prepare(options, dom);
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    direction = 0,
-    distance = {
-      value: 100,
-      type: 'percentage'
-    },
-    power,
-    startFromOffScreen = false
-  } = options.namedEffect;
-  const [glideIn] = getNames(options);
-  const angleInRad = direction * Math.PI / 180;
-  const unit = (0, _utils.getCssUnits)(distance.type);
-  const easing = power && EASING_MAP[power] || options.easing || 'quintInOut';
-  const {
-    x,
-    y
-  } = (0, _utils.getOutOfScreenDistance)(direction);
-  const translateX = startFromOffScreen ? x : `${Math.sin(angleInRad) * distance.value | 0}${unit}`;
-  const translateY = startFromOffScreen ? y : `${Math.cos(angleInRad) * distance.value * -1 | 0}${unit}`;
-  const custom = {
-    '--motion-translate-x': `${translateX}`,
-    '--motion-translate-y': `${translateY}`
-  };
-  return [{
-    ...options,
-    name: glideIn,
-    easing,
-    custom,
-    keyframes: [{
-      offset: 0,
-      opacity: 0,
-      easing: 'step-end'
-    }, {
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      // TODO: remove opacity when not necessary to override hard-coded opacity:0 in style
-      opacity: 'var(--comp-opacity, 1)',
-      transform: `translate(${(0, _utils.toKeyframeValue)(custom, '--motion-translate-x', asWeb)}, ${(0, _utils.toKeyframeValue)(custom, '--motion-translate-y', asWeb)}) rotate(var(--comp-rotate-z, 0deg))`
-    }, {
-      opacity: 'var(--comp-opacity, 1)',
-      transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))'
-    }]
-  }];
-}
-function prepare(options, dom) {
-  const {
-    startFromOffScreen = false
-  } = options.namedEffect;
-  if (dom && startFromOffScreen) {
-    let left = 0;
-    let top = 0;
-    dom.measure(target => {
-      if (!target) {
-        return;
-      }
-      const {
-        left: targetLeft,
-        top: targetTop
-      } = target.getBoundingClientRect();
-      left = targetLeft;
-      top = targetTop;
-    });
-    dom.mutate(target => {
-      target == null || target.style.setProperty('--motion-left', `${left}px`);
-      target == null || target.style.setProperty('--motion-top', `${top}px`);
-    });
-  }
-}
-//# sourceMappingURL=GlideIn.js.map

package/dist/cjs/library/entrance/GlideIn.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","EASING_MAP","soft","medium","hard","web","options","dom","prepare","style","asWeb","direction","distance","value","type","power","startFromOffScreen","namedEffect","glideIn","angleInRad","Math","PI","unit","getCssUnits","easing","x","y","getOutOfScreenDistance","translateX","sin","translateY","cos","custom","name","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","toKeyframeValue","left","top","measure","target","targetLeft","targetTop","getBoundingClientRect","mutate","setProperty"],"sources":["../../../../src/library/entrance/GlideIn.ts"],"sourcesContent":["import type {\n  AnimationExtraOptions,\n  DomApi,\n  TimeAnimationOptions,\n  GlideIn,\n} from '../../types';\nimport {\n  getCssUnits,\n  getOutOfScreenDistance,\n  INITIAL_FRAME_OFFSET,\n  toKeyframeValue,\n} from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-glideIn'];\n}\n\nconst EASING_MAP = {\n  soft: 'cubicInOut',\n  medium: 'quintInOut',\n  hard: 'backOut',\n};\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    direction = 0,\n    distance = { value: 100, type: 'percentage' },\n    power,\n    startFromOffScreen = false,\n  } = options.namedEffect as GlideIn;\n  const [glideIn] = getNames(options);\n\n  const angleInRad = (direction * Math.PI) / 180;\n  const unit = getCssUnits(distance.type);\n\n  const easing = (power && EASING_MAP[power]) || options.easing || 'quintInOut';\n  const { x, y } = getOutOfScreenDistance(direction);\n\n  const translateX = startFromOffScreen\n    ? x\n    : `${(Math.sin(angleInRad) * distance.value) | 0}${unit}`;\n  const translateY = startFromOffScreen\n    ? y\n    : `${(Math.cos(angleInRad) * distance.value * -1) | 0}${unit}`;\n\n  const custom = {\n    '--motion-translate-x': `${translateX}`,\n    '--motion-translate-y': `${translateY}`,\n  };\n\n  return [\n    {\n      ...options,\n      name: glideIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          opacity: 0,\n          easing: 'step-end',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          // TODO: remove opacity when not necessary to override hard-coded opacity:0 in style\n          opacity: 'var(--comp-opacity, 1)',\n          transform: `translate(${toKeyframeValue(\n            custom,\n            '--motion-translate-x',\n            asWeb,\n          )}, ${toKeyframeValue(\n            custom,\n            '--motion-translate-y',\n            asWeb,\n          )}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          opacity: 'var(--comp-opacity, 1)',\n          transform: 'translate(0, 0) rotate(var(--comp-rotate-z, 0deg))',\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(options: TimeAnimationOptions, dom?: DomApi) {\n  const { startFromOffScreen = false } = options.namedEffect as GlideIn;\n\n  if (dom && startFromOffScreen) {\n    let left = 0;\n    let top = 0;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const { left: targetLeft, top: targetTop } =\n        target.getBoundingClientRect();\n      left = targetLeft;\n      top = targetTop;\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-left', `${left}px`);\n      target?.style.setProperty('--motion-top', `${top}px`);\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/entrance/GlitchIn.js

@@ -1,29 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.prepare = exports.getNames = void 0;
-exports.style = style;
-exports.web = web;
-var _GlideIn = require("./GlideIn");
-exports.prepare = _GlideIn.prepare;
-exports.getNames = _GlideIn.getNames;
-function getFixedDirection(options) {
-  // TODO replace with structuredClone() when possible
-  const duplicate = JSON.parse(JSON.stringify(options));
-  const {
-    direction
-  } = duplicate.namedEffect;
-  if (duplicate.namedEffect.startFromOffScreen) {
-    duplicate.namedEffect.direction = (direction ?? 270) - 90;
-  } else if (typeof direction === 'undefined') {
-    duplicate.namedEffect.direction = 270;
-  }
-  return duplicate;
-}
-function web(options, dom) {
-  return (0, _GlideIn.web)(getFixedDirection(options), dom);
-}
-function style(options) {
-  return (0, _GlideIn.style)(getFixedDirection(options));
-}
-//# sourceMappingURL=GlitchIn.js.map

package/dist/cjs/library/entrance/GlitchIn.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_GlideIn","require","exports","prepare","getNames","getFixedDirection","options","duplicate","JSON","parse","stringify","direction","namedEffect","startFromOffScreen","web","dom","glideInWeb","style","glideInStyle"],"sources":["../../../../src/library/entrance/GlitchIn.ts"],"sourcesContent":["import {\n  AnimationExtraOptions,\n  DomApi,\n  TimeAnimationOptions,\n} from '../../types';\nimport type { GlitchIn } from '../../types';\nimport { web as glideInWeb, style as glideInStyle } from './GlideIn';\n\nexport { prepare, getNames } from './GlideIn';\n\nfunction getFixedDirection(options: TimeAnimationOptions) {\n  // TODO replace with structuredClone() when possible\n  const duplicate = JSON.parse(JSON.stringify(options));\n  const { direction } = duplicate.namedEffect as GlitchIn;\n\n  if ((duplicate.namedEffect as GlitchIn).startFromOffScreen) {\n    (duplicate.namedEffect as GlitchIn).direction = (direction ?? 270) - 90;\n  } else if (typeof direction === 'undefined') {\n    (duplicate.namedEffect as GlitchIn).direction = 270;\n  }\n\n  return duplicate;\n}\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  return glideInWeb(getFixedDirection(options), dom);\n}\n\nexport function style(options: TimeAnimationOptions) {\n  return glideInStyle(getFixedDirection(options));\n}\n"],"mappings":";;;;;;AAMA,IAAAA,QAAA,GAAAC,OAAA;AAAqEC,OAAA,CAAAC,OAAA,GAAAH,QAAA,CAAAG,OAAA;AAAAD,OAAA,CAAAE,QAAA,GAAAJ,QAAA,CAAAI,QAAA;AAIrE,SAASC,iBAAiBA,CAACC,OAA6B,EAAE;EACxD;EACA,MAAMC,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,SAAS,CAACJ,OAAO,CAAC,CAAC;EACrD,MAAM;IAAEK;EAAU,CAAC,GAAGJ,SAAS,CAACK,WAAuB;EAEvD,IAAKL,SAAS,CAACK,WAAW,CAAcC,kBAAkB,EAAE;IACzDN,SAAS,CAACK,WAAW,CAAcD,SAAS,GAAG,CAACA,SAAS,IAAI,GAAG,IAAI,EAAE;EACzE,CAAC,MAAM,IAAI,OAAOA,SAAS,KAAK,WAAW,EAAE;IAC1CJ,SAAS,CAACK,WAAW,CAAcD,SAAS,GAAG,GAAG;EACrD;EAEA,OAAOJ,SAAS;AAClB;AAEO,SAASO,GAAGA,CACjBR,OAAqD,EACrDS,GAAY,EACZ;EACA,OAAO,IAAAC,YAAU,EAACX,iBAAiB,CAACC,OAAO,CAAC,EAAES,GAAG,CAAC;AACpD;AAEO,SAASE,KAAKA,CAACX,OAA6B,EAAE;EACnD,OAAO,IAAAY,cAAY,EAACb,iBAAiB,CAACC,OAAO,CAAC,CAAC;AACjD","ignoreList":[]}

package/dist/cjs/library/entrance/GrowIn.js

@@ -1,66 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-function getNames(_) {
-  return ['motion-fadeIn', 'motion-growIn'];
-}
-const SCALE_MAP = {
-  soft: 0.8,
-  medium: 0.6,
-  hard: 0
-};
-function web(options) {
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    power,
-    initialScale = 0,
-    distance = {
-      value: 120,
-      type: 'percentage'
-    },
-    direction = 0
-  } = options.namedEffect;
-  const [fadeIn, growIn] = getNames(options);
-  const easing = options.easing || 'cubicInOut';
-  const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;
-  const angleInRad = direction * Math.PI / 180;
-  const unit = (0, _utils.getCssUnits)(distance.type);
-  const x = `${Math.sin(angleInRad) * distance.value | 0}${unit}`;
-  const y = `${Math.cos(angleInRad) * distance.value * -1 | 0}${unit}`;
-  const custom = {
-    '--motion-translate-x': `${x}`,
-    '--motion-translate-y': `${y}`,
-    '--motion-scale': `${scale}`
-  };
-  return [{
-    ...options,
-    easing,
-    duration: options.duration * scale,
-    name: fadeIn,
-    custom: {},
-    keyframes: [{
-      offset: 0,
-      opacity: 0
-    }, {
-      opacity: 'var(--comp-opacity, 1)'
-    }]
-  }, {
-    ...options,
-    easing,
-    name: growIn,
-    custom,
-    keyframes: [{
-      offset: _utils.INITIAL_FRAME_OFFSET,
-      transform: `translate(${(0, _utils.toKeyframeValue)(custom, '--motion-translate-x', asWeb)}, ${(0, _utils.toKeyframeValue)(custom, '--motion-translate-y', asWeb)}) rotate(var(--comp-rotate-z, 0deg)) scale(${(0, _utils.toKeyframeValue)(custom, '--motion-scale', asWeb)})`
-    }, {
-      transform: 'translate(0px, 0px) rotate(var(--comp-rotate-z, 0deg)) scale(1)'
-    }]
-  }];
-}
-//# sourceMappingURL=GrowIn.js.map

package/dist/cjs/library/entrance/GrowIn.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","getNames","_","SCALE_MAP","soft","medium","hard","web","options","style","asWeb","power","initialScale","distance","value","type","direction","namedEffect","fadeIn","growIn","easing","scale","angleInRad","Math","PI","unit","getCssUnits","x","sin","y","cos","custom","duration","name","keyframes","offset","opacity","INITIAL_FRAME_OFFSET","transform","toKeyframeValue"],"sources":["../../../../src/library/entrance/GrowIn.ts"],"sourcesContent":["import type { GrowIn, TimeAnimationOptions } from '../../types';\nimport {\n  getCssUnits,\n  INITIAL_FRAME_OFFSET,\n  toKeyframeValue,\n} from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-growIn'];\n}\n\nconst SCALE_MAP = {\n  soft: 0.8,\n  medium: 0.6,\n  hard: 0,\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    power,\n    initialScale = 0,\n    distance = { value: 120, type: 'percentage' },\n    direction = 0,\n  } = options.namedEffect as GrowIn;\n  const [fadeIn, growIn] = getNames(options);\n\n  const easing = options.easing || 'cubicInOut';\n  const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;\n  const angleInRad = (direction * Math.PI) / 180;\n  const unit = getCssUnits(distance.type);\n\n  const x = `${(Math.sin(angleInRad) * distance.value) | 0}${unit}`;\n  const y = `${(Math.cos(angleInRad) * distance.value * -1) | 0}${unit}`;\n\n  const custom = {\n    '--motion-translate-x': `${x}`,\n    '--motion-translate-y': `${y}`,\n    '--motion-scale': `${scale}`,\n  };\n\n  return [\n    {\n      ...options,\n      easing,\n      duration: options.duration! * scale,\n      name: fadeIn,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      easing,\n      name: growIn,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `translate(${toKeyframeValue(\n            custom,\n            '--motion-translate-x',\n            asWeb,\n          )}, ${toKeyframeValue(\n            custom,\n            '--motion-translate-y',\n            asWeb,\n          )}) rotate(var(--comp-rotate-z, 0deg)) scale(${toKeyframeValue(\n            custom,\n            '--motion-scale',\n            asWeb,\n          )})`,\n        },\n        {\n          transform:\n            'translate(0px, 0px) rotate(var(--comp-rotate-z, 0deg)) scale(1)',\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAMO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC;AAC3C;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAE,GAAG;EACTC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAAC;AAEM,SAASC,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,GAAG,KAAK,EAAE;EAClE,MAAM;IACJC,KAAK;IACLC,YAAY,GAAG,CAAC;IAChBC,QAAQ,GAAG;MAAEC,KAAK,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAa,CAAC;IAC7CC,SAAS,GAAG;EACd,CAAC,GAAGR,OAAO,CAACS,WAAqB;EACjC,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAGlB,QAAQ,CAACO,OAAO,CAAC;EAE1C,MAAMY,MAAM,GAAGZ,OAAO,CAACY,MAAM,IAAI,YAAY;EAC7C,MAAMC,KAAK,GAAG,OAAOV,KAAK,KAAK,WAAW,GAAGR,SAAS,CAACQ,KAAK,CAAC,GAAGC,YAAY;EAC5E,MAAMU,UAAU,GAAIN,SAAS,GAAGO,IAAI,CAACC,EAAE,GAAI,GAAG;EAC9C,MAAMC,IAAI,GAAG,IAAAC,kBAAW,EAACb,QAAQ,CAACE,IAAI,CAAC;EAEvC,MAAMY,CAAC,GAAG,GAAIJ,IAAI,CAACK,GAAG,CAACN,UAAU,CAAC,GAAGT,QAAQ,CAACC,KAAK,GAAI,CAAC,GAAGW,IAAI,EAAE;EACjE,MAAMI,CAAC,GAAG,GAAIN,IAAI,CAACO,GAAG,CAACR,UAAU,CAAC,GAAGT,QAAQ,CAACC,KAAK,GAAG,CAAC,CAAC,GAAI,CAAC,GAAGW,IAAI,EAAE;EAEtE,MAAMM,MAAM,GAAG;IACb,sBAAsB,EAAE,GAAGJ,CAAC,EAAE;IAC9B,sBAAsB,EAAE,GAAGE,CAAC,EAAE;IAC9B,gBAAgB,EAAE,GAAGR,KAAK;EAC5B,CAAC;EAED,OAAO,CACL;IACE,GAAGb,OAAO;IACVY,MAAM;IACNY,QAAQ,EAAExB,OAAO,CAACwB,QAAQ,GAAIX,KAAK;IACnCY,IAAI,EAAEf,MAAM;IACZa,MAAM,EAAE,CAAC,CAAC;IACVG,SAAS,EAAE,CACT;MAAEC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,EACzB;MAAEA,OAAO,EAAE;IAAyB,CAAC;EAEzC,CAAC,EACD;IACE,GAAG5B,OAAO;IACVY,MAAM;IACNa,IAAI,EAAEd,MAAM;IACZY,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAEE,2BAAoB;MAC5BC,SAAS,EAAE,aAAa,IAAAC,sBAAe,EACrCR,MAAM,EACN,sBAAsB,EACtBrB,KACF,CAAC,KAAK,IAAA6B,sBAAe,EACnBR,MAAM,EACN,sBAAsB,EACtBrB,KACF,CAAC,8CAA8C,IAAA6B,sBAAe,EAC5DR,MAAM,EACN,gBAAgB,EAChBrB,KACF,CAAC;IACH,CAAC,EACD;MACE4B,SAAS,EACP;IACJ,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}