@wix/motion 1.0.72 → 1.571.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["getCssUnits","getOutOfScreenDistance","INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","EASING_MAP","soft","medium","hard","web","options","dom","prepare","style","asWeb","direction","distance","value","type","power","startFromOffScreen","namedEffect","glideIn","angleInRad","Math","PI","unit","easing","x","y","translateX","sin","translateY","cos","custom","name","keyframes","offset","opacity","transform","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/esm/library/entrance/GlitchIn.js

@@ -0,0 +1,22 @@
+import { web as glideInWeb, style as glideInStyle } from './GlideIn';
+export { prepare, getNames } from './GlideIn';
+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;
+}
+export function web(options, dom) {
+  return glideInWeb(getFixedDirection(options), dom);
+}
+export function style(options) {
+  return glideInStyle(getFixedDirection(options));
+}
+//# sourceMappingURL=GlitchIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["web","glideInWeb","style","glideInStyle","prepare","getNames","getFixedDirection","options","duplicate","JSON","parse","stringify","direction","namedEffect","startFromOffScreen","dom"],"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,SAASA,GAAG,IAAIC,UAAU,EAAEC,KAAK,IAAIC,YAAY,QAAQ,WAAW;AAEpE,SAASC,OAAO,EAAEC,QAAQ,QAAQ,WAAW;AAE7C,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;AAEA,OAAO,SAASR,GAAGA,CACjBO,OAAqD,EACrDQ,GAAY,EACZ;EACA,OAAOd,UAAU,CAACK,iBAAiB,CAACC,OAAO,CAAC,EAAEQ,GAAG,CAAC;AACpD;AAEA,OAAO,SAASb,KAAKA,CAACK,OAA6B,EAAE;EACnD,OAAOJ,YAAY,CAACG,iBAAiB,CAACC,OAAO,CAAC,CAAC;AACjD","ignoreList":[]}

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

