@wix/motion 1.0.72 → 1.571.0

package/dist/esm/library/entrance/CurveIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","PARAMS_MAP","pseudoRight","rotationX","rotationY","right","pseudoLeft","left","web","options","dom","prepare","style","asWeb","direction","namedEffect","curveIn","custom","name","easing","keyframes","offset","opacity","transform","width","measure","target","getBoundingClientRect","mutate","setProperty"],"sources":["../../../../src/library/entrance/CurveIn.ts"],"sourcesContent":["import type { CurveIn, TimeAnimationOptions, DomApi } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-curveIn'];\n}\n\nconst PARAMS_MAP = {\n  pseudoRight: { rotationX: '180', rotationY: '0' },\n  right: { rotationX: '0', rotationY: '180' },\n  pseudoLeft: { rotationX: '-180', rotationY: '0' },\n  left: { rotationX: '0', rotationY: '-180' },\n};\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { direction = 'right' } = options.namedEffect as CurveIn;\n  const [curveIn] = getNames(options);\n\n  const { rotationX, rotationY } = PARAMS_MAP[direction];\n\n  const custom = {\n    '--motion-rotate-x': `${rotationX}deg`,\n    '--motion-rotate-y': `${rotationY}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: curveIn,\n      easing: 'quadOut',\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: `perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(${toKeyframeValue(\n            custom,\n            '--motion-rotate-x',\n            asWeb,\n          )}) rotateY(${toKeyframeValue(\n            custom,\n            '--motion-rotate-y',\n            asWeb,\n          )}) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          opacity: 'var(--comp-opacity, 1)',\n          transform:\n            'perspective(200px) translateZ(calc(var(--motion-width, 300px) * -3)) rotateX(0deg) rotateY(0deg) translateZ(calc(var(--motion-width, 300px) * 3)) rotateZ(var(--comp-rotate-z, 0deg))',\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(_: TimeAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let width: number;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      width = target.getBoundingClientRect().width;\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-width', `${width}px`);\n    });\n  }\n}\n"],"mappings":"AACA,SAASA,oBAAoB,EAAEC,eAAe,QAAQ,aAAa;AAEnE,OAAO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,gBAAgB,CAAC;AAC3B;AAEA,MAAMC,UAAU,GAAG;EACjBC,WAAW,EAAE;IAAEC,SAAS,EAAE,KAAK;IAAEC,SAAS,EAAE;EAAI,CAAC;EACjDC,KAAK,EAAE;IAAEF,SAAS,EAAE,GAAG;IAAEC,SAAS,EAAE;EAAM,CAAC;EAC3CE,UAAU,EAAE;IAAEH,SAAS,EAAE,MAAM;IAAEC,SAAS,EAAE;EAAI,CAAC;EACjDG,IAAI,EAAE;IAAEJ,SAAS,EAAE,GAAG;IAAEC,SAAS,EAAE;EAAO;AAC5C,CAAC;AAED,OAAO,SAASI,GAAGA,CAACC,OAA6B,EAAEC,GAAY,EAAE;EAC/DC,OAAO,CAACF,OAAO,EAAEC,GAAG,CAAC;EAErB,OAAOE,KAAK,CAACH,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEA,OAAO,SAASG,KAAKA,CAACH,OAA6B,EAAEI,KAAK,EAAU;EAAA,IAAfA,KAAK;IAALA,KAAK,GAAG,KAAK;EAAA;EAChE,MAAM;IAAEC,SAAS,GAAG;EAAQ,CAAC,GAAGL,OAAO,CAACM,WAAsB;EAC9D,MAAM,CAACC,OAAO,CAAC,GAAGjB,QAAQ,CAACU,OAAO,CAAC;EAEnC,MAAM;IAAEN,SAAS;IAAEC;EAAU,CAAC,GAAGH,UAAU,CAACa,SAAS,CAAC;EAEtD,MAAMG,MAAM,GAAG;IACb,mBAAmB,EAAE,GAAGd,SAAS,KAAK;IACtC,mBAAmB,EAAE,GAAGC,SAAS;EACnC,CAAC;EAED,OAAO,CACL;IACE,GAAGK,OAAO;IACVS,IAAI,EAAEF,OAAO;IACbG,MAAM,EAAE,SAAS;IACjBF,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVH,MAAM,EAAE;IACV,CAAC,EACD;MACEE,MAAM,EAAExB,oBAAoB;MAC5ByB,OAAO,EAAE,CAAC;MACVC,SAAS,EAAE,gFAAgFzB,eAAe,CACxGmB,MAAM,EACN,mBAAmB,EACnBJ,KACF,CAAC,aAAaf,eAAe,CAC3BmB,MAAM,EACN,mBAAmB,EACnBJ,KACF,CAAC;IACH,CAAC,EACD;MACES,OAAO,EAAE,wBAAwB;MACjCC,SAAS,EACP;IACJ,CAAC;EAEL,CAAC,CACF;AACH;AAEA,OAAO,SAASZ,OAAOA,CAACX,CAAuB,EAAEU,GAAY,EAAE;EAC7D,IAAIA,GAAG,EAAE;IACP,IAAIc,KAAa;IAEjBd,GAAG,CAACe,OAAO,CAAEC,MAAM,IAAK;MACtB,IAAI,CAACA,MAAM,EAAE;QACX;MACF;MAEAF,KAAK,GAAGE,MAAM,CAACC,qBAAqB,CAAC,CAAC,CAACH,KAAK;IAC9C,CAAC,CAAC;IAEFd,GAAG,CAACkB,MAAM,CAAEF,MAAM,IAAK;MACrBA,MAAM,YAANA,MAAM,CAAEd,KAAK,CAACiB,WAAW,CAAC,gBAAgB,EAAE,GAAGL,KAAK,IAAI,CAAC;IAC3D,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

