@wix/motion 1.0.72 → 1.571.0

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

@@ -0,0 +1 @@
+{"version":3,"names":["getAdjustedDirection","getClipPolygonParams","INITIAL_FRAME_OFFSET","getNames","options","power","namedEffect","PARAM_MAP","top","dx","dy","clip","right","bottom","left","DIRECTIONS","INITIAL_TRANSLATE_MAP","soft","medium","hard","web","dom","animations","style","prepare","direction","initialTranslate","slideIn","fadeIn","easing","scale","minimum","start","clipEnd","custom","name","keyframes","offset","opacity","transform","clipPath","push","unshift","rotation","measure","target","parseInt","getComputedStyle","getPropertyValue","mutate","adjustedDirection","setProperty"],"sources":["../../../../src/library/entrance/SlideIn.ts"],"sourcesContent":["import type {\n  SlideIn,\n  AnimationExtraOptions,\n  DomApi,\n  TimeAnimationOptions,\n} from '../../types';\nimport {\n  Direction,\n  getAdjustedDirection,\n  getClipPolygonParams,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\n\nexport function getNames(options: TimeAnimationOptions) {\n  const { power } = options.namedEffect as SlideIn;\n  return power !== 'hard'\n    ? ['motion-slideIn', 'motion-fadeIn']\n    : ['motion-slideIn'];\n}\n\nconst PARAM_MAP = {\n  top: { dx: 0, dy: -1, clip: 'bottom' },\n  right: { dx: 1, dy: 0, clip: 'left' },\n  bottom: { dx: 0, dy: 1, clip: 'top' },\n  left: { dx: -1, dy: 0, clip: 'right' },\n};\n\nconst DIRECTIONS = [\n  'top',\n  'right',\n  'bottom',\n  'left',\n] as (keyof typeof PARAM_MAP)[];\n\nconst INITIAL_TRANSLATE_MAP = {\n  soft: 0.2,\n  medium: 0.8,\n  hard: 1,\n};\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  const animations = style(options);\n\n  prepare(options, dom);\n\n  return animations;\n}\n\nexport function style(options: TimeAnimationOptions) {\n  const {\n    direction = 'left',\n    power,\n    initialTranslate = 1,\n  } = options.namedEffect as SlideIn;\n  const [slideIn, fadeIn] = getNames(options);\n\n  const easing = options.easing || 'cubicInOut';\n  const scale = (power && INITIAL_TRANSLATE_MAP[power]) || initialTranslate;\n  const minimum = 100 - scale * 100;\n\n  const start = getClipPolygonParams({\n    direction,\n    minimum,\n  });\n  const clipEnd = getClipPolygonParams({ direction: 'initial' });\n\n  const custom = {\n    '--motion-clip-start': start,\n    '--motion-translate-x': `${PARAM_MAP[direction].dx * 100}%`,\n    '--motion-translate-y': `${PARAM_MAP[direction].dy * 100}%`,\n  };\n\n  const animations = [\n    {\n      ...options,\n      name: slideIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          opacity: 'var(--comp-opacity, 1)',\n          transform: `rotate(var(--comp-rotate-z, 0deg)) translate(var(--motion-translate-x, -100%), var(--motion-translate-y, 0%))`,\n          clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`,\n        },\n        {\n          transform: 'rotate(var(--comp-rotate-z, 0deg)) translate(0px, 0px)',\n          clipPath: clipEnd,\n        },\n      ],\n    },\n  ];\n\n  if (power !== 'hard') {\n    animations.push({\n      ...options,\n      easing: 'cubicInOut',\n      name: fadeIn,\n      // @ts-expect-error\n      custom: {},\n      keyframes: [\n        // @ts-expect-error\n        { offset: 0, opacity: 0 },\n        // @ts-expect-error\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    });\n  } else {\n    animations[0].keyframes.unshift({\n      offset: 0,\n      // @ts-expect-error\n      opacity: 0,\n      easing: 'step-end',\n    });\n  }\n\n  return animations;\n}\n\nexport function prepare(options: TimeAnimationOptions, dom?: DomApi) {\n  const {\n    direction = 'left',\n    power,\n    initialTranslate = 1,\n  } = options.namedEffect as SlideIn;\n\n  const scale = (power && INITIAL_TRANSLATE_MAP[power]) || initialTranslate;\n  const minimum = 100 - scale * 100;\n\n  if (dom) {\n    let rotation = 0;\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n      rotation = parseInt(\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0deg',\n        10,\n      );\n    });\n\n    dom.mutate((target) => {\n      const adjustedDirection = getAdjustedDirection(\n        DIRECTIONS,\n        direction,\n        rotation,\n      ) as (typeof DIRECTIONS)[number];\n\n      target?.style.setProperty(\n        '--motion-clip-start',\n        getClipPolygonParams({\n          direction: PARAM_MAP[adjustedDirection].clip as Direction,\n          minimum,\n        }),\n      );\n      target?.style.setProperty(\n        '--motion-translate-x',\n        `${PARAM_MAP[adjustedDirection].dx * 100}%`,\n      );\n      target?.style.setProperty(\n        '--motion-translate-y',\n        `${PARAM_MAP[adjustedDirection].dy * 100}%`,\n      );\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,62 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-spinIn'];
+}
+const SCALE_MAP = {
+  soft: 1,
+  medium: 0.6,
+  hard: 0
+};
+const DIRECTION_MAP = {
+  clockwise: -1,
+  'counter-clockwise': 1
+};
+export function web(options) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    direction = 'clockwise',
+    spins = 0.5,
+    initialScale = 0,
+    power
+  } = options.namedEffect;
+  const [fadeIn, spinIn] = getNames(options);
+  const easing = options.easing || 'cubicInOut';
+  const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;
+  const transformRotate = (DIRECTION_MAP[direction] > 0 ? 1 : -1) * 360 * spins;
+  const custom = {
+    '--motion-scale': `${scale}`,
+    '--motion-rotate': `${transformRotate}deg`
+  };
+  return [{
+    ...options,
+    name: fadeIn,
+    easing: 'cubicIn',
+    duration: options.duration * scale,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: spinIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      scale: toKeyframeValue(custom, '--motion-scale', asWeb),
+      rotate: toKeyframeValue(custom, '--motion-rotate', asWeb)
+    }, {
+      scale: '1',
+      rotate: `0deg`
+    }]
+  }];
+}
+//# sourceMappingURL=SpinIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","SCALE_MAP","soft","medium","hard","DIRECTION_MAP","clockwise","web","options","style","asWeb","direction","spins","initialScale","power","namedEffect","fadeIn","spinIn","easing","scale","transformRotate","custom","name","duration","keyframes","offset","opacity","rotate"],"sources":["../../../../src/library/entrance/SpinIn.ts"],"sourcesContent":["import type {\n  SpinIn,\n  AnimationExtraOptions,\n  TimeAnimationOptions,\n} from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-spinIn'];\n}\n\nconst SCALE_MAP = {\n  soft: 1,\n  medium: 0.6,\n  hard: 0,\n};\n\nconst DIRECTION_MAP = {\n  clockwise: -1,\n  'counter-clockwise': 1,\n};\n\nexport function web(options: TimeAnimationOptions & AnimationExtraOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const {\n    direction = 'clockwise',\n    spins = 0.5,\n    initialScale = 0,\n    power,\n  } = options.namedEffect as SpinIn;\n  const [fadeIn, spinIn] = getNames(options);\n\n  const easing = options.easing || 'cubicInOut';\n  const scale = typeof power !== 'undefined' ? SCALE_MAP[power] : initialScale;\n  const transformRotate = (DIRECTION_MAP[direction] > 0 ? 1 : -1) * 360 * spins;\n\n  const custom = {\n    '--motion-scale': `${scale}`,\n    '--motion-rotate': `${transformRotate}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      easing: 'cubicIn',\n      duration: options.duration! * scale,\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: spinIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          scale: toKeyframeValue(custom, '--motion-scale', asWeb),\n          rotate: toKeyframeValue(custom, '--motion-rotate', asWeb),\n        },\n        {\n          scale: '1',\n          rotate: `0deg`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AAKA,SAASA,oBAAoB,EAAEC,eAAe,QAAQ,aAAa;AAEnE,OAAO,SAASC,QAAQA,CAACC,CAAuB,EAAE;EAChD,OAAO,CAAC,eAAe,EAAE,eAAe,CAAC;AAC3C;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAE,CAAC;EACPC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,aAAa,GAAG;EACpBC,SAAS,EAAE,CAAC,CAAC;EACb,mBAAmB,EAAE;AACvB,CAAC;AAED,OAAO,SAASC,GAAGA,CAACC,OAAqD,EAAE;EACzE,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,WAAW;IACvBC,KAAK,GAAG,GAAG;IACXC,YAAY,GAAG,CAAC;IAChBC;EACF,CAAC,GAAGN,OAAO,CAACO,WAAqB;EACjC,MAAM,CAACC,MAAM,EAAEC,MAAM,CAAC,GAAGlB,QAAQ,CAACS,OAAO,CAAC;EAE1C,MAAMU,MAAM,GAAGV,OAAO,CAACU,MAAM,IAAI,YAAY;EAC7C,MAAMC,KAAK,GAAG,OAAOL,KAAK,KAAK,WAAW,GAAGb,SAAS,CAACa,KAAK,CAAC,GAAGD,YAAY;EAC5E,MAAMO,eAAe,GAAG,CAACf,aAAa,CAACM,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,GAAGC,KAAK;EAE7E,MAAMS,MAAM,GAAG;IACb,gBAAgB,EAAE,GAAGF,KAAK,EAAE;IAC5B,iBAAiB,EAAE,GAAGC,eAAe;EACvC,CAAC;EAED,OAAO,CACL;IACE,GAAGZ,OAAO;IACVc,IAAI,EAAEN,MAAM;IACZE,MAAM,EAAE,SAAS;IACjBK,QAAQ,EAAEf,OAAO,CAACe,QAAQ,GAAIJ,KAAK;IACnCE,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,GAAGlB,OAAO;IACVc,IAAI,EAAEL,MAAM;IACZC,MAAM;IACNG,MAAM;IACNG,SAAS,EAAE,CACT;MACEC,MAAM,EAAE5B,oBAAoB;MAC5BsB,KAAK,EAAErB,eAAe,CAACuB,MAAM,EAAE,gBAAgB,EAAEX,KAAK,CAAC;MACvDiB,MAAM,EAAE7B,eAAe,CAACuB,MAAM,EAAE,iBAAiB,EAAEX,KAAK;IAC1D,CAAC,EACD;MACES,KAAK,EAAE,GAAG;MACVQ,MAAM,EAAE;IACV,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,98 @@
+import { getAdjustedDirection, getClipPolygonParams, INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-tiltInRotate', 'motion-tiltInClip'];
+}
+const ROTATION_MAP = {
+  left: 30,
+  right: -30
+};
+const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+function getClipStart(rotateZ) {
+  const clipDirection = getAdjustedDirection(DIRECTIONS, 'top', rotateZ);
+  return getClipPolygonParams({
+    direction: clipDirection,
+    minimum: 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 {
+    direction = 'left'
+  } = options.namedEffect;
+  const [fadeIn, tiltInRotate, tiltInClip] = getNames(options);
+  const easing = options.easing || 'cubicOut';
+  const clipStart = getClipStart(0);
+  const rotationZ = ROTATION_MAP[direction];
+  const clipEnd = getClipPolygonParams({
+    direction: 'initial'
+  });
+  const translateZ = '(var(--motion-height, 200px) / 2)';
+  const clipCustom = {
+    '--motion-rotate-z': `${rotationZ}deg`,
+    '--motion-clip-start': clipStart
+  };
+  return [{
+    ...options,
+    name: fadeIn,
+    duration: options.duration * 0.2,
+    easing: 'cubicOut',
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: tiltInRotate,
+    easing,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      easing: 'step-end',
+      transform: 'perspective(800px)'
+    }, {
+      offset: INITIAL_FRAME_OFFSET,
+      transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(-90deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(0deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }, {
+    ...options,
+    name: tiltInClip,
+    easing,
+    composite: 'add',
+    duration: options.duration * 0.8,
+    custom: clipCustom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      clipPath: `var(--motion-clip-start, ${clipCustom['--motion-clip-start']})`,
+      transform: `rotateZ(${toKeyframeValue(clipCustom, '--motion-rotate-z', asWeb)})`
+    }, {
+      clipPath: clipEnd,
+      transform: `rotateZ(0deg)`
+    }]
+  }];
+}
+export function prepare(_, dom) {
+  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)));
+    });
+  }
+}
+//# sourceMappingURL=TiltIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getAdjustedDirection","getClipPolygonParams","INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","ROTATION_MAP","left","right","DIRECTIONS","getClipStart","rotateZ","clipDirection","direction","minimum","web","options","dom","prepare","style","asWeb","namedEffect","fadeIn","tiltInRotate","tiltInClip","easing","clipStart","rotationZ","clipEnd","translateZ","clipCustom","name","duration","custom","keyframes","offset","opacity","transform","composite","clipPath","rotation","measure","target","getComputedStyle","getPropertyValue","mutate","target_","setProperty","parseInt"],"sources":["../../../../src/library/entrance/TiltIn.ts"],"sourcesContent":["import {\n  getAdjustedDirection,\n  getClipPolygonParams,\n  INITIAL_FRAME_OFFSET,\n  toKeyframeValue,\n} from '../../utils';\nimport type { TiltIn, TimeAnimationOptions, DomApi } from '../../types';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-tiltInRotate', 'motion-tiltInClip'];\n}\n\nconst ROTATION_MAP = {\n  left: 30,\n  right: -30,\n};\n\nconst DIRECTIONS = [\n  'top',\n  'right',\n  'bottom',\n  'left',\n] as (keyof typeof ROTATION_MAP)[];\n\nfunction getClipStart(rotateZ: number) {\n  const clipDirection = getAdjustedDirection(\n    DIRECTIONS,\n    'top',\n    rotateZ,\n  ) as (typeof DIRECTIONS)[number];\n\n  return getClipPolygonParams({\n    direction: clipDirection,\n    minimum: 0,\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 = 'left' } = options.namedEffect as TiltIn;\n  const [fadeIn, tiltInRotate, tiltInClip] = getNames(options);\n\n  const easing = options.easing || 'cubicOut';\n  const clipStart = getClipStart(0);\n  const rotationZ = ROTATION_MAP[direction];\n  const clipEnd = getClipPolygonParams({ direction: 'initial' });\n  const translateZ = '(var(--motion-height, 200px) / 2)';\n\n  const clipCustom = {\n    '--motion-rotate-z': `${rotationZ}deg`,\n    '--motion-clip-start': clipStart,\n  };\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      duration: options.duration! * 0.2,\n      easing: 'cubicOut',\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: tiltInRotate,\n      easing,\n      custom: {},\n      keyframes: [\n        {\n          offset: 0,\n          easing: 'step-end',\n          transform: 'perspective(800px)',\n        },\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(-90deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `perspective(800px) translateZ(calc(${translateZ} * -1)) rotateX(0deg) translateZ(calc${translateZ}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n    {\n      ...options,\n      name: tiltInClip,\n      easing,\n      composite: 'add' as const,\n      duration: options.duration! * 0.8,\n      custom: clipCustom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          clipPath: `var(--motion-clip-start, ${clipCustom['--motion-clip-start']})`,\n          transform: `rotateZ(${toKeyframeValue(\n            clipCustom,\n            '--motion-rotate-z',\n            asWeb,\n          )})`,\n        },\n        {\n          clipPath: clipEnd,\n          transform: `rotateZ(0deg)`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(_: TimeAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let rotation = '0deg';\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\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)),\n      );\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,82 @@
+import { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-turnIn'];
+}
+const EASING_MAP = {
+  soft: 'cubicInOut',
+  medium: 'quintInOut',
+  hard: 'backOut'
+};
+const DIRECTION_TO_TRANSFORM_MAP = {
+  'top-left': {
+    angle: -50,
+    x: -50,
+    y: -50
+  },
+  'top-right': {
+    angle: 50,
+    x: 50,
+    y: -50
+  },
+  'bottom-right': {
+    angle: 50,
+    x: 50,
+    y: 50
+  },
+  'bottom-left': {
+    angle: -50,
+    x: -50,
+    y: 50
+  }
+};
+export function web(options) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    direction = 'top-left',
+    power
+  } = options.namedEffect;
+  const [fadeIn, turnIn] = getNames(options);
+  const easing = power && EASING_MAP[power] ? EASING_MAP[power] : options.easing || 'backOut';
+  const {
+    x,
+    y
+  } = DIRECTION_TO_TRANSFORM_MAP[direction];
+  const transformRotate = DIRECTION_TO_TRANSFORM_MAP[direction].angle;
+  const custom = {
+    '--motion-origin': `${x}%, ${y}%`,
+    '--motion-origin-invert': `${-x}%, ${-y}%`,
+    '--motion-rotate-z': `${transformRotate}deg`
+  };
+  const origin = toKeyframeValue(custom, '--motion-origin', asWeb);
+  const invertedOrigin = toKeyframeValue(custom, '--motion-origin-invert', asWeb);
+  return [{
+    ...options,
+    name: fadeIn,
+    duration: options.duration * 0.6,
+    easing: 'sineIn',
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    name: turnIn,
+    easing,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      transform: `translate(${origin}) rotate(${toKeyframeValue(custom, '--motion-rotate-z', asWeb)}) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `translate(${origin}) rotate(0deg) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+}
+//# sourceMappingURL=TurnIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["INITIAL_FRAME_OFFSET","toKeyframeValue","getNames","_","EASING_MAP","soft","medium","hard","DIRECTION_TO_TRANSFORM_MAP","angle","x","y","web","options","style","asWeb","direction","power","namedEffect","fadeIn","turnIn","easing","transformRotate","custom","origin","invertedOrigin","name","duration","keyframes","offset","opacity","transform"],"sources":["../../../../src/library/entrance/TurnIn.ts"],"sourcesContent":["import type {\n  TurnIn,\n  TimeAnimationOptions,\n  EffectFourCorners,\n} from '../../types';\nimport { INITIAL_FRAME_OFFSET, toKeyframeValue } from '../../utils';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-turnIn'];\n}\n\nconst EASING_MAP = {\n  soft: 'cubicInOut',\n  medium: 'quintInOut',\n  hard: 'backOut',\n};\n\nconst DIRECTION_TO_TRANSFORM_MAP: Record<\n  EffectFourCorners,\n  {\n    x: number;\n    y: number;\n    angle?: number;\n  }\n> = {\n  'top-left': {\n    angle: -50,\n    x: -50,\n    y: -50,\n  },\n  'top-right': {\n    angle: 50,\n    x: 50,\n    y: -50,\n  },\n  'bottom-right': {\n    angle: 50,\n    x: 50,\n    y: 50,\n  },\n  'bottom-left': {\n    angle: -50,\n    x: -50,\n    y: 50,\n  },\n};\n\nexport function web(options: TimeAnimationOptions) {\n  return style(options, true);\n}\n\nexport function style(options: TimeAnimationOptions, asWeb = false) {\n  const { direction = 'top-left', power } = options.namedEffect as TurnIn;\n  const [fadeIn, turnIn] = getNames(options);\n\n  const easing =\n    power && EASING_MAP[power]\n      ? EASING_MAP[power]\n      : options.easing || 'backOut';\n  const { x, y } = DIRECTION_TO_TRANSFORM_MAP[direction];\n  const transformRotate = DIRECTION_TO_TRANSFORM_MAP[direction].angle;\n\n  const custom = {\n    '--motion-origin': `${x}%, ${y}%`,\n    '--motion-origin-invert': `${-x}%, ${-y}%`,\n    '--motion-rotate-z': `${transformRotate}deg`,\n  };\n\n  const origin = toKeyframeValue(custom, '--motion-origin', asWeb);\n  const invertedOrigin = toKeyframeValue(\n    custom,\n    '--motion-origin-invert',\n    asWeb,\n  );\n\n  return [\n    {\n      ...options,\n      name: fadeIn,\n      duration: options.duration! * 0.6,\n      easing: 'sineIn',\n      custom: {},\n      keyframes: [\n        { offset: 0, opacity: 0 },\n        { opacity: 'var(--comp-opacity, 1)' },\n      ],\n    },\n    {\n      ...options,\n      name: turnIn,\n      easing,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `translate(${origin}) rotate(${toKeyframeValue(\n            custom,\n            '--motion-rotate-z',\n            asWeb,\n          )}) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `translate(${origin}) rotate(0deg) translate(${invertedOrigin}) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,108 @@
+import { getClipPolygonParams, getAdjustedDirection, INITIAL_FRAME_OFFSET } from '../../utils';
+export function getNames(_) {
+  return ['motion-fadeIn', 'motion-winkInClip', 'motion-winkInRotate'];
+}
+const PARAM_MAP = {
+  vertical: {
+    scaleY: 0,
+    scaleX: 1
+  },
+  horizontal: {
+    scaleY: 1,
+    scaleX: 0
+  }
+};
+const DIRECTIONS = ['vertical', 'horizontal'];
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options);
+}
+export function style(options) {
+  const {
+    direction = 'horizontal'
+  } = options.namedEffect;
+  const [fadeIn, winkInClip, winkInRotate] = getNames(options);
+  const adjustedDirection = getAdjustedDirection(DIRECTIONS, direction, 0);
+  const {
+    scaleX,
+    scaleY
+  } = PARAM_MAP[adjustedDirection];
+  const easing = options.easing || 'quintInOut';
+  const start = getClipPolygonParams({
+    direction,
+    minimum: 100
+  });
+  const end = getClipPolygonParams({
+    direction: 'initial'
+  });
+  const custom = {
+    '--motion-scale-x': scaleX,
+    '--motion-scale-y': scaleY,
+    '--motion-clip-start': start
+  };
+  return [{
+    ...options,
+    easing: 'quadOut',
+    name: fadeIn,
+    custom: {},
+    keyframes: [{
+      offset: 0,
+      opacity: 0
+    }, {
+      opacity: 'var(--comp-opacity, 1)'
+    }]
+  }, {
+    ...options,
+    easing,
+    name: winkInClip,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`
+    }, {
+      clipPath: end
+    }]
+  }, {
+    ...options,
+    duration: options.duration * 0.85,
+    easing,
+    name: winkInRotate,
+    custom,
+    keyframes: [{
+      offset: INITIAL_FRAME_OFFSET,
+      transform: `rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, ${custom['--motion-scale-x']}), var(--motion-scale-y, ${custom['--motion-scale-y']}))`
+    }, {
+      transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)'
+    }]
+  }];
+}
+export function prepare(options, dom) {
+  const {
+    direction = 'horizontal'
+  } = options.namedEffect;
+  if (dom) {
+    let scale = PARAM_MAP.horizontal;
+    let rotatedClip = getClipPolygonParams({
+      direction: 'horizontal',
+      minimum: 100
+    });
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0';
+      const rotatedDirection = getAdjustedDirection(DIRECTIONS, direction, parseInt(rotation, 10));
+      scale = PARAM_MAP[rotatedDirection];
+      rotatedClip = getClipPolygonParams({
+        direction: rotatedDirection,
+        minimum: 100
+      });
+    });
+    dom.mutate(target => {
+      target == null || target.style.setProperty('--motion-clip-start', rotatedClip);
+      target == null || target.style.setProperty('--motion-scale-x', `${scale.scaleX}`);
+      target == null || target.style.setProperty('--motion-scale-y', `${scale.scaleY}`);
+    });
+  }
+}
+//# sourceMappingURL=WinkIn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getClipPolygonParams","getAdjustedDirection","INITIAL_FRAME_OFFSET","getNames","_","PARAM_MAP","vertical","scaleY","scaleX","horizontal","DIRECTIONS","web","options","dom","prepare","style","direction","namedEffect","fadeIn","winkInClip","winkInRotate","adjustedDirection","easing","start","minimum","end","custom","name","keyframes","offset","opacity","clipPath","duration","transform","scale","rotatedClip","measure","target","rotation","getComputedStyle","getPropertyValue","rotatedDirection","parseInt","mutate","setProperty"],"sources":["../../../../src/library/entrance/WinkIn.ts"],"sourcesContent":["import {\n  getClipPolygonParams,\n  getAdjustedDirection,\n  INITIAL_FRAME_OFFSET,\n} from '../../utils';\nimport type { WinkIn, TimeAnimationOptions, DomApi } from '../../types';\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-fadeIn', 'motion-winkInClip', 'motion-winkInRotate'];\n}\n\nconst PARAM_MAP = {\n  vertical: { scaleY: 0, scaleX: 1 },\n  horizontal: { scaleY: 1, scaleX: 0 },\n};\nconst DIRECTIONS = ['vertical', 'horizontal'] as (keyof typeof PARAM_MAP)[];\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 { direction = 'horizontal' } = options.namedEffect as WinkIn;\n  const [fadeIn, winkInClip, winkInRotate] = getNames(options);\n\n  const adjustedDirection = getAdjustedDirection(\n    DIRECTIONS,\n    direction,\n    0,\n  ) as (typeof DIRECTIONS)[number];\n  const { scaleX, scaleY } = PARAM_MAP[adjustedDirection];\n  const easing = options.easing || 'quintInOut';\n\n  const start = getClipPolygonParams({ direction, minimum: 100 });\n  const end = getClipPolygonParams({ direction: 'initial' });\n\n  const custom = {\n    '--motion-scale-x': scaleX,\n    '--motion-scale-y': scaleY,\n    '--motion-clip-start': start,\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: winkInClip,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          clipPath: `var(--motion-clip-start, ${custom['--motion-clip-start']})`,\n        },\n        {\n          clipPath: end,\n        },\n      ],\n    },\n    {\n      ...options,\n      duration: options.duration! * 0.85,\n      easing,\n      name: winkInRotate,\n      custom,\n      keyframes: [\n        {\n          offset: INITIAL_FRAME_OFFSET,\n          transform: `rotate(var(--comp-rotate-z, 0deg)) scale(var(--motion-scale-x, ${custom['--motion-scale-x']}), var(--motion-scale-y, ${custom['--motion-scale-y']}))`,\n        },\n        {\n          transform: 'rotate(var(--comp-rotate-z, 0deg)) scale(1, 1)',\n        },\n      ],\n    },\n  ];\n}\n\nexport function prepare(options: TimeAnimationOptions, dom?: DomApi) {\n  const { direction = 'horizontal' } = options.namedEffect as WinkIn;\n\n  if (dom) {\n    let scale = PARAM_MAP.horizontal;\n    let rotatedClip = getClipPolygonParams({\n      direction: 'horizontal',\n      minimum: 100,\n    });\n\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rotation =\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0';\n      const rotatedDirection = getAdjustedDirection(\n        DIRECTIONS,\n        direction,\n        parseInt(rotation, 10),\n      ) as (typeof DIRECTIONS)[number];\n      scale = PARAM_MAP[rotatedDirection];\n      rotatedClip = getClipPolygonParams({\n        direction: rotatedDirection,\n        minimum: 100,\n      });\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-clip-start', rotatedClip);\n      target?.style.setProperty('--motion-scale-x', `${scale.scaleX}`);\n      target?.style.setProperty('--motion-scale-y', `${scale.scaleY}`);\n    });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,49 @@
+import * as ArcIn from './ArcIn';
+import * as BlurIn from './BlurIn';
+import * as ShuttersIn from './ShuttersIn';
+import * as BounceIn from './BounceIn';
+import * as CurveIn from './CurveIn';
+import * as CircleIn from './CircleIn';
+import * as DropIn from './DropIn';
+import * as ExpandIn from './ExpandIn';
+import * as FadeIn from './FadeIn';
+import * as FlipIn from './FlipIn';
+import * as FloatIn from './FloatIn';
+import * as FoldIn from './FoldIn';
+import * as GlideIn from './GlideIn';
+import * as GlitchIn from './GlitchIn';
+import * as GrowIn from './GrowIn';
+import * as PunchIn from './PunchIn';
+import * as ShapeIn from './ShapeIn';
+import * as RevealIn from './RevealIn';
+import * as SlideIn from './SlideIn';
+import * as SpinIn from './SpinIn';
+import * as TiltIn from './TiltIn';
+import * as TurnIn from './TurnIn';
+import * as WinkIn from './WinkIn';
+export const entranceAnimations = {
+  ArcIn,
+  BlurIn,
+  ShuttersIn,
+  BounceIn,
+  CurveIn,
+  CircleIn,
+  DropIn,
+  ExpandIn,
+  FadeIn,
+  FlipIn,
+  FloatIn,
+  FoldIn,
+  GlideIn,
+  GlitchIn,
+  GrowIn,
+  PunchIn,
+  ShapeIn,
+  RevealIn,
+  SlideIn,
+  SpinIn,
+  TiltIn,
+  TurnIn,
+  WinkIn
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ArcIn","BlurIn","ShuttersIn","BounceIn","CurveIn","CircleIn","DropIn","ExpandIn","FadeIn","FlipIn","FloatIn","FoldIn","GlideIn","GlitchIn","GrowIn","PunchIn","ShapeIn","RevealIn","SlideIn","SpinIn","TiltIn","TurnIn","WinkIn","entranceAnimations"],"sources":["../../../../src/library/entrance/index.ts"],"sourcesContent":["import * as ArcIn from './ArcIn';\nimport * as BlurIn from './BlurIn';\nimport * as ShuttersIn from './ShuttersIn';\nimport * as BounceIn from './BounceIn';\nimport * as CurveIn from './CurveIn';\nimport * as CircleIn from './CircleIn';\nimport * as DropIn from './DropIn';\nimport * as ExpandIn from './ExpandIn';\nimport * as FadeIn from './FadeIn';\nimport * as FlipIn from './FlipIn';\nimport * as FloatIn from './FloatIn';\nimport * as FoldIn from './FoldIn';\nimport * as GlideIn from './GlideIn';\nimport * as GlitchIn from './GlitchIn';\nimport * as GrowIn from './GrowIn';\nimport * as PunchIn from './PunchIn';\nimport * as ShapeIn from './ShapeIn';\nimport * as RevealIn from './RevealIn';\nimport * as SlideIn from './SlideIn';\nimport * as SpinIn from './SpinIn';\nimport * as TiltIn from './TiltIn';\nimport * as TurnIn from './TurnIn';\nimport * as WinkIn from './WinkIn';\nimport type { EntranceAnimations } from '../../types';\n\nexport const entranceAnimations: EntranceAnimations = {\n  ArcIn,\n  BlurIn,\n  ShuttersIn,\n  BounceIn,\n  CurveIn,\n  CircleIn,\n  DropIn,\n  ExpandIn,\n  FadeIn,\n  FlipIn,\n  FloatIn,\n  FoldIn,\n  GlideIn,\n  GlitchIn,\n  GrowIn,\n  PunchIn,\n  ShapeIn,\n  RevealIn,\n  SlideIn,\n  SpinIn,\n  TiltIn,\n  TurnIn,\n  WinkIn,\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,SAAS;AAChC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,QAAQ,MAAM,YAAY;AACtC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,QAAQ,MAAM,YAAY;AACtC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,QAAQ,MAAM,YAAY;AACtC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,QAAQ,MAAM,YAAY;AACtC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,QAAQ,MAAM,YAAY;AACtC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAGlC,OAAO,MAAMC,kBAAsC,GAAG;EACpDvB,KAAK;EACLC,MAAM;EACNC,UAAU;EACVC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC,QAAQ;EACRC,MAAM;EACNC,MAAM;EACNC,OAAO;EACPC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,MAAM;EACNC,OAAO;EACPC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,MAAM;EACNC;AACF,CAAC","ignoreList":[]}

package/dist/esm/library/entrance/test/testUtils.js

@@ -0,0 +1,5 @@
+export const baseMockOptions = {
+  id: '1',
+  type: 'TimeAnimationOptions'
+};
+//# sourceMappingURL=testUtils.js.map

package/dist/esm/library/entrance/test/testUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["baseMockOptions","id","type"],"sources":["../../../../../src/library/entrance/test/testUtils.ts"],"sourcesContent":["import type { TimeAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: TimeAnimationOptions = {\n  id: '1',\n  type: 'TimeAnimationOptions',\n};\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,EAAE,EAAE,GAAG;EACPC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}

package/dist/esm/library/mouse/AiryMouse.js

@@ -0,0 +1,73 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+  soft: {
+    angle: 10,
+    easing: 'easeOut'
+  },
+  medium: {
+    angle: 50,
+    easing: 'easeOut'
+  },
+  hard: {
+    angle: 85,
+    easing: 'easeOut'
+  }
+};
+class AiryMouseAnimation extends CustomMouse {
+  progress(_ref) {
+    let {
+      x: progressX,
+      y: progressY
+    } = _ref;
+    let translateX = 0;
+    let translateY = 0;
+    const {
+      distance,
+      invert,
+      angle,
+      axis
+    } = this.options;
+    if (axis !== 'vertical') {
+      translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+    }
+    if (axis !== 'horizontal') {
+      translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+    }
+
+    // if progress  === 0, rotate === angle, if progress === 0.5, rotate === 0, if progress === 1, rotate === angle
+    const rotate = mapRange(0, 1, -angle, angle, progressX) * invert;
+    const units = getCssUnits(distance.type);
+    this.target.style.transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) rotate(calc(${rotate}deg + var(--comp-rotate-z, 0deg)))`;
+  }
+  cancel() {
+    this.target.style.transform = '';
+    this.target.style.transition = '';
+  }
+}
+export default function create(options) {
+  const {
+    transitionDuration,
+    transitionEasing
+  } = options;
+  const {
+    power,
+    inverted = false,
+    distance = {
+      value: 200,
+      type: 'px'
+    },
+    angle = 30,
+    axis = 'both'
+  } = options.namedEffect;
+  const invert = inverted ? -1 : 1;
+  const animationOptions = {
+    transition: transitionDuration ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}` : '',
+    invert,
+    distance,
+    angle: power ? paramsMap[power].angle : angle,
+    axis
+  };
+  return target => new AiryMouseAnimation(target, animationOptions);
+}
+//# sourceMappingURL=AiryMouse.js.map

package/dist/esm/library/mouse/AiryMouse.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getCssUnits","getMouseTransitionEasing","mapRange","CustomMouse","paramsMap","soft","angle","easing","medium","hard","AiryMouseAnimation","progress","_ref","x","progressX","y","progressY","translateX","translateY","distance","invert","axis","options","value","rotate","units","type","target","style","transform","cancel","transition","create","transitionDuration","transitionEasing","power","inverted","namedEffect","animationOptions"],"sources":["../../../../src/library/mouse/AiryMouse.ts"],"sourcesContent":["import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';\nimport type {\n  ScrubAnimationOptions,\n  AiryMouse,\n  AnimationExtraOptions,\n  Progress,\n  ScrubTransitionEasing,\n  EffectPower,\n} from '../../types';\nimport { CustomMouse } from './CustomMouse';\n\nconst paramsMap: Record<\n  EffectPower,\n  { angle: number; easing: ScrubTransitionEasing }\n> = {\n  soft: { angle: 10, easing: 'easeOut' },\n  medium: { angle: 50, easing: 'easeOut' },\n  hard: { angle: 85, easing: 'easeOut' },\n};\n\nclass AiryMouseAnimation extends CustomMouse {\n  progress({ x: progressX, y: progressY }: Progress) {\n    let translateX = 0;\n    let translateY = 0;\n    const { distance, invert, angle, axis } = this.options;\n\n    if (axis !== 'vertical') {\n      translateX =\n        mapRange(0, 1, -distance.value, distance.value, progressX) * invert;\n    }\n    if (axis !== 'horizontal') {\n      translateY =\n        mapRange(0, 1, -distance.value, distance.value, progressY) * invert;\n    }\n\n    // if progress  === 0, rotate === angle, if progress === 0.5, rotate === 0, if progress === 1, rotate === angle\n    const rotate = mapRange(0, 1, -angle, angle, progressX) * invert;\n    const units = getCssUnits(distance.type);\n\n    this.target.style.transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) rotate(calc(${rotate}deg + var(--comp-rotate-z, 0deg)))`;\n  }\n\n  cancel() {\n    this.target.style.transform = '';\n    this.target.style.transition = '';\n  }\n}\n\nexport default function create(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n) {\n  const { transitionDuration, transitionEasing } = options;\n  const {\n    power,\n    inverted = false,\n    distance = { value: 200, type: 'px' },\n    angle = 30,\n    axis = 'both',\n  } = options.namedEffect as AiryMouse;\n  const invert = inverted ? -1 : 1;\n  const animationOptions = {\n    transition: transitionDuration\n      ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(\n          power ? paramsMap[power].easing : transitionEasing,\n        )}`\n      : '',\n    invert,\n    distance,\n    angle: power ? paramsMap[power].angle : angle,\n    axis,\n  };\n\n  return (target: HTMLElement) =>\n    new AiryMouseAnimation(target, animationOptions);\n}\n"],"mappings":"AAAA,SAASA,WAAW,EAAEC,wBAAwB,EAAEC,QAAQ,QAAQ,aAAa;AAS7E,SAASC,WAAW,QAAQ,eAAe;AAE3C,MAAMC,SAGL,GAAG;EACFC,IAAI,EAAE;IAAEC,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EACtCC,MAAM,EAAE;IAAEF,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EACxCE,IAAI,EAAE;IAAEH,KAAK,EAAE,EAAE;IAAEC,MAAM,EAAE;EAAU;AACvC,CAAC;AAED,MAAMG,kBAAkB,SAASP,WAAW,CAAC;EAC3CQ,QAAQA,CAAAC,IAAA,EAA2C;IAAA,IAA1C;MAAEC,CAAC,EAAEC,SAAS;MAAEC,CAAC,EAAEC;IAAoB,CAAC,GAAAJ,IAAA;IAC/C,IAAIK,UAAU,GAAG,CAAC;IAClB,IAAIC,UAAU,GAAG,CAAC;IAClB,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAEd,KAAK;MAAEe;IAAK,CAAC,GAAG,IAAI,CAACC,OAAO;IAEtD,IAAID,IAAI,KAAK,UAAU,EAAE;MACvBJ,UAAU,GACRf,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAACiB,QAAQ,CAACI,KAAK,EAAEJ,QAAQ,CAACI,KAAK,EAAET,SAAS,CAAC,GAAGM,MAAM;IACvE;IACA,IAAIC,IAAI,KAAK,YAAY,EAAE;MACzBH,UAAU,GACRhB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAACiB,QAAQ,CAACI,KAAK,EAAEJ,QAAQ,CAACI,KAAK,EAAEP,SAAS,CAAC,GAAGI,MAAM;IACvE;;IAEA;IACA,MAAMI,MAAM,GAAGtB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAACI,KAAK,EAAEA,KAAK,EAAEQ,SAAS,CAAC,GAAGM,MAAM;IAChE,MAAMK,KAAK,GAAGzB,WAAW,CAACmB,QAAQ,CAACO,IAAI,CAAC;IAExC,IAAI,CAACC,MAAM,CAACC,KAAK,CAACC,SAAS,GAAG,cAAcZ,UAAU,GAAGQ,KAAK,gBAAgBP,UAAU,GAAGO,KAAK,iBAAiBD,MAAM,oCAAoC;EAC7J;EAEAM,MAAMA,CAAA,EAAG;IACP,IAAI,CAACH,MAAM,CAACC,KAAK,CAACC,SAAS,GAAG,EAAE;IAChC,IAAI,CAACF,MAAM,CAACC,KAAK,CAACG,UAAU,GAAG,EAAE;EACnC;AACF;AAEA,eAAe,SAASC,MAAMA,CAC5BV,OAAsD,EACtD;EACA,MAAM;IAAEW,kBAAkB;IAAEC;EAAiB,CAAC,GAAGZ,OAAO;EACxD,MAAM;IACJa,KAAK;IACLC,QAAQ,GAAG,KAAK;IAChBjB,QAAQ,GAAG;MAAEI,KAAK,EAAE,GAAG;MAAEG,IAAI,EAAE;IAAK,CAAC;IACrCpB,KAAK,GAAG,EAAE;IACVe,IAAI,GAAG;EACT,CAAC,GAAGC,OAAO,CAACe,WAAwB;EACpC,MAAMjB,MAAM,GAAGgB,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;EAChC,MAAME,gBAAgB,GAAG;IACvBP,UAAU,EAAEE,kBAAkB,GAC1B,aAAaA,kBAAkB,MAAMhC,wBAAwB,CAC3DkC,KAAK,GAAG/B,SAAS,CAAC+B,KAAK,CAAC,CAAC5B,MAAM,GAAG2B,gBACpC,CAAC,EAAE,GACH,EAAE;IACNd,MAAM;IACND,QAAQ;IACRb,KAAK,EAAE6B,KAAK,GAAG/B,SAAS,CAAC+B,KAAK,CAAC,CAAC7B,KAAK,GAAGA,KAAK;IAC7Ce;EACF,CAAC;EAED,OAAQM,MAAmB,IACzB,IAAIjB,kBAAkB,CAACiB,MAAM,EAAEW,gBAAgB,CAAC;AACpD","ignoreList":[]}

package/dist/esm/library/mouse/BlobMouse.js

@@ -0,0 +1,67 @@
+import { getCssUnits, getMouseTransitionEasing, mapRange } from '../../utils';
+import { CustomMouse } from './CustomMouse';
+const paramsMap = {
+  soft: {
+    scale: 1.2,
+    easing: 'easeOut'
+  },
+  medium: {
+    scale: 1.6,
+    easing: 'easeOut'
+  },
+  hard: {
+    scale: 2.4,
+    easing: 'easeOut'
+  }
+};
+class BlobMouseAnimation extends CustomMouse {
+  progress(_ref) {
+    let {
+      x: progressX,
+      y: progressY
+    } = _ref;
+    const {
+      distance,
+      scale,
+      invert
+    } = this.options;
+    const translateX = mapRange(0, 1, -distance.value, distance.value, progressX) * invert;
+    const translateY = mapRange(0, 1, -distance.value, distance.value, progressY) * invert;
+
+    // if progressX === 0 || progressX === 1, scaleX === scale, if progressX === 0.5, scaleX === 1
+    const scaleX = progressX < 0.5 ? mapRange(0, 0.5, scale, 1, progressX) : mapRange(0.5, 1, 1, scale, progressX);
+
+    // if progressY === 0 || progressY === 1, scaleY === scale, if progressY === 0.5, scaleY === 1
+    const scaleY = progressY < 0.5 ? mapRange(0, 0.5, scale, 1, progressY) : mapRange(0.5, 1, 1, scale, progressY);
+    const units = getCssUnits(distance.type);
+    this.target.style.transform = `translateX(${translateX}${units}) translateY(${translateY}${units}) scale(${scaleX}, ${scaleY}) rotate(var(--comp-rotate-z, 0deg))`;
+  }
+  cancel() {
+    this.target.style.transform = '';
+    this.target.style.transition = '';
+  }
+}
+export default function create(options) {
+  const {
+    transitionDuration,
+    transitionEasing
+  } = options;
+  const {
+    power,
+    inverted = false,
+    distance = {
+      value: 200,
+      type: 'px'
+    },
+    scale = 1.4
+  } = options.namedEffect;
+  const invert = inverted ? -1 : 1;
+  const animationOptions = {
+    transition: transitionDuration ? `transform ${transitionDuration}ms ${getMouseTransitionEasing(power ? paramsMap[power].easing : transitionEasing)}` : '',
+    invert,
+    distance,
+    scale: power ? paramsMap[power].scale : scale
+  };
+  return target => new BlobMouseAnimation(target, animationOptions);
+}
+//# sourceMappingURL=BlobMouse.js.map