@@ -0,0 +1,63 @@
+import { getCssUnits, INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-growIn'];
+}
+const SCALE_MAP = {
+  soft: 0.8,
+  medium: 0.6,
+  hard: 0
+};
+export function web(options) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    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 = 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: INITIAL_FRAME_OFFSET,
+      transform: `translate(${toKeyframeValue(custom, '--motion-translate-x', asWeb)}, ${toKeyframeValue(custom, '--motion-translate-y', asWeb)}) rotate(var(--comp-rotate-z, 0deg)) scale(${toKeyframeValue(custom, '--motion-scale', asWeb)})`
+    }, {
+      transform: 'translate(0px, 0px) rotate(var(--comp-rotate-z, 0deg)) scale(1)'
+    }]
+  }];
+}
+//# sourceMappingURL=GrowIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getCssUnits","INITIAL_FRAME_OFFSET","toKeyframeValue","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","x","sin","y","cos","custom","duration","name","keyframes","offset","opacity","transform"],"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,SACEA,WAAW,EACXC,oBAAoB,EACpBC,eAAe,QACV,aAAa;AAEpB,OAAO,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;AAED,OAAO,SAASC,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;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,GAAG3B,WAAW,CAACe,QAAQ,CAACE,IAAI,CAAC;EAEvC,MAAMW,CAAC,GAAG,GAAIH,IAAI,CAACI,GAAG,CAACL,UAAU,CAAC,GAAGT,QAAQ,CAACC,KAAK,GAAI,CAAC,GAAGW,IAAI,EAAE;EACjE,MAAMG,CAAC,GAAG,GAAIL,IAAI,CAACM,GAAG,CAACP,UAAU,CAAC,GAAGT,QAAQ,CAACC,KAAK,GAAG,CAAC,CAAC,GAAI,CAAC,GAAGW,IAAI,EAAE;EAEtE,MAAMK,MAAM,GAAG;IACb,sBAAsB,EAAE,GAAGJ,CAAC,EAAE;IAC9B,sBAAsB,EAAE,GAAGE,CAAC,EAAE;IAC9B,gBAAgB,EAAE,GAAGP,KAAK;EAC5B,CAAC;EAED,OAAO,CACL;IACE,GAAGb,OAAO;IACVY,MAAM;IACNW,QAAQ,EAAEvB,OAAO,CAACuB,QAAQ,GAAIV,KAAK;IACnCW,IAAI,EAAEd,MAAM;IACZY,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,GAAG3B,OAAO;IACVY,MAAM;IACNY,IAAI,EAAEb,MAAM;IACZW,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAEnC,oBAAoB;MAC5BqC,SAAS,EAAE,aAAapC,eAAe,CACrC8B,MAAM,EACN,sBAAsB,EACtBpB,KACF,CAAC,KAAKV,eAAe,CACnB8B,MAAM,EACN,sBAAsB,EACtBpB,KACF,CAAC,8CAA8CV,eAAe,CAC5D8B,MAAM,EACN,gBAAgB,EAChBpB,KACF,CAAC;IACH,CAAC,EACD;MACE0B,SAAS,EACP;IACJ,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,175 @@
+import { getEasingFamily, getEasing, toKeyframeValue, INITIAL_FRAME_OFFSET } from '../../utils';
+import { cssEasings as easings } from '../../easings';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-punchIn'];
+}
+const TRANSLATION_FACTORS_MAP = {
+  'top-left': {
+    y: -1,
+    x: -1
+  },
+  'top-right': {
+    y: -1,
+    x: 1
+  },
+  'bottom-right': {
+    y: 1,
+    x: 1
+  },
+  'bottom-left': {
+    y: 1,
+    x: -1
+  },
+  center: {
+    y: 0,
+    x: 0
+  }
+};
+const POWER_MAP = {
+  soft: 'sineIn',
+  medium: 'quadIn',
+  hard: 'quintIn'
+};
+function getMidPoint(x, y, factor) {
+  return {
+    x: `calc(var(--motion-width, 100%) * 1.1 / 3 * ${x} * ${factor})`,
+    y: `calc(var(--motion-height, 100%) * 1.1 / 3 * ${y} * ${factor})`
+  };
+}
+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 = 'top-right',
+    power = 'medium'
+  } = options.namedEffect;
+  const [fadeIn, punchIn] = getNames(options);
+  const translationFactors = TRANSLATION_FACTORS_MAP[direction];
+  const sourcePoint = {
+    x: `calc(var(--motion-width, 100%) * 1.1 / 2 * ${translationFactors.x})`,
+    y: `calc(var(--motion-height, 100%) * 1.1 / 2 * ${translationFactors.y})`
+  };
+  const {
+    in: _in,
+    out: _out
+  } = getEasingFamily(POWER_MAP[power]);
+  const KEYFRAMES = [{
+    offset: 30,
+    scale: 0.3,
+    factor: 1,
+    ease: 'linear'
+  }, {
+    offset: 45,
+    scale: 1.4,
+    factor: -0.4,
+    ease: _out
+  }, {
+    offset: 62.65,
+    scale: 0.8,
+    factor: 0.2,
+    ease: _in
+  }, {
+    offset: 77.27,
+    scale: 1.1,
+    factor: -0.1,
+    ease: _out
+  }, {
+    offset: 86.23,
+    scale: 0.94,
+    factor: 0.06,
+    ease: _in
+  }, {
+    offset: 91.73,
+    scale: 1.03,
+    factor: -0.03,
+    ease: _out
+  }, {
+    offset: 95.11,
+    scale: 0.98,
+    factor: 0.02,
+    ease: _in
+  }, {
+    offset: 97.18,
+    scale: 1.01,
+    factor: -0.01,
+    ease: _out
+  }, {
+    offset: 98.45,
+    scale: 0.99,
+    factor: 0.01,
+    ease: _in
+  }, {
+    offset: 100,
+    scale: 1,
+    factor: 0,
+    ease: _out
+  }];
+  const keyframes = KEYFRAMES.map(_ref => {
+    let {
+      offset,
+      scale,
+      ease,
+      factor
+    } = _ref;
+    const {
+      x,
+      y
+    } = getMidPoint(translationFactors.x, translationFactors.y, factor);
+    return {
+      offset: offset / 100,
+      easing: getEasing(ease),
+      scale: `${scale}`,
+      translate: `${x} ${y}`
+    };
+  });
+  const custom = {
+    '--motion-translate': `${sourcePoint.x} ${sourcePoint.y}`
+  };
+  return [{
+    ...options,
+    easing: 'cubicIn',
+    duration: options.duration * 0.3,
+    name: fadeIn,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    easing: 'linear',
+    name: punchIn,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      translate: toKeyframeValue(custom, '--motion-translate', asWeb),
+      scale: '0',
+      easing: easings.expoIn
+    }, ...keyframes]
+  }];
+}
+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=PunchIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getEasingFamily","getEasing","toKeyframeValue","INITIAL_FRAME_OFFSET","cssEasings","easings","getNames","_","TRANSLATION_FACTORS_MAP","y","x","center","POWER_MAP","soft","medium","hard","getMidPoint","factor","web","options","dom","prepare","style","asWeb","direction","power","namedEffect","fadeIn","punchIn","translationFactors","sourcePoint","in","_in","out","_out","KEYFRAMES","offset","scale","ease","keyframes","map","_ref","easing","translate","custom","duration","name","opacity","expoIn","width","height","measure","target","rect","getBoundingClientRect","mutate","setProperty"],"sources":["../../../../src/library/entrance/PunchIn.ts"],"sourcesContent":["import {\n  getEasingFamily,\n  getEasing,\n  toKeyframeValue,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\nimport type { PunchIn, TimeAnimationOptions, DomApi } from '../../types';\nimport { cssEasings as easings } from '../../easings';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-punchIn'];\n}\n\nconst TRANSLATION_FACTORS_MAP: Record<\n  PunchIn['direction'],\n  { x: number; y: number }\n> = {\n  'top-left': { y: -1, x: -1 },\n  'top-right': { y: -1, x: 1 },\n  'bottom-right': { y: 1, x: 1 },\n  'bottom-left': { y: 1, x: -1 },\n  center: { y: 0, x: 0 },\n};\n\nconst POWER_MAP = {\n  soft: 'sineIn',\n  medium: 'quadIn',\n  hard: 'quintIn',\n};\n\nfunction getMidPoint(x: number, y: number, factor: number) {\n  return {\n    x: `calc(var(--motion-width, 100%) * 1.1 / 3 * ${x} * ${factor})`,\n    y: `calc(var(--motion-height, 100%) * 1.1 / 3 * ${y} * ${factor})`,\n  };\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 = 'top-right', power = 'medium' } =\n    options.namedEffect as PunchIn;\n  const [fadeIn, punchIn] = getNames(options);\n  const translationFactors = TRANSLATION_FACTORS_MAP[direction];\n\n  const sourcePoint = {\n    x: `calc(var(--motion-width, 100%) * 1.1 / 2 * ${translationFactors.x})`,\n    y: `calc(var(--motion-height, 100%) * 1.1 / 2 * ${translationFactors.y})`,\n  };\n\n  const { in: _in, out: _out } = getEasingFamily(POWER_MAP[power]);\n\n  const KEYFRAMES = [\n    { offset: 30, scale: 0.3, factor: 1, ease: 'linear' },\n    { offset: 45, scale: 1.4, factor: -0.4, ease: _out },\n    { offset: 62.65, scale: 0.8, factor: 0.2, ease: _in },\n    { offset: 77.27, scale: 1.1, factor: -0.1, ease: _out },\n    { offset: 86.23, scale: 0.94, factor: 0.06, ease: _in },\n    { offset: 91.73, scale: 1.03, factor: -0.03, ease: _out },\n    { offset: 95.11, scale: 0.98, factor: 0.02, ease: _in },\n    { offset: 97.18, scale: 1.01, factor: -0.01, ease: _out },\n    { offset: 98.45, scale: 0.99, factor: 0.01, ease: _in },\n    { offset: 100, scale: 1, factor: 0, ease: _out },\n  ];\n\n  const keyframes = KEYFRAMES.map(({ offset, scale, ease, factor }) => {\n    const { x, y } = getMidPoint(\n      translationFactors.x,\n      translationFactors.y,\n      factor,\n    );\n\n    return {\n      offset: offset / 100,\n      easing: getEasing(ease),\n      scale: `${scale}`,\n      translate: `${x} ${y}`,\n    };\n  });\n\n  const custom = {\n    '--motion-translate': `${sourcePoint.x} ${sourcePoint.y}`,\n  };\n\n  return [\n    {\n      ...options,\n      easing: 'cubicIn',\n      duration: options.duration! * 0.3,\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: 'linear',\n      name: punchIn,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          translate: toKeyframeValue(custom, '--motion-translate', asWeb),\n          scale: '0',\n          easing: easings.expoIn,\n        },\n        ...keyframes,\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/RevealIn.js

@@ -0,0 +1,65 @@
+import { getAdjustedDirection, getClipPolygonParams, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+  return ['motion-revealIn'];
+}
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+function getClipStart(rotateZ, direction) {
+  const clipDirection = getAdjustedDirection(DIRECTIONS, direction, rotateZ);
+  return getClipPolygonParams({
+    direction: clipDirection,
+    minimum: 0
+  });
+}
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options);
+}
+export function style(options) {
+  const {
+    direction = 'left'
+  } = options.namedEffect;
+  const [revealIn] = getNames(options);
+  const easing = options.easing || 'cubicInOut';
+  const start = getClipStart(0, direction);
+  const end = getClipPolygonParams({
+    direction: 'initial'
+  });
+  const custom = {
+    '--motion-clip-start': start
+  };
+  return [{
+    ...options,
+    easing,
+    name: revealIn,
+    custom,
+    keyframes: [{
+      offset: 0,
+      opacity: 0,
+      easing: 'step-end'
+    }, {
+      offset: INITIAL_FRAME_OFFSET,
+      opacity: 'var(--comp-opacity, 1)',
+      clipPath: `var(--motion-clip-start, ${start})`
+    }, {
+      clipPath: end
+    }]
+  }];
+}
+export function prepare(options, dom) {
+  const {
+    direction = 'left'
+  } = options.namedEffect;
+  if (dom) {
+    let rotation = '0deg';
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';
+    });
+    dom.mutate(target_ => {
+      target_ == null || target_.style.setProperty('--motion-clip-start', getClipStart(parseInt(rotation, 10), direction));
+    });
+  }
+}
+//# sourceMappingURL=RevealIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getAdjustedDirection","getClipPolygonParams","INITIAL_FRAME_OFFSET","getNames","_","DIRECTIONS","getClipStart","rotateZ","direction","clipDirection","minimum","web","options","dom","prepare","style","namedEffect","revealIn","easing","start","end","custom","name","keyframes","offset","opacity","clipPath","rotation","measure","target","getComputedStyle","getPropertyValue","mutate","target_","setProperty","parseInt"],"sources":["../../../../src/library/entrance/RevealIn.ts"],"sourcesContent":["import type {\n  RevealIn,\n  AnimationExtraOptions,\n  DomApi,\n  TimeAnimationOptions,\n} from '../../types';\nimport {\n  getAdjustedDirection,\n  getClipPolygonParams,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\nimport type { Direction } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-revealIn'];\n}\n\nconst DIRECTIONS = ['top', 'right', 'bottom', 'left'] as Direction[];\n\nfunction getClipStart(rotateZ: number, direction: Direction) {\n  const clipDirection = getAdjustedDirection(\n    DIRECTIONS,\n    direction,\n    rotateZ,\n  ) as (typeof DIRECTIONS)[number];\n\n  return getClipPolygonParams({\n    direction: clipDirection,\n    minimum: 0,\n  });\n}\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  prepare(options, dom);\n\n  return style(options);\n}\n\nexport function style(options: TimeAnimationOptions) {\n  const { direction = 'left' } = options.namedEffect as RevealIn;\n  const [revealIn] = getNames(options);\n  const easing = options.easing || 'cubicInOut';\n\n  const start = getClipStart(0, direction);\n  const end = getClipPolygonParams({ direction: 'initial' });\n\n  const custom = {\n    '--motion-clip-start': start,\n  };\n\n  return [\n    {\n      ...options,\n      easing,\n      name: revealIn,\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          opacity: 0,\n          easing: 'step-end',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 'var(--comp-opacity, 1)',\n          clipPath: `var(--motion-clip-start, ${start})`,\n        },\n        {\n          clipPath: end,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(options: TimeAnimationOptions, dom?: DomApi) {\n  const { direction = 'left' } = options.namedEffect as RevealIn;\n\n  if (dom) {\n    let rotation = '0deg';\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      rotation =\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg';\n    });\n\n    dom.mutate((target_) => {\n      target_?.style.setProperty(\n        '--motion-clip-start',\n        getClipStart(parseInt(rotation, 10), direction),\n      );\n    });\n  }\n}\n"],"mappings":"AAMA,SACEA,oBAAoB,EACpBC,oBAAoB,EACpBC,oBAAoB,QACf,aAAa;AAGpB,OAAO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,iBAAiB,CAAC;AAC5B;AAEA,MAAMC,UAAU,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAgB;AAEpE,SAASC,YAAYA,CAACC,OAAe,EAAEC,SAAoB,EAAE;EAC3D,MAAMC,aAAa,GAAGT,oBAAoB,CACxCK,UAAU,EACVG,SAAS,EACTD,OACF,CAAgC;EAEhC,OAAON,oBAAoB,CAAC;IAC1BO,SAAS,EAAEC,aAAa;IACxBC,OAAO,EAAE;EACX,CAAC,CAAC;AACJ;AAEA,OAAO,SAASC,GAAGA,CACjBC,OAAqD,EACrDC,GAAY,EACZ;EACAC,OAAO,CAACF,OAAO,EAAEC,GAAG,CAAC;EAErB,OAAOE,KAAK,CAACH,OAAO,CAAC;AACvB;AAEA,OAAO,SAASG,KAAKA,CAACH,OAA6B,EAAE;EACnD,MAAM;IAAEJ,SAAS,GAAG;EAAO,CAAC,GAAGI,OAAO,CAACI,WAAuB;EAC9D,MAAM,CAACC,QAAQ,CAAC,GAAGd,QAAQ,CAACS,OAAO,CAAC;EACpC,MAAMM,MAAM,GAAGN,OAAO,CAACM,MAAM,IAAI,YAAY;EAE7C,MAAMC,KAAK,GAAGb,YAAY,CAAC,CAAC,EAAEE,SAAS,CAAC;EACxC,MAAMY,GAAG,GAAGnB,oBAAoB,CAAC;IAAEO,SAAS,EAAE;EAAU,CAAC,CAAC;EAE1D,MAAMa,MAAM,GAAG;IACb,qBAAqB,EAAEF;EACzB,CAAC;EAED,OAAO,CACL;IACE,GAAGP,OAAO;IACVM,MAAM;IACNI,IAAI,EAAEL,QAAQ;IACdI,MAAM;IACNE,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVP,MAAM,EAAE;IACV,CAAC,EACD;MACEM,MAAM,EAAEtB,oBAAoB;MAC5BuB,OAAO,EAAE,wBAAwB;MACjCC,QAAQ,EAAE,4BAA4BP,KAAK;IAC7C,CAAC,EACD;MACEO,QAAQ,EAAEN;IACZ,CAAC;EAEL,CAAC,CACF;AACH;AAEA,OAAO,SAASN,OAAOA,CAACF,OAA6B,EAAEC,GAAY,EAAE;EACnE,MAAM;IAAEL,SAAS,GAAG;EAAO,CAAC,GAAGI,OAAO,CAACI,WAAuB;EAE9D,IAAIH,GAAG,EAAE;IACP,IAAIc,QAAQ,GAAG,MAAM;IAErBd,GAAG,CAACe,OAAO,CAAEC,MAAM,IAAK;MACtB,IAAI,CAACA,MAAM,EAAE;QACX;MACF;MAEAF,QAAQ,GACNG,gBAAgB,CAACD,MAAM,CAAC,CAACE,gBAAgB,CAAC,iBAAiB,CAAC,IAAI,MAAM;IAC1E,CAAC,CAAC;IAEFlB,GAAG,CAACmB,MAAM,CAAEC,OAAO,IAAK;MACtBA,OAAO,YAAPA,OAAO,CAAElB,KAAK,CAACmB,WAAW,CACxB,qBAAqB,EACrB5B,YAAY,CAAC6B,QAAQ,CAACR,QAAQ,EAAE,EAAE,CAAC,EAAEnB,SAAS,CAChD,CAAC;IACH,CAAC,CAAC;EACJ;AACF","ignoreList":[]}

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