package/dist/esm/library/entrance/DropIn.js

@@ -0,0 +1,61 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-dropIn'];
+}
+const PARAMS_MAP = {
+  soft: {
+    scale: 1.2,
+    ease: 'cubicInOut'
+  },
+  medium: {
+    scale: 1.6,
+    ease: 'quintInOut'
+  },
+  hard: {
+    scale: 2,
+    ease: 'backOut'
+  }
+};
+export function web(options) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    power,
+    initialScale = PARAMS_MAP.medium.scale
+  } = options.namedEffect;
+  const [fadeIn, dropIn] = getNames(options);
+  const scale = power && PARAMS_MAP[power].scale || initialScale;
+  const easing = power && PARAMS_MAP[power].ease || options.easing || 'quintInOut';
+  const custom = {
+    '--motion-scale': `${scale}`
+  };
+  return [{
+    ...options,
+    name: fadeIn,
+    easing: 'quadOut',
+    duration: options.duration * 0.8,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: dropIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      scale: toKeyframeValue(custom, '--motion-scale', asWeb)
+    }, {
+      scale: '1'
+    }]
+  }];
+}
+//# sourceMappingURL=DropIn.js.map

package/dist/esm/library/entrance/DropIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","PARAMS_MAP","soft","scale","ease","medium","hard","web","options","style","asWeb","power","initialScale","namedEffect","fadeIn","dropIn","easing","custom","name","duration","keyframes","offset","opacity"],"sources":["../../../../src/library/entrance/DropIn.ts"],"sourcesContent":["import type { TimeAnimationOptions, DropIn } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-dropIn'];\n}\n\nconst PARAMS_MAP = {\n  soft: { scale: 1.2, ease: 'cubicInOut' },\n  medium: { scale: 1.6, ease: 'quintInOut' },\n  hard: { scale: 2, ease: 'backOut' },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { power, initialScale = PARAMS_MAP.medium.scale } =\n    options.namedEffect as DropIn;\n  const [fadeIn, dropIn] = getNames(options);\n\n  const scale = (power && PARAMS_MAP[power].scale) || initialScale;\n  const easing =\n    (power && PARAMS_MAP[power].ease) || options.easing || 'quintInOut';\n\n  const custom = {\n    '--motion-scale': `${scale}`,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      easing: 'quadOut',\n      duration: options.duration! * 0.8,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: dropIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          scale: toKeyframeValue(custom, '--motion-scale', asWeb),\n        },\n        {\n          scale: '1',\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AACA,SAASA,oBAAoB,EAAEC,eAAe,QAAQ,aAAa;AAEnE,OAAO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC;AAC3C;AAEA,MAAMC,UAAU,GAAG;EACjBC,IAAI,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAa,CAAC;EACxCC,MAAM,EAAE;IAAEF,KAAK,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAa,CAAC;EAC1CE,IAAI,EAAE;IAAEH,KAAK,EAAE,CAAC;IAAEC,IAAI,EAAE;EAAU;AACpC,CAAC;AAED,OAAO,SAASG,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEA,OAAO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,EAAU;EAAA,IAAfA,KAAK;IAALA,KAAK,GAAG,KAAK;EAAA;EAChE,MAAM;IAAEC,KAAK;IAAEC,YAAY,GAAGX,UAAU,CAACI,MAAM,CAACF;EAAM,CAAC,GACrDK,OAAO,CAACK,WAAqB;EAC/B,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAGhB,QAAQ,CAACS,OAAO,CAAC;EAE1C,MAAML,KAAK,GAAIQ,KAAK,IAAIV,UAAU,CAACU,KAAK,CAAC,CAACR,KAAK,IAAKS,YAAY;EAChE,MAAMI,MAAM,GACTL,KAAK,IAAIV,UAAU,CAACU,KAAK,CAAC,CAACP,IAAI,IAAKI,OAAO,CAACQ,MAAM,IAAI,YAAY;EAErE,MAAMC,MAAM,GAAG;IACb,gBAAgB,EAAE,GAAGd,KAAK;EAC5B,CAAC;EAED,OAAO,CACL;IACE,GAAGK,OAAO;IACVU,IAAI,EAAEJ,MAAM;IACZE,MAAM,EAAE,SAAS;IACjBG,QAAQ,EAAEX,OAAO,CAACW,QAAQ,GAAI,GAAG;IACjCF,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,GAAGd,OAAO;IACVU,IAAI,EAAEH,MAAM;IACZC,MAAM;IACNC,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAExB,oBAAoB;MAC5BM,KAAK,EAAEL,eAAe,CAACmB,MAAM,EAAE,gBAAgB,EAAEP,KAAK;IACxD,CAAC,EACD;MACEP,KAAK,EAAE;IACT,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/esm/library/entrance/ExpandIn.js

@@ -0,0 +1,117 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-expandIn'];
+}
+const SCALE_MAP = {
+  soft: 0.8,
+  medium: 0.6,
+  hard: 0
+};
+const TRANSFORM_ORIGIN_MAP = {
+  top: {
+    x: 0,
+    y: -0.5
+  },
+  'top-right': {
+    x: 0.5,
+    y: -0.5
+  },
+  right: {
+    x: 0.5,
+    y: 0
+  },
+  'bottom-right': {
+    x: 0.5,
+    y: 0.5
+  },
+  bottom: {
+    x: 0,
+    y: 0.5
+  },
+  'bottom-left': {
+    x: -0.5,
+    y: 0.5
+  },
+  left: {
+    x: -0.5,
+    y: 0
+  },
+  'top-left': {
+    x: -0.5,
+    y: -0.5
+  },
+  center: {
+    x: 0,
+    y: 0
+  }
+};
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    power,
+    initialScale = 0,
+    direction = 'center'
+  } = options.namedEffect;
+  const [fadeIn, expandIn] = getNames(options);
+  const easing = options.easing || 'cubicInOut';
+  const scale_ = power && power in SCALE_MAP ? SCALE_MAP[power] : initialScale;
+  const {
+    x,
+    y
+  } = TRANSFORM_ORIGIN_MAP[direction];
+  const custom = {
+    '--motion-translate-x': x,
+    '--motion-translate-y': y,
+    '--motion-scale': scale_
+  };
+  const transX = toKeyframeValue(custom, '--motion-translate-x', asWeb);
+  const transY = toKeyframeValue(custom, '--motion-translate-y', asWeb);
+  const scale = toKeyframeValue(custom, '--motion-scale', asWeb);
+  return [{
+    ...options,
+    name: fadeIn,
+    easing: 'linear',
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: expandIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      transform: `translateX(calc(var(--motion-width, 100%) * ${transX})) translateY(calc(var(--motion-height, 100%) * ${transY})) scale(${scale}) translateX(calc(var(--motion-width, 100%) * -1 * ${transX})) translateY(calc(var(--motion-height, 100%) * -1 * ${transY}))  rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `translateX(calc(var(--motion-width, 100%) * ${transX})) translateY(calc(var(--motion-height, 100%) * ${transY})) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * ${transX})) translateY(calc(var(--motion-height, 100%) * -1 * ${transY})) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+}
+export function prepare(_, dom) {
+  if (dom) {
+    let width, height;
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      width = rect.width;
+      height = rect.height;
+    });
+    dom.mutate(target => {
+      target == null || target.style.setProperty('--motion-width', `${width}px`);
+      target == null || target.style.setProperty('--motion-height', `${height}px`);
+    });
+  }
+}
+//# sourceMappingURL=ExpandIn.js.map