@@ -0,0 +1,72 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-shapeIn'];
+}
+const shapes = {
+  diamond: {
+    start: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',
+    end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)'
+  },
+  window: {
+    start: 'inset(50% round 50% 50% 0% 0%)',
+    end: 'inset(-20% round 50% 50% 0% 0%)'
+  },
+  rectangle: {
+    start: 'inset(50%)',
+    end: 'inset(0%)'
+  },
+  circle: {
+    start: 'circle(0%)',
+    end: 'circle(75%)'
+  },
+  ellipse: {
+    start: 'ellipse(0% 0%)',
+    end: 'ellipse(75% 75%)'
+  }
+};
+export function web(options) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    shape = 'rectangle'
+  } = options.namedEffect;
+  const [fadeIn, shapeIn] = getNames(options);
+  const easing = options.easing || 'cubicInOut';
+  const {
+    start,
+    end
+  } = shapes[shape];
+  const custom = {
+    '--motion-shape-start': start,
+    '--motion-shape-end': end
+  };
+  return [{
+    ...options,
+    name: fadeIn,
+    easing: 'quadOut',
+    duration: options.duration * 0.8,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: shapeIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      clipPath: toKeyframeValue(custom, '--motion-shape-start', asWeb)
+    }, {
+      clipPath: toKeyframeValue(custom, '--motion-shape-end', asWeb)
+    }]
+  }];
+}
+//# sourceMappingURL=ShapeIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","shapes","diamond","start","end","window","rectangle","circle","ellipse","web","options","style","asWeb","shape","namedEffect","fadeIn","shapeIn","easing","custom","name","duration","keyframes","offset","opacity","clipPath"],"sources":["../../../../src/library/entrance/ShapeIn.ts"],"sourcesContent":["import type { Shape, ShapeIn, TimeAnimationOptions } from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-shapeIn'];\n}\n\nconst shapes: Record<Shape, { start: string; end: string }> = {\n  diamond: {\n    start: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',\n    end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',\n  },\n  window: {\n    start: 'inset(50% round 50% 50% 0% 0%)',\n    end: 'inset(-20% round 50% 50% 0% 0%)',\n  },\n  rectangle: { start: 'inset(50%)', end: 'inset(0%)' },\n  circle: { start: 'circle(0%)', end: 'circle(75%)' },\n  ellipse: { start: 'ellipse(0% 0%)', end: 'ellipse(75% 75%)' },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { shape = 'rectangle' } = options.namedEffect as ShapeIn;\n  const [fadeIn, shapeIn] = getNames(options);\n  const easing = options.easing || 'cubicInOut';\n\n  const { start, end } = shapes[shape];\n\n  const custom = {\n    '--motion-shape-start': start,\n    '--motion-shape-end': end,\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: shapeIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          clipPath: toKeyframeValue(custom, '--motion-shape-start', asWeb),\n        },\n        {\n          clipPath: toKeyframeValue(custom, '--motion-shape-end', asWeb),\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,gBAAgB,CAAC;AAC5C;AAEA,MAAMC,MAAqD,GAAG;EAC5DC,OAAO,EAAE;IACPC,KAAK,EAAE,6CAA6C;IACpDC,GAAG,EAAE;EACP,CAAC;EACDC,MAAM,EAAE;IACNF,KAAK,EAAE,gCAAgC;IACvCC,GAAG,EAAE;EACP,CAAC;EACDE,SAAS,EAAE;IAAEH,KAAK,EAAE,YAAY;IAAEC,GAAG,EAAE;EAAY,CAAC;EACpDG,MAAM,EAAE;IAAEJ,KAAK,EAAE,YAAY;IAAEC,GAAG,EAAE;EAAc,CAAC;EACnDI,OAAO,EAAE;IAAEL,KAAK,EAAE,gBAAgB;IAAEC,GAAG,EAAE;EAAmB;AAC9D,CAAC;AAED,OAAO,SAASK,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,GAAG;EAAY,CAAC,GAAGH,OAAO,CAACI,WAAsB;EAC9D,MAAM,CAACC,MAAM,EAAEC,OAAO,CAAC,GAAGjB,QAAQ,CAACW,OAAO,CAAC;EAC3C,MAAMO,MAAM,GAAGP,OAAO,CAACO,MAAM,IAAI,YAAY;EAE7C,MAAM;IAAEd,KAAK;IAAEC;EAAI,CAAC,GAAGH,MAAM,CAACY,KAAK,CAAC;EAEpC,MAAMK,MAAM,GAAG;IACb,sBAAsB,EAAEf,KAAK;IAC7B,oBAAoB,EAAEC;EACxB,CAAC;EAED,OAAO,CACL;IACE,GAAGM,OAAO;IACVS,IAAI,EAAEJ,MAAM;IACZE,MAAM,EAAE,SAAS;IACjBG,QAAQ,EAAEV,OAAO,CAACU,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,GAAGb,OAAO;IACVS,IAAI,EAAEH,OAAO;IACbC,MAAM;IACNC,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAEzB,oBAAoB;MAC5B2B,QAAQ,EAAE1B,eAAe,CAACoB,MAAM,EAAE,sBAAsB,EAAEN,KAAK;IACjE,CAAC,EACD;MACEY,QAAQ,EAAE1B,eAAe,CAACoB,MAAM,EAAE,oBAAoB,EAAEN,KAAK;IAC/D,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,45 @@
+import { getShuttersClipPaths, getEasing, toKeyframeValue, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+  return ['motion-shuttersIn'];
+}
+export function web(options) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    direction = 'right',
+    shutters = 12,
+    staggered = true
+  } = options.namedEffect;
+  const [shuttersIn] = getNames(options);
+  const {
+    clipStart,
+    clipEnd
+  } = getShuttersClipPaths(direction, shutters, staggered);
+  const custom = {
+    '--motion-shutters-start': clipStart,
+    '--motion-shutters-end': clipEnd
+  };
+  const easing = getEasing(options.easing || 'sineIn');
+  return [{
+    ...options,
+    easing,
+    name: shuttersIn,
+    custom,
+    keyframes: [{
+      offset: 0,
+      opacity: 0,
+      easing: 'step-end'
+    }, {
+      offset: INITIAL_FRAME_OFFSET,
+      opacity: 'var(--comp-opacity, 1)',
+      clipPath: toKeyframeValue(custom, '--motion-shutters-start', asWeb)
+    }, {
+      clipPath: toKeyframeValue(custom, '--motion-shutters-end', asWeb)
+    }]
+  }];
+}
+//# sourceMappingURL=ShuttersIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getShuttersClipPaths","getEasing","toKeyframeValue","INITIAL_FRAME_OFFSET","getNames","_","web","options","style","asWeb","direction","shutters","staggered","namedEffect","shuttersIn","clipStart","clipEnd","custom","easing","name","keyframes","offset","opacity","clipPath"],"sources":["../../../../src/library/entrance/ShuttersIn.ts"],"sourcesContent":["import { ShuttersIn, TimeAnimationOptions } from '../../types';\nimport {\n  getShuttersClipPaths,\n  getEasing,\n  toKeyframeValue,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-shuttersIn'];\n}\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    direction = 'right',\n    shutters = 12,\n    staggered = true,\n  } = options.namedEffect as ShuttersIn;\n  const [shuttersIn] = getNames(options);\n\n  const { clipStart, clipEnd } = getShuttersClipPaths(\n    direction,\n    shutters,\n    staggered,\n  );\n\n  const custom = {\n    '--motion-shutters-start': clipStart,\n    '--motion-shutters-end': clipEnd,\n  };\n\n  const easing = getEasing(options.easing || 'sineIn');\n\n  return [\n    {\n      ...options,\n      easing,\n      name: shuttersIn,\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          opacity: 0,\n          easing: 'step-end',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 'var(--comp-opacity, 1)',\n          clipPath: toKeyframeValue(custom, '--motion-shutters-start', asWeb),\n        },\n        {\n          clipPath: toKeyframeValue(custom, '--motion-shutters-end', asWeb),\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AACA,SACEA,oBAAoB,EACpBC,SAAS,EACTC,eAAe,EACfC,oBAAoB,QACf,aAAa;AAEpB,OAAO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,mBAAmB,CAAC;AAC9B;AAEA,OAAO,SAASC,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;IACJC,SAAS,GAAG,OAAO;IACnBC,QAAQ,GAAG,EAAE;IACbC,SAAS,GAAG;EACd,CAAC,GAAGL,OAAO,CAACM,WAAyB;EACrC,MAAM,CAACC,UAAU,CAAC,GAAGV,QAAQ,CAACG,OAAO,CAAC;EAEtC,MAAM;IAAEQ,SAAS;IAAEC;EAAQ,CAAC,GAAGhB,oBAAoB,CACjDU,SAAS,EACTC,QAAQ,EACRC,SACF,CAAC;EAED,MAAMK,MAAM,GAAG;IACb,yBAAyB,EAAEF,SAAS;IACpC,uBAAuB,EAAEC;EAC3B,CAAC;EAED,MAAME,MAAM,GAAGjB,SAAS,CAACM,OAAO,CAACW,MAAM,IAAI,QAAQ,CAAC;EAEpD,OAAO,CACL;IACE,GAAGX,OAAO;IACVW,MAAM;IACNC,IAAI,EAAEL,UAAU;IAChBG,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,CAAC;MACTC,OAAO,EAAE,CAAC;MACVJ,MAAM,EAAE;IACV,CAAC,EACD;MACEG,MAAM,EAAElB,oBAAoB;MAC5BmB,OAAO,EAAE,wBAAwB;MACjCC,QAAQ,EAAErB,eAAe,CAACe,MAAM,EAAE,yBAAyB,EAAER,KAAK;IACpE,CAAC,EACD;MACEc,QAAQ,EAAErB,eAAe,CAACe,MAAM,EAAE,uBAAuB,EAAER,KAAK;IAClE,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,133 @@
+import { getAdjustedDirection, getClipPolygonParams, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(options) {
+  const {
+    power
+  } = options.namedEffect;
+  return power !== 'hard' ? ['motion-slideIn', 'motion-fadeIn'] : ['motion-slideIn'];
+}
+const PARAM_MAP = {
+  top: {
+    dx: 0,
+    dy: -1,
+    clip: 'bottom'
+  },
+  right: {
+    dx: 1,
+    dy: 0,
+    clip: 'left'
+  },
+  bottom: {
+    dx: 0,
+    dy: 1,
+    clip: 'top'
+  },
+  left: {
+    dx: -1,
+    dy: 0,
+    clip: 'right'
+  }
+};
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+const INITIAL_TRANSLATE_MAP = {
+  soft: 0.2,
+  medium: 0.8,
+  hard: 1
+};
+export function web(options, dom) {
+  const animations = style(options);
+  prepare(options, dom);
+  return animations;
+}
+export function style(options) {
+  const {
+    direction = 'left',
+    power,
+    initialTranslate = 1
+  } = options.namedEffect;
+  const [slideIn, fadeIn] = getNames(options);
+  const easing = options.easing || 'cubicInOut';
+  const scale = power && INITIAL_TRANSLATE_MAP[power] || initialTranslate;
+  const minimum = 100 - scale * 100;
+  const start = getClipPolygonParams({
+    direction,
+    minimum
+  });
+  const clipEnd = getClipPolygonParams({
+    direction: 'initial'
+  });
+  const custom = {
+    '--motion-clip-start': start,
+    '--motion-translate-x': `${PARAM_MAP[direction].dx * 100}%`,
+    '--motion-translate-y': `${PARAM_MAP[direction].dy * 100}%`
+  };
+  const animations = [{
+    ...options,
+    name: slideIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      opacity: 'var(--comp-opacity, 1)',
+      transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-translate-x, -100%), var(--motion-translate-y, 0%))`,
+      clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`
+    }, {
+      transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(0px, 0px)',
+      clipPath: clipEnd
+    }]
+  }];
+  if (power !== 'hard') {
+    animations.push({
+      ...options,
+      easing: 'cubicInOut',
+      name: fadeIn,
+      // @ts-expect-error
+      custom: {},
+      keyframes: [
+      // @ts-expect-error
+      {
+        offset: 0,
+        opacity: 0
+      },
+      // @ts-expect-error
+      {
+        opacity: 'var(--comp-opacity, 1)'
+      }]
+    });
+  } else {
+    animations[0].keyframes.unshift({
+      offset: 0,
+      // @ts-expect-error
+      opacity: 0,
+      easing: 'step-end'
+    });
+  }
+  return animations;
+}
+export function prepare(options, dom) {
+  const {
+    direction = 'left',
+    power,
+    initialTranslate = 1
+  } = options.namedEffect;
+  const scale = power && INITIAL_TRANSLATE_MAP[power] || initialTranslate;
+  const minimum = 100 - scale * 100;
+  if (dom) {
+    let rotation = 0;
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      rotation = parseInt(getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg', 10);
+    });
+    dom.mutate(target => {
+      const adjustedDirection = getAdjustedDirection(DIRECTIONS, direction, rotation);
+      target == null || target.style.setProperty('--motion-clip-start', getClipPolygonParams({
+        direction: PARAM_MAP[adjustedDirection].clip,
+        minimum
+      }));
+      target == null || target.style.setProperty('--motion-translate-x', `${PARAM_MAP[adjustedDirection].dx * 100}%`);
+      target == null || target.style.setProperty('--motion-translate-y', `${PARAM_MAP[adjustedDirection].dy * 100}%`);
+    });
+  }
+}
+//# sourceMappingURL=SlideIn.js.map