package/dist/esm/library/entrance/ExpandIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","SCALE_MAP","soft","medium","hard","TRANSFORM_ORIGIN_MAP","top","x","y","right","bottom","left","center","web","options","dom","prepare","style","asWeb","power","initialScale","direction","namedEffect","fadeIn","expandIn","easing","scale_","custom","transX","transY","scale","name","keyframes","offset","opacity","transform","width","height","measure","target","rect","getBoundingClientRect","mutate","setProperty"],"sources":["../../../../src/library/entrance/ExpandIn.ts"],"sourcesContent":["import type { DomApi, ExpandIn, TimeAnimationOptions } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-expandIn'];\n}\n\nconst SCALE_MAP = {\n  soft: 0.8,\n  medium: 0.6,\n  hard: 0,\n};\n\nconst TRANSFORM_ORIGIN_MAP = {\n  top: { x: 0, y: -0.5 },\n  'top-right': { x: 0.5, y: -0.5 },\n  right: { x: 0.5, y: 0 },\n  'bottom-right': { x: 0.5, y: 0.5 },\n  bottom: { x: 0, y: 0.5 },\n  'bottom-left': { x: -0.5, y: 0.5 },\n  left: { x: -0.5, y: 0 },\n  'top-left': { x: -0.5, y: -0.5 },\n  center: { x: 0, y: 0 },\n};\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    power,\n    initialScale = 0,\n    direction = 'center',\n  } = options.namedEffect as ExpandIn;\n  const [fadeIn, expandIn] = getNames(options);\n\n  const easing = options.easing || 'cubicInOut';\n  const scale_ = power && power in SCALE_MAP ? SCALE_MAP[power] : initialScale;\n  const { x, y } = TRANSFORM_ORIGIN_MAP[direction];\n\n  const custom = {\n    '--motion-translate-x': x,\n    '--motion-translate-y': y,\n    '--motion-scale': scale_,\n  };\n\n  const transX = toKeyframeValue(custom, '--motion-translate-x', asWeb);\n  const transY = toKeyframeValue(custom, '--motion-translate-y', asWeb);\n  const scale = toKeyframeValue(custom, '--motion-scale', asWeb);\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      easing: 'linear',\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: expandIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `translateX(calc(var(--motion-width, 100%) * ${transX})) translateY(calc(var(--motion-height, 100%) * ${transY})) scale(${scale}) translateX(calc(var(--motion-width, 100%) * -1 * ${transX})) translateY(calc(var(--motion-height, 100%) * -1 * ${transY}))  rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `translateX(calc(var(--motion-width, 100%) * ${transX})) translateY(calc(var(--motion-height, 100%) * ${transY})) scale(1) translateX(calc(var(--motion-width, 100%) * -1 * ${transX})) translateY(calc(var(--motion-height, 100%) * -1 * ${transY})) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(_: TimeAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let width: number, height: number;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rect = target.getBoundingClientRect();\n      width = rect.width;\n      height = rect.height;\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-width', `${width}px`);\n      target?.style.setProperty('--motion-height', `${height}px`);\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/library/entrance/FadeIn.js

@@ -0,0 +1,21 @@
+export function getNames(_) {
+  return ['motion-fadeIn'];
+}
+export function web(options) {
+  return style(options);
+}
+export function style(options) {
+  const [fadeIn] = getNames(options);
+  return [{
+    ...options,
+    name: fadeIn,
+    easing: 'sineInOut',
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }];
+}
+//# sourceMappingURL=FadeIn.js.map

package/dist/esm/library/entrance/FadeIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getNames","_","web","options","style","fadeIn","name","easing","keyframes","offset","opacity"],"sources":["../../../../src/library/entrance/FadeIn.ts"],"sourcesContent":["import { TimeAnimationOptions } from '../../types';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn'];\n}\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options);\n}\n\nexport function style(options: TimeAnimationOptions) {\n  const [fadeIn] = getNames(options);\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      easing: 'sineInOut',\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n  ];\n}\n"],"mappings":"AAEA,OAAO,SAASA,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,CAAC;AAC1B;AAEA,OAAO,SAASC,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,CAAC;AACvB;AAEA,OAAO,SAASC,KAAKA,CAACD,OAA6B,EAAE;EACnD,MAAM,CAACE,MAAM,CAAC,GAAGL,QAAQ,CAACG,OAAO,CAAC;EAElC,OAAO,CACL;IACE,GAAGA,OAAO;IACVG,IAAI,EAAED,MAAM;IACZE,MAAM,EAAE,WAAW;IACnBC,SAAS,EAAE,CACT;MAAEC,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAC,EACzB;MAAEA,OAAO,EAAE;IAAyB,CAAC;EAEzC,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,100 @@
+import { getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';
+export 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
+  }
+};
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options);
+}
+export 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: 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)`
+    }]
+  }];
+}
+export 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 = 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/esm/library/entrance/FlipIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getAdjustedDirection","INITIAL_FRAME_OFFSET","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","transform","adjustedDirection","measure","target","rotation","getComputedStyle","getPropertyValue","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/esm/library/entrance/FloatIn.js

@@ -0,0 +1,64 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export 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
+  }
+};
+export function web(options) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    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: INITIAL_FRAME_OFFSET,
+      opacity: 0,
+      transform: `translate(${toKeyframeValue(custom, '--motion-translate-x', asWeb)}, ${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/esm/library/entrance/FloatIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","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","transform"],"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,SAASA,oBAAoB,EAAEC,eAAe,QAAQ,aAAa;AAEnE,OAAO,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;AAED,OAAO,SAASI,GAAGA,CAACC,OAA6B,EAAE;EACjD,OAAOC,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEA,OAAO,SAASC,KAAKA,CAACD,OAA6B,EAAEE,KAAK,EAAU;EAAA,IAAfA,KAAK;IAALA,KAAK,GAAG,KAAK;EAAA;EAChE,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,EAAE1B,oBAAoB;MAC5B2B,OAAO,EAAE,CAAC;MACVC,SAAS,EAAE,aAAa3B,eAAe,CACrCqB,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC,KAAKd,eAAe,CACnBqB,MAAM,EACN,sBAAsB,EACtBP,KACF,CAAC;IACH,CAAC,EACD;MACEY,OAAO,EAAE,wBAAwB;MACjCC,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,127 @@
+import { getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';
+export 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
+  };
+}
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options);
+}
+export 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: 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']})))`
+    }]
+  }];
+}
+export 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 = 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/esm/library/entrance/FoldIn.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getAdjustedDirection","INITIAL_FRAME_OFFSET","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","transform","adjustedDirection","measure","target","rotation","getComputedStyle","getPropertyValue","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":"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","ignoreList":[]}

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

@@ -0,0 +1,85 @@
+import { getCssUnits, getOutOfScreenDistance, INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-glideIn'];
+}
+const EASING_MAP = {
+  soft: 'cubicInOut',
+  medium: 'quintInOut',
+  hard: 'backOut'
+};
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    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 = getCssUnits(distance.type);
+  const easing = power && EASING_MAP[power] || options.easing || 'quintInOut';
+  const {
+    x,
+    y
+  } = 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: INITIAL_FRAME_OFFSET,
+      // TODO: remove opacity when not necessary to override hard-coded opacity:0 in style
+      opacity: 'var(--comp-opacity, 1)',
+      transform: `translate(${toKeyframeValue(custom, '--motion-translate-x', asWeb)}, ${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))'
+    }]
+  }];
+}
+export 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