@wix/motion 1.0.73 → 1.572.0

package/dist/cjs/library/ongoing/Breathe.js

@@ -0,0 +1,124 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+const DIRECTION_MAP = {
+  vertical: {
+    x: 0,
+    y: 1,
+    z: 0
+  },
+  horizontal: {
+    x: 1,
+    y: 0,
+    z: 0
+  },
+  center: {
+    x: 0,
+    y: 0,
+    z: 1
+  }
+};
+const FACTORS_SEQUENCE = [{
+  translateFactor: 1,
+  timeFactor: 0.25
+}, {
+  translateFactor: -1,
+  timeFactor: 0.5
+}, {
+  translateFactor: 1,
+  timeFactor: 0.5
+}, {
+  translateFactor: -0.7,
+  timeFactor: 0.5
+}, {
+  translateFactor: 0.6,
+  timeFactor: 0.3333
+}];
+function web(options, _dom) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    direction = 'vertical',
+    distance = {
+      value: 25,
+      type: 'px'
+    }
+  } = options.namedEffect;
+  const easing = options.easing || 'sineInOut';
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const totalDurationWithDelay = 3.2 * duration + delay;
+  const timingFactor = (0, _utils.getTimingFactor)(duration, totalDurationWithDelay - duration);
+  const [name] = getNames(options);
+  const {
+    x,
+    y,
+    z
+  } = DIRECTION_MAP[direction];
+  const ease = (0, _utils.getEasingFamily)(easing);
+  const perspectiveTransform = direction === 'center' ? 'perspective(800px)' : '';
+
+  // Create CSS custom properties for the Breathe configuration
+  const custom = {
+    '--motion-breathe-perspective': perspectiveTransform,
+    '--motion-breathe-distance': `${distance.value}${(0, _utils.getCssUnits)(distance.type || 'px')}`,
+    '--motion-breathe-x': x,
+    '--motion-breathe-y': y,
+    '--motion-breathe-z': z
+  };
+  const breatheX = `${(0, _utils.toKeyframeValue)(custom, '--motion-breathe-x', asWeb)}`;
+  const breatheY = `${(0, _utils.toKeyframeValue)(custom, '--motion-breathe-y', asWeb)}`;
+  const breatheZ = `${(0, _utils.toKeyframeValue)(custom, '--motion-breathe-z', asWeb)}`;
+  const breathePerspective = `${(0, _utils.toKeyframeValue)(custom, '--motion-breathe-perspective', asWeb, ' ')}`;
+  const breatheDistance = `${(0, _utils.toKeyframeValue)(custom, '--motion-breathe-distance', asWeb)}`;
+  let currentOffset = 0;
+
+  // in case a delay is applied, animate a different sequence which decays to a stop
+  const keyframes = delay ? FACTORS_SEQUENCE.map(({
+    translateFactor,
+    timeFactor
+  }) => {
+    const keyframeOffset = currentOffset + timeFactor * timingFactor;
+    currentOffset = keyframeOffset;
+    const distancePart = `${breatheDistance} * ${translateFactor}`;
+    return {
+      offset: keyframeOffset,
+      easing: (0, _utils.getEasing)(ease.inOut),
+      transform: `${breathePerspective} translate3d(calc(${breatheX} * ${distancePart}), calc(${breatheY} * ${distancePart}), calc(${breatheZ} * ${distancePart})) rotateZ(var(--comp-rotate-z, 0deg))`
+    };
+  }) : [{
+    offset: 0.25,
+    easing: (0, _utils.getEasing)(ease.inOut),
+    transform: `${breathePerspective} translate3d(calc(${breatheX} * ${breatheDistance}), calc(${breatheY} * ${breatheDistance}), calc(${breatheZ} * ${breatheDistance})) rotateZ(var(--comp-rotate-z, 0deg))`
+  }, {
+    offset: 0.75,
+    easing: (0, _utils.getEasing)(ease.in),
+    transform: `${breathePerspective} translate3d(calc(${breatheX} * -1 * ${breatheDistance}), calc(${breatheY} * -1 * ${breatheDistance}), calc(${breatheZ} * -1 * ${breatheDistance})) rotateZ(var(--comp-rotate-z, 0deg))`
+  }];
+  return [{
+    ...options,
+    name,
+    easing: 'linear',
+    delay: 0,
+    duration: delay ? totalDurationWithDelay : duration,
+    custom,
+    keyframes: [{
+      offset: 0,
+      easing: (0, _utils.getEasing)(ease.out),
+      transform: `${breathePerspective} translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`
+    }, ...keyframes, {
+      offset: 1,
+      transform: `${breathePerspective} translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+}
+function getNames(options) {
+  const timingFactor = (0, _utils.getTimingFactor)(options.duration, options.delay, true);
+  return [`motion-breathe-${timingFactor}`];
+}
+//# sourceMappingURL=Breathe.js.map

package/dist/cjs/library/ongoing/Breathe.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","DIRECTION_MAP","vertical","x","y","z","horizontal","center","FACTORS_SEQUENCE","translateFactor","timeFactor","web","options","_dom","style","asWeb","direction","distance","value","type","namedEffect","easing","duration","delay","totalDurationWithDelay","timingFactor","getTimingFactor","name","getNames","ease","getEasingFamily","perspectiveTransform","custom","getCssUnits","breatheX","toKeyframeValue","breatheY","breatheZ","breathePerspective","breatheDistance","currentOffset","keyframes","map","keyframeOffset","distancePart","offset","getEasing","inOut","transform","in","out"],"sources":["../../../../src/library/ongoing/Breathe.ts"],"sourcesContent":["import type {\n  TimeAnimationOptions,\n  Breathe,\n  DomApi,\n  AnimationExtraOptions,\n} from '../../types';\nimport {\n  getCssUnits,\n  getEasing,\n  getEasingFamily,\n  getTimingFactor,\n  toKeyframeValue,\n} from '../../utils';\n\nconst DIRECTION_MAP = {\n  vertical: { x: 0, y: 1, z: 0 },\n  horizontal: { x: 1, y: 0, z: 0 },\n  center: { x: 0, y: 0, z: 1 },\n};\n\nconst FACTORS_SEQUENCE = [\n  { translateFactor: 1, timeFactor: 0.25 },\n  { translateFactor: -1, timeFactor: 0.5 },\n  { translateFactor: 1, timeFactor: 0.5 },\n  { translateFactor: -0.7, timeFactor: 0.5 },\n  { translateFactor: 0.6, timeFactor: 0.3333 },\n];\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  _dom?: DomApi,\n) {\n  return style(options, true);\n}\n\nexport function style(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { direction = 'vertical', distance = { value: 25, type: 'px' } } =\n    options.namedEffect as Breathe;\n\n  const easing = options.easing || 'sineInOut';\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const totalDurationWithDelay = 3.2 * duration + delay;\n  const timingFactor = getTimingFactor(\n    duration,\n    totalDurationWithDelay - duration,\n  ) as number;\n  const [name] = getNames(options);\n\n  const { x, y, z } = DIRECTION_MAP[direction];\n  const ease = getEasingFamily(easing);\n  const perspectiveTransform =\n    direction === 'center' ? 'perspective(800px)' : '';\n\n  // Create CSS custom properties for the Breathe configuration\n  const custom: Record<string, string | number> = {\n    '--motion-breathe-perspective': perspectiveTransform,\n    '--motion-breathe-distance': `${distance.value}${getCssUnits(\n      distance.type || 'px',\n    )}`,\n    '--motion-breathe-x': x,\n    '--motion-breathe-y': y,\n    '--motion-breathe-z': z,\n  };\n\n  const breatheX = `${toKeyframeValue(custom, '--motion-breathe-x', asWeb)}`;\n  const breatheY = `${toKeyframeValue(custom, '--motion-breathe-y', asWeb)}`;\n  const breatheZ = `${toKeyframeValue(custom, '--motion-breathe-z', asWeb)}`;\n  const breathePerspective = `${toKeyframeValue(\n    custom,\n    '--motion-breathe-perspective',\n    asWeb,\n    ' ',\n  )}`;\n  const breatheDistance = `${toKeyframeValue(\n    custom,\n    '--motion-breathe-distance',\n    asWeb,\n  )}`;\n\n  let currentOffset = 0;\n\n  // in case a delay is applied, animate a different sequence which decays to a stop\n  const keyframes = delay\n    ? FACTORS_SEQUENCE.map(({ translateFactor, timeFactor }) => {\n        const keyframeOffset = currentOffset + timeFactor * timingFactor;\n        currentOffset = keyframeOffset;\n        const distancePart = `${breatheDistance} * ${translateFactor}`;\n\n        return {\n          offset: keyframeOffset,\n          easing: getEasing(ease.inOut),\n          transform: `${breathePerspective} translate3d(calc(${breatheX} * ${distancePart}), calc(${breatheY} * ${distancePart}), calc(${breatheZ} * ${distancePart})) rotateZ(var(--comp-rotate-z, 0deg))`,\n        };\n      })\n    : [\n        {\n          offset: 0.25,\n          easing: getEasing(ease.inOut),\n          transform: `${breathePerspective} translate3d(calc(${breatheX} * ${breatheDistance}), calc(${breatheY} * ${breatheDistance}), calc(${breatheZ} * ${breatheDistance})) rotateZ(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          offset: 0.75,\n          easing: getEasing(ease.in),\n          transform: `${breathePerspective} translate3d(calc(${breatheX} * -1 * ${breatheDistance}), calc(${breatheY} * -1 * ${breatheDistance}), calc(${breatheZ} * -1 * ${breatheDistance})) rotateZ(var(--comp-rotate-z, 0deg))`,\n        },\n      ];\n\n  return [\n    {\n      ...options,\n      name,\n      easing: 'linear',\n      delay: 0,\n      duration: delay ? totalDurationWithDelay : duration,\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          easing: getEasing(ease.out),\n          transform: `${breathePerspective} translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`,\n        },\n        ...keyframes,\n        {\n          offset: 1,\n          transform: `${breathePerspective} translate3d(0, 0, 0) rotateZ(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function getNames(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n) {\n  const timingFactor = getTimingFactor(options.duration!, options.delay!, true);\n\n  return [`motion-breathe-${timingFactor}`];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/ongoing/Cross.js

@@ -0,0 +1,262 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.web = web;
+var _utils = require("../../utils");
+const FOUR_DIRECTIONS_TRANSLATIONS = {
+  // 100cqw - left
+  RIGHT: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px))',
+  // left * -1 - width
+  LEFT: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%))',
+  // top * -1 - height
+  TOP: 'calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%))',
+  // 100cqh - top
+  BOTTOM: 'calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))'
+};
+const {
+  RIGHT,
+  LEFT,
+  TOP,
+  BOTTOM
+} = FOUR_DIRECTIONS_TRANSLATIONS;
+const FOUR_CORNERS_TRANSLATIONS = {
+  'top-left': {
+    // min(100cqw - left, 100cqh - top)
+    from: `min(${RIGHT}, ${BOTTOM})`,
+    // min(abs(left * -1 - width), abs(top * -1 - height))
+    to: `min(calc(${LEFT} * -1), calc(${TOP} * -1))`
+  },
+  'top-right': {
+    // min(abs(left * -1 - width), 100cqh - top)
+    from: `min(calc(${LEFT} * -1), ${BOTTOM})`,
+    // min(100cqw - left, abs(top * -1 - height))
+    to: `min(${RIGHT}, calc(${TOP} * -1))`
+  },
+  'bottom-left': {
+    // min(100cqw - left, abs(top * -1 - height))
+    from: `min(${RIGHT}, calc(${TOP} * -1))`,
+    // min(abs(left * -1 - width), 100cqh - top)
+    to: `min(calc(${LEFT} * -1), ${BOTTOM})`
+  },
+  'bottom-right': {
+    // min(abs(left * -1 - width), abs(top * -1 - height))
+    from: `min(calc(${LEFT} * -1), calc(${TOP} * -1))`,
+    // min(100cqw - left, 100cqh - top)
+    to: `min(${RIGHT}, ${BOTTOM})`
+  }
+};
+const TRANSLATE_BY_DIRECTION_MAP = {
+  left: {
+    from: `${RIGHT} 0`,
+    to: `${LEFT} 0`
+  },
+  right: {
+    from: `${LEFT} 0`,
+    to: `${RIGHT} 0`
+  },
+  top: {
+    from: `0 ${BOTTOM}`,
+    to: `0 ${TOP}`
+  },
+  bottom: {
+    from: `0 ${TOP}`,
+    to: `0 ${BOTTOM}`
+  }
+};
+const GET_OFFSET_BY_DIRECTION_MAP = {
+  // (width + left) / (100cqw + width)
+  left: ({
+    left,
+    width,
+    parentWidth
+  }) => (width + left) / (parentWidth + width || 1),
+  // (100cqw - left) / (100cqw + width)
+  right: ({
+    left,
+    width,
+    parentWidth
+  }) => (parentWidth - left) / (parentWidth + width || 1),
+  // (100cqh - top) / (100cqh + height)
+  bottom: ({
+    top,
+    height,
+    parentHeight
+  }) => (parentHeight - top) / (parentHeight + height || 1),
+  // (height + top) / (100cqh + height)
+  top: ({
+    top,
+    height,
+    parentHeight
+  }) => (height + top) / (parentHeight + height || 1),
+  // min(<left>, <top>)
+  'bottom-right': ({
+    left,
+    top,
+    width,
+    height,
+    parentWidth,
+    parentHeight
+  }) => {
+    const leftDistance = width + left;
+    const topDistance = parentHeight - top;
+    return leftDistance < topDistance ? leftDistance / (parentWidth + width || 1) : topDistance / (parentHeight + height || 1);
+  },
+  // min(<right>, <top>)
+  'bottom-left': ({
+    left,
+    top,
+    width,
+    height,
+    parentWidth,
+    parentHeight
+  }) => {
+    const rightDistance = parentWidth - left;
+    const topDistance = parentHeight - top;
+    return rightDistance < topDistance ? rightDistance / (parentWidth + width || 1) : topDistance / (parentHeight + height || 1);
+  },
+  // min(<left>, <bottom>)
+  'top-right': ({
+    left,
+    top,
+    width,
+    height,
+    parentWidth,
+    parentHeight
+  }) => {
+    const leftDistance = parentWidth - left;
+    const bottomDistance = height + top;
+    return leftDistance < bottomDistance ? leftDistance / (parentWidth + width || 1) : bottomDistance / (parentHeight + height || 1);
+  },
+  // min(<right>, <bottom>)
+  'top-left': ({
+    left,
+    top,
+    width,
+    height,
+    parentWidth,
+    parentHeight
+  }) => {
+    const rightDistance = parentWidth - left;
+    const bottomDistance = height + top;
+    return rightDistance < bottomDistance ? rightDistance / (parentWidth + width || 1) : bottomDistance / (parentHeight + height || 1);
+  }
+};
+function generateTranslate(direction) {
+  const _from = FOUR_CORNERS_TRANSLATIONS[direction].from;
+  const _to = FOUR_CORNERS_TRANSLATIONS[direction].to;
+  const fromYFactor = direction.startsWith('top') ? 1 : -1;
+  const toYFactor = -fromYFactor;
+  const fromXFactor = direction.endsWith('left') ? 1 : -1;
+  const toXFactor = -fromXFactor;
+  return {
+    from: `calc(${_from} * ${fromXFactor}) calc(${_from} * ${fromYFactor})`,
+    to: `calc(${_to} * ${toXFactor}) calc(${_to} * ${toYFactor})`
+  };
+}
+function web(options, dom) {
+  const {
+    direction = 'right'
+  } = options.namedEffect;
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const timingFactor = (0, _utils.getTimingFactor)(duration, delay);
+  const [name] = getNames(options);
+
+  // Create CSS custom properties for the Cross configuration
+  const custom = {
+    '--motion-left': '0px',
+    '--motion-top': '0px',
+    '--motion-width': '100%',
+    '--motion-height': '100%',
+    '--motion-parent-width': '100vw',
+    '--motion-parent-height': '100vh'
+  };
+
+  /*
+   * Prepare function
+   */
+  let left = 0;
+  let top = 0;
+  let width = 0;
+  let height = 0;
+  let parentWidth = 0;
+  let parentHeight = 0;
+  if (dom) {
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      const {
+        width: targetWidth,
+        height: targetHeight
+      } = target.getBoundingClientRect();
+      const parent = target.offsetParent;
+      const parentRect = (parent == null ? void 0 : parent.getBoundingClientRect()) || {};
+      const offset = (0, _utils.getElementOffset)(target, parent);
+      left = offset.left;
+      top = offset.top;
+      width = targetWidth;
+      height = targetHeight;
+      parentWidth = parentRect.width;
+      parentHeight = parentRect.height;
+    });
+    dom.mutate(target => {
+      target == null || target.style.setProperty('--motion-left', `${left}px`);
+      target == null || target.style.setProperty('--motion-top', `${top}px`);
+      target == null || target.style.setProperty('--motion-width', `${width}px`);
+      target == null || target.style.setProperty('--motion-height', `${height}px`);
+      target == null || target.style.setProperty('--motion-parent-width', `${parentWidth}px`);
+      target == null || target.style.setProperty('--motion-parent-height', `${parentHeight}px`);
+    });
+  }
+  return [{
+    ...options,
+    name,
+    delay: 0,
+    easing: 'linear',
+    duration: duration + delay,
+    custom,
+    get keyframes() {
+      // Calculate the timing offset for keyframes
+      const toDurationOffset = GET_OFFSET_BY_DIRECTION_MAP[direction]({
+        left,
+        top,
+        width,
+        height,
+        parentWidth,
+        parentHeight
+      }) * timingFactor;
+      let from, to;
+      if (direction in TRANSLATE_BY_DIRECTION_MAP) {
+        from = TRANSLATE_BY_DIRECTION_MAP[direction].from;
+        to = TRANSLATE_BY_DIRECTION_MAP[direction].to;
+      } else {
+        const cornerFromTo = generateTranslate(direction);
+        from = cornerFromTo.from;
+        to = cornerFromTo.to;
+      }
+      return [{
+        offset: 0,
+        translate: '0 0'
+      }, {
+        offset: toDurationOffset,
+        translate: to,
+        easing: 'step-start'
+      }, {
+        offset: toDurationOffset,
+        translate: from
+      }, {
+        offset: timingFactor,
+        translate: '0 0'
+      }, {
+        offset: 1,
+        translate: '0 0'
+      }];
+    }
+  }];
+}
+function getNames(_) {
+  return ['motion-cross'];
+}
+//# sourceMappingURL=Cross.js.map

package/dist/cjs/library/ongoing/Cross.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","FOUR_DIRECTIONS_TRANSLATIONS","RIGHT","LEFT","TOP","BOTTOM","FOUR_CORNERS_TRANSLATIONS","from","to","TRANSLATE_BY_DIRECTION_MAP","left","right","top","bottom","GET_OFFSET_BY_DIRECTION_MAP","width","parentWidth","height","parentHeight","bottom-right","leftDistance","topDistance","bottom-left","rightDistance","top-right","bottomDistance","top-left","generateTranslate","direction","_from","_to","fromYFactor","startsWith","toYFactor","fromXFactor","endsWith","toXFactor","web","options","dom","namedEffect","duration","delay","timingFactor","getTimingFactor","name","getNames","custom","measure","target","targetWidth","targetHeight","getBoundingClientRect","parent","offsetParent","parentRect","offset","getElementOffset","mutate","style","setProperty","easing","keyframes","toDurationOffset","cornerFromTo","translate","_"],"sources":["../../../../src/library/ongoing/Cross.ts"],"sourcesContent":["import type {\n  Cross,\n  DomApi,\n  TimeAnimationOptions,\n  AnimationExtraOptions,\n} from '../../types';\nimport { getElementOffset, getTimingFactor } from '../../utils';\n\nconst FOUR_DIRECTIONS_TRANSLATIONS = {\n  // 100cqw - left\n  RIGHT: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px))',\n  // left * -1 - width\n  LEFT: 'calc(var(--motion-left, 0px) * -1 - var(--motion-width, 100%))',\n  // top * -1 - height\n  TOP: 'calc(var(--motion-top, 0px) * -1 - var(--motion-height, 100%))',\n  // 100cqh - top\n  BOTTOM: 'calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px))',\n};\nconst { RIGHT, LEFT, TOP, BOTTOM } = FOUR_DIRECTIONS_TRANSLATIONS;\n\nconst FOUR_CORNERS_TRANSLATIONS = {\n  'top-left': {\n    // min(100cqw - left, 100cqh - top)\n    from: `min(${RIGHT}, ${BOTTOM})`,\n    // min(abs(left * -1 - width), abs(top * -1 - height))\n    to: `min(calc(${LEFT} * -1), calc(${TOP} * -1))`,\n  },\n  'top-right': {\n    // min(abs(left * -1 - width), 100cqh - top)\n    from: `min(calc(${LEFT} * -1), ${BOTTOM})`,\n    // min(100cqw - left, abs(top * -1 - height))\n    to: `min(${RIGHT}, calc(${TOP} * -1))`,\n  },\n  'bottom-left': {\n    // min(100cqw - left, abs(top * -1 - height))\n    from: `min(${RIGHT}, calc(${TOP} * -1))`,\n    // min(abs(left * -1 - width), 100cqh - top)\n    to: `min(calc(${LEFT} * -1), ${BOTTOM})`,\n  },\n  'bottom-right': {\n    // min(abs(left * -1 - width), abs(top * -1 - height))\n    from: `min(calc(${LEFT} * -1), calc(${TOP} * -1))`,\n    // min(100cqw - left, 100cqh - top)\n    to: `min(${RIGHT}, ${BOTTOM})`,\n  },\n};\n\nconst TRANSLATE_BY_DIRECTION_MAP = {\n  left: {\n    from: `${RIGHT} 0`,\n    to: `${LEFT} 0`,\n  },\n  right: {\n    from: `${LEFT} 0`,\n    to: `${RIGHT} 0`,\n  },\n  top: {\n    from: `0 ${BOTTOM}`,\n    to: `0 ${TOP}`,\n  },\n  bottom: {\n    from: `0 ${TOP}`,\n    to: `0 ${BOTTOM}`,\n  },\n};\n\ntype HorizontalOffsetByDirectionParams = {\n  left: number;\n  width: number;\n  parentWidth: number;\n};\n\ntype VerticalOffsetByDirectionParams = {\n  top: number;\n  height: number;\n  parentHeight: number;\n};\n\ntype OffsetByDirectionParams = HorizontalOffsetByDirectionParams &\n  VerticalOffsetByDirectionParams;\n\nconst GET_OFFSET_BY_DIRECTION_MAP = {\n  // (width + left) / (100cqw + width)\n  left: ({ left, width, parentWidth }: HorizontalOffsetByDirectionParams) =>\n    (width + left) / (parentWidth + width || 1),\n  // (100cqw - left) / (100cqw + width)\n  right: ({ left, width, parentWidth }: HorizontalOffsetByDirectionParams) =>\n    (parentWidth - left) / (parentWidth + width || 1),\n  // (100cqh - top) / (100cqh + height)\n  bottom: ({ top, height, parentHeight }: VerticalOffsetByDirectionParams) =>\n    (parentHeight - top) / (parentHeight + height || 1),\n  // (height + top) / (100cqh + height)\n  top: ({ top, height, parentHeight }: VerticalOffsetByDirectionParams) =>\n    (height + top) / (parentHeight + height || 1),\n  // min(<left>, <top>)\n  'bottom-right': ({\n    left,\n    top,\n    width,\n    height,\n    parentWidth,\n    parentHeight,\n  }: OffsetByDirectionParams) => {\n    const leftDistance = width + left;\n    const topDistance = parentHeight - top;\n\n    return leftDistance < topDistance\n      ? leftDistance / (parentWidth + width || 1)\n      : topDistance / (parentHeight + height || 1);\n  },\n  // min(<right>, <top>)\n  'bottom-left': ({\n    left,\n    top,\n    width,\n    height,\n    parentWidth,\n    parentHeight,\n  }: OffsetByDirectionParams) => {\n    const rightDistance = parentWidth - left;\n    const topDistance = parentHeight - top;\n\n    return rightDistance < topDistance\n      ? rightDistance / (parentWidth + width || 1)\n      : topDistance / (parentHeight + height || 1);\n  },\n  // min(<left>, <bottom>)\n  'top-right': ({\n    left,\n    top,\n    width,\n    height,\n    parentWidth,\n    parentHeight,\n  }: OffsetByDirectionParams) => {\n    const leftDistance = parentWidth - left;\n    const bottomDistance = height + top;\n\n    return leftDistance < bottomDistance\n      ? leftDistance / (parentWidth + width || 1)\n      : bottomDistance / (parentHeight + height || 1);\n  },\n  // min(<right>, <bottom>)\n  'top-left': ({\n    left,\n    top,\n    width,\n    height,\n    parentWidth,\n    parentHeight,\n  }: OffsetByDirectionParams) => {\n    const rightDistance = parentWidth - left;\n    const bottomDistance = height + top;\n\n    return rightDistance < bottomDistance\n      ? rightDistance / (parentWidth + width || 1)\n      : bottomDistance / (parentHeight + height || 1);\n  },\n};\n\nfunction generateTranslate(direction: keyof typeof FOUR_CORNERS_TRANSLATIONS) {\n  const _from = FOUR_CORNERS_TRANSLATIONS[direction].from;\n  const _to = FOUR_CORNERS_TRANSLATIONS[direction].to;\n  const fromYFactor = direction.startsWith('top') ? 1 : -1;\n  const toYFactor = -fromYFactor;\n  const fromXFactor = direction.endsWith('left') ? 1 : -1;\n  const toXFactor = -fromXFactor;\n\n  return {\n    from: `calc(${_from} * ${fromXFactor}) calc(${_from} * ${fromYFactor})`,\n    to: `calc(${_to} * ${toXFactor}) calc(${_to} * ${toYFactor})`,\n  };\n}\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  const { direction = 'right' } = options.namedEffect as Cross;\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const timingFactor = getTimingFactor(duration, delay) as number;\n  const [name] = getNames(options);\n\n  // Create CSS custom properties for the Cross configuration\n  const custom: Record<string, string | number> = {\n    '--motion-left': '0px',\n    '--motion-top': '0px',\n    '--motion-width': '100%',\n    '--motion-height': '100%',\n    '--motion-parent-width': '100vw',\n    '--motion-parent-height': '100vh',\n  };\n\n  /*\n   * Prepare function\n   */\n  let left = 0;\n  let top = 0;\n  let width = 0;\n  let height = 0;\n  let parentWidth = 0;\n  let parentHeight = 0;\n\n  if (dom) {\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const { width: targetWidth, height: targetHeight } =\n        target.getBoundingClientRect();\n      const parent = target.offsetParent as HTMLElement;\n      const parentRect = parent?.getBoundingClientRect() || ({} as DOMRect);\n      const offset = getElementOffset(target, parent);\n\n      left = offset.left;\n      top = offset.top;\n      width = targetWidth;\n      height = targetHeight;\n      parentWidth = parentRect.width;\n      parentHeight = parentRect.height;\n    });\n\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-left', `${left}px`);\n      target?.style.setProperty('--motion-top', `${top}px`);\n      target?.style.setProperty('--motion-width', `${width}px`);\n      target?.style.setProperty('--motion-height', `${height}px`);\n      target?.style.setProperty('--motion-parent-width', `${parentWidth}px`);\n      target?.style.setProperty('--motion-parent-height', `${parentHeight}px`);\n    });\n  }\n\n  return [\n    {\n      ...options,\n      name,\n      delay: 0,\n      easing: 'linear',\n      duration: duration + delay,\n      custom,\n      get keyframes() {\n        // Calculate the timing offset for keyframes\n        const toDurationOffset =\n          GET_OFFSET_BY_DIRECTION_MAP[direction]({\n            left,\n            top,\n            width,\n            height,\n            parentWidth,\n            parentHeight,\n          }) * timingFactor;\n\n        let from, to;\n        if (direction in TRANSLATE_BY_DIRECTION_MAP) {\n          from =\n            TRANSLATE_BY_DIRECTION_MAP[\n              direction as keyof typeof TRANSLATE_BY_DIRECTION_MAP\n            ].from;\n          to =\n            TRANSLATE_BY_DIRECTION_MAP[\n              direction as keyof typeof TRANSLATE_BY_DIRECTION_MAP\n            ].to;\n        } else {\n          const cornerFromTo = generateTranslate(\n            direction as keyof typeof FOUR_CORNERS_TRANSLATIONS,\n          );\n          from = cornerFromTo.from;\n          to = cornerFromTo.to;\n        }\n\n        return [\n          {\n            offset: 0,\n            translate: '0 0',\n          },\n          {\n            offset: toDurationOffset,\n            translate: to,\n            easing: 'step-start',\n          },\n          {\n            offset: toDurationOffset,\n            translate: from,\n          },\n          {\n            offset: timingFactor,\n            translate: '0 0',\n          },\n          {\n            offset: 1,\n            translate: '0 0',\n          },\n        ];\n      },\n    },\n  ];\n}\n\nexport function getNames(_: TimeAnimationOptions & AnimationExtraOptions) {\n  return ['motion-cross'];\n}\n"],"mappings":";;;;;AAMA,IAAAA,MAAA,GAAAC,OAAA;AAEA,MAAMC,4BAA4B,GAAG;EACnC;EACAC,KAAK,EAAE,mEAAmE;EAC1E;EACAC,IAAI,EAAE,gEAAgE;EACtE;EACAC,GAAG,EAAE,gEAAgE;EACrE;EACAC,MAAM,EAAE;AACV,CAAC;AACD,MAAM;EAAEH,KAAK;EAAEC,IAAI;EAAEC,GAAG;EAAEC;AAAO,CAAC,GAAGJ,4BAA4B;AAEjE,MAAMK,yBAAyB,GAAG;EAChC,UAAU,EAAE;IACV;IACAC,IAAI,EAAE,OAAOL,KAAK,KAAKG,MAAM,GAAG;IAChC;IACAG,EAAE,EAAE,YAAYL,IAAI,gBAAgBC,GAAG;EACzC,CAAC;EACD,WAAW,EAAE;IACX;IACAG,IAAI,EAAE,YAAYJ,IAAI,WAAWE,MAAM,GAAG;IAC1C;IACAG,EAAE,EAAE,OAAON,KAAK,UAAUE,GAAG;EAC/B,CAAC;EACD,aAAa,EAAE;IACb;IACAG,IAAI,EAAE,OAAOL,KAAK,UAAUE,GAAG,SAAS;IACxC;IACAI,EAAE,EAAE,YAAYL,IAAI,WAAWE,MAAM;EACvC,CAAC;EACD,cAAc,EAAE;IACd;IACAE,IAAI,EAAE,YAAYJ,IAAI,gBAAgBC,GAAG,SAAS;IAClD;IACAI,EAAE,EAAE,OAAON,KAAK,KAAKG,MAAM;EAC7B;AACF,CAAC;AAED,MAAMI,0BAA0B,GAAG;EACjCC,IAAI,EAAE;IACJH,IAAI,EAAE,GAAGL,KAAK,IAAI;IAClBM,EAAE,EAAE,GAAGL,IAAI;EACb,CAAC;EACDQ,KAAK,EAAE;IACLJ,IAAI,EAAE,GAAGJ,IAAI,IAAI;IACjBK,EAAE,EAAE,GAAGN,KAAK;EACd,CAAC;EACDU,GAAG,EAAE;IACHL,IAAI,EAAE,KAAKF,MAAM,EAAE;IACnBG,EAAE,EAAE,KAAKJ,GAAG;EACd,CAAC;EACDS,MAAM,EAAE;IACNN,IAAI,EAAE,KAAKH,GAAG,EAAE;IAChBI,EAAE,EAAE,KAAKH,MAAM;EACjB;AACF,CAAC;AAiBD,MAAMS,2BAA2B,GAAG;EAClC;EACAJ,IAAI,EAAEA,CAAC;IAAEA,IAAI;IAAEK,KAAK;IAAEC;EAA+C,CAAC,KACpE,CAACD,KAAK,GAAGL,IAAI,KAAKM,WAAW,GAAGD,KAAK,IAAI,CAAC,CAAC;EAC7C;EACAJ,KAAK,EAAEA,CAAC;IAAED,IAAI;IAAEK,KAAK;IAAEC;EAA+C,CAAC,KACrE,CAACA,WAAW,GAAGN,IAAI,KAAKM,WAAW,GAAGD,KAAK,IAAI,CAAC,CAAC;EACnD;EACAF,MAAM,EAAEA,CAAC;IAAED,GAAG;IAAEK,MAAM;IAAEC;EAA8C,CAAC,KACrE,CAACA,YAAY,GAAGN,GAAG,KAAKM,YAAY,GAAGD,MAAM,IAAI,CAAC,CAAC;EACrD;EACAL,GAAG,EAAEA,CAAC;IAAEA,GAAG;IAAEK,MAAM;IAAEC;EAA8C,CAAC,KAClE,CAACD,MAAM,GAAGL,GAAG,KAAKM,YAAY,GAAGD,MAAM,IAAI,CAAC,CAAC;EAC/C;EACA,cAAc,EAAEE,CAAC;IACfT,IAAI;IACJE,GAAG;IACHG,KAAK;IACLE,MAAM;IACND,WAAW;IACXE;EACuB,CAAC,KAAK;IAC7B,MAAME,YAAY,GAAGL,KAAK,GAAGL,IAAI;IACjC,MAAMW,WAAW,GAAGH,YAAY,GAAGN,GAAG;IAEtC,OAAOQ,YAAY,GAAGC,WAAW,GAC7BD,YAAY,IAAIJ,WAAW,GAAGD,KAAK,IAAI,CAAC,CAAC,GACzCM,WAAW,IAAIH,YAAY,GAAGD,MAAM,IAAI,CAAC,CAAC;EAChD,CAAC;EACD;EACA,aAAa,EAAEK,CAAC;IACdZ,IAAI;IACJE,GAAG;IACHG,KAAK;IACLE,MAAM;IACND,WAAW;IACXE;EACuB,CAAC,KAAK;IAC7B,MAAMK,aAAa,GAAGP,WAAW,GAAGN,IAAI;IACxC,MAAMW,WAAW,GAAGH,YAAY,GAAGN,GAAG;IAEtC,OAAOW,aAAa,GAAGF,WAAW,GAC9BE,aAAa,IAAIP,WAAW,GAAGD,KAAK,IAAI,CAAC,CAAC,GAC1CM,WAAW,IAAIH,YAAY,GAAGD,MAAM,IAAI,CAAC,CAAC;EAChD,CAAC;EACD;EACA,WAAW,EAAEO,CAAC;IACZd,IAAI;IACJE,GAAG;IACHG,KAAK;IACLE,MAAM;IACND,WAAW;IACXE;EACuB,CAAC,KAAK;IAC7B,MAAME,YAAY,GAAGJ,WAAW,GAAGN,IAAI;IACvC,MAAMe,cAAc,GAAGR,MAAM,GAAGL,GAAG;IAEnC,OAAOQ,YAAY,GAAGK,cAAc,GAChCL,YAAY,IAAIJ,WAAW,GAAGD,KAAK,IAAI,CAAC,CAAC,GACzCU,cAAc,IAAIP,YAAY,GAAGD,MAAM,IAAI,CAAC,CAAC;EACnD,CAAC;EACD;EACA,UAAU,EAAES,CAAC;IACXhB,IAAI;IACJE,GAAG;IACHG,KAAK;IACLE,MAAM;IACND,WAAW;IACXE;EACuB,CAAC,KAAK;IAC7B,MAAMK,aAAa,GAAGP,WAAW,GAAGN,IAAI;IACxC,MAAMe,cAAc,GAAGR,MAAM,GAAGL,GAAG;IAEnC,OAAOW,aAAa,GAAGE,cAAc,GACjCF,aAAa,IAAIP,WAAW,GAAGD,KAAK,IAAI,CAAC,CAAC,GAC1CU,cAAc,IAAIP,YAAY,GAAGD,MAAM,IAAI,CAAC,CAAC;EACnD;AACF,CAAC;AAED,SAASU,iBAAiBA,CAACC,SAAiD,EAAE;EAC5E,MAAMC,KAAK,GAAGvB,yBAAyB,CAACsB,SAAS,CAAC,CAACrB,IAAI;EACvD,MAAMuB,GAAG,GAAGxB,yBAAyB,CAACsB,SAAS,CAAC,CAACpB,EAAE;EACnD,MAAMuB,WAAW,GAAGH,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;EACxD,MAAMC,SAAS,GAAG,CAACF,WAAW;EAC9B,MAAMG,WAAW,GAAGN,SAAS,CAACO,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;EACvD,MAAMC,SAAS,GAAG,CAACF,WAAW;EAE9B,OAAO;IACL3B,IAAI,EAAE,QAAQsB,KAAK,MAAMK,WAAW,UAAUL,KAAK,MAAME,WAAW,GAAG;IACvEvB,EAAE,EAAE,QAAQsB,GAAG,MAAMM,SAAS,UAAUN,GAAG,MAAMG,SAAS;EAC5D,CAAC;AACH;AAEO,SAASI,GAAGA,CACjBC,OAAqD,EACrDC,GAAY,EACZ;EACA,MAAM;IAAEX,SAAS,GAAG;EAAQ,CAAC,GAAGU,OAAO,CAACE,WAAoB;EAC5D,MAAMC,QAAQ,GAAGH,OAAO,CAACG,QAAQ,IAAI,CAAC;EACtC,MAAMC,KAAK,GAAGJ,OAAO,CAACI,KAAK,IAAI,CAAC;EAChC,MAAMC,YAAY,GAAG,IAAAC,sBAAe,EAACH,QAAQ,EAAEC,KAAK,CAAW;EAC/D,MAAM,CAACG,IAAI,CAAC,GAAGC,QAAQ,CAACR,OAAO,CAAC;;EAEhC;EACA,MAAMS,MAAuC,GAAG;IAC9C,eAAe,EAAE,KAAK;IACtB,cAAc,EAAE,KAAK;IACrB,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,MAAM;IACzB,uBAAuB,EAAE,OAAO;IAChC,wBAAwB,EAAE;EAC5B,CAAC;;EAED;AACF;AACA;EACE,IAAIrC,IAAI,GAAG,CAAC;EACZ,IAAIE,GAAG,GAAG,CAAC;EACX,IAAIG,KAAK,GAAG,CAAC;EACb,IAAIE,MAAM,GAAG,CAAC;EACd,IAAID,WAAW,GAAG,CAAC;EACnB,IAAIE,YAAY,GAAG,CAAC;EAEpB,IAAIqB,GAAG,EAAE;IACPA,GAAG,CAACS,OAAO,CAAEC,MAAM,IAAK;MACtB,IAAI,CAACA,MAAM,EAAE;QACX;MACF;MAEA,MAAM;QAAElC,KAAK,EAAEmC,WAAW;QAAEjC,MAAM,EAAEkC;MAAa,CAAC,GAChDF,MAAM,CAACG,qBAAqB,CAAC,CAAC;MAChC,MAAMC,MAAM,GAAGJ,MAAM,CAACK,YAA2B;MACjD,MAAMC,UAAU,GAAG,CAAAF,MAAM,oBAANA,MAAM,CAAED,qBAAqB,CAAC,CAAC,KAAK,CAAC,CAAa;MACrE,MAAMI,MAAM,GAAG,IAAAC,uBAAgB,EAACR,MAAM,EAAEI,MAAM,CAAC;MAE/C3C,IAAI,GAAG8C,MAAM,CAAC9C,IAAI;MAClBE,GAAG,GAAG4C,MAAM,CAAC5C,GAAG;MAChBG,KAAK,GAAGmC,WAAW;MACnBjC,MAAM,GAAGkC,YAAY;MACrBnC,WAAW,GAAGuC,UAAU,CAACxC,KAAK;MAC9BG,YAAY,GAAGqC,UAAU,CAACtC,MAAM;IAClC,CAAC,CAAC;IAEFsB,GAAG,CAACmB,MAAM,CAAET,MAAM,IAAK;MACrBA,MAAM,YAANA,MAAM,CAAEU,KAAK,CAACC,WAAW,CAAC,eAAe,EAAE,GAAGlD,IAAI,IAAI,CAAC;MACvDuC,MAAM,YAANA,MAAM,CAAEU,KAAK,CAACC,WAAW,CAAC,cAAc,EAAE,GAAGhD,GAAG,IAAI,CAAC;MACrDqC,MAAM,YAANA,MAAM,CAAEU,KAAK,CAACC,WAAW,CAAC,gBAAgB,EAAE,GAAG7C,KAAK,IAAI,CAAC;MACzDkC,MAAM,YAANA,MAAM,CAAEU,KAAK,CAACC,WAAW,CAAC,iBAAiB,EAAE,GAAG3C,MAAM,IAAI,CAAC;MAC3DgC,MAAM,YAANA,MAAM,CAAEU,KAAK,CAACC,WAAW,CAAC,uBAAuB,EAAE,GAAG5C,WAAW,IAAI,CAAC;MACtEiC,MAAM,YAANA,MAAM,CAAEU,KAAK,CAACC,WAAW,CAAC,wBAAwB,EAAE,GAAG1C,YAAY,IAAI,CAAC;IAC1E,CAAC,CAAC;EACJ;EAEA,OAAO,CACL;IACE,GAAGoB,OAAO;IACVO,IAAI;IACJH,KAAK,EAAE,CAAC;IACRmB,MAAM,EAAE,QAAQ;IAChBpB,QAAQ,EAAEA,QAAQ,GAAGC,KAAK;IAC1BK,MAAM;IACN,IAAIe,SAASA,CAAA,EAAG;MACd;MACA,MAAMC,gBAAgB,GACpBjD,2BAA2B,CAACc,SAAS,CAAC,CAAC;QACrClB,IAAI;QACJE,GAAG;QACHG,KAAK;QACLE,MAAM;QACND,WAAW;QACXE;MACF,CAAC,CAAC,GAAGyB,YAAY;MAEnB,IAAIpC,IAAI,EAAEC,EAAE;MACZ,IAAIoB,SAAS,IAAInB,0BAA0B,EAAE;QAC3CF,IAAI,GACFE,0BAA0B,CACxBmB,SAAS,CACV,CAACrB,IAAI;QACRC,EAAE,GACAC,0BAA0B,CACxBmB,SAAS,CACV,CAACpB,EAAE;MACR,CAAC,MAAM;QACL,MAAMwD,YAAY,GAAGrC,iBAAiB,CACpCC,SACF,CAAC;QACDrB,IAAI,GAAGyD,YAAY,CAACzD,IAAI;QACxBC,EAAE,GAAGwD,YAAY,CAACxD,EAAE;MACtB;MAEA,OAAO,CACL;QACEgD,MAAM,EAAE,CAAC;QACTS,SAAS,EAAE;MACb,CAAC,EACD;QACET,MAAM,EAAEO,gBAAgB;QACxBE,SAAS,EAAEzD,EAAE;QACbqD,MAAM,EAAE;MACV,CAAC,EACD;QACEL,MAAM,EAAEO,gBAAgB;QACxBE,SAAS,EAAE1D;MACb,CAAC,EACD;QACEiD,MAAM,EAAEb,YAAY;QACpBsB,SAAS,EAAE;MACb,CAAC,EACD;QACET,MAAM,EAAE,CAAC;QACTS,SAAS,EAAE;MACb,CAAC,CACF;IACH;EACF,CAAC,CACF;AACH;AAEO,SAASnB,QAAQA,CAACoB,CAA+C,EAAE;EACxE,OAAO,CAAC,cAAc,CAAC;AACzB","ignoreList":[]}

package/dist/cjs/library/ongoing/DVD.js

@@ -0,0 +1,84 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.web = web;
+var _utils = require("../../utils");
+const RATIO_DAMPING_FACTOR = 0.5;
+function web(options, dom) {
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const [dvdX, dvdY] = getNames(options);
+  let left = 0;
+  let top = 0;
+  let parentWidth = 0;
+  let parentHeight = 0;
+  let ratio = 16 / 9 * RATIO_DAMPING_FACTOR;
+  if (dom) {
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      const rect = target.getBoundingClientRect();
+      const {
+        width,
+        height
+      } = rect;
+      const parent = target.closest('[data-block-level-container]') || target.offsetParent;
+      const offset = (0, _utils.getElementOffset)(target, parent);
+      left = offset.left;
+      top = offset.top;
+      parentWidth = (parent == null ? void 0 : parent.offsetWidth) || 0;
+      parentHeight = (parent == null ? void 0 : parent.offsetHeight) || 0;
+      ratio = parentWidth / parentHeight * RATIO_DAMPING_FACTOR;
+      dom.mutate(() => {
+        target.style.setProperty('--motion-left', `${left}px`);
+        target.style.setProperty('--motion-top', `${top}px`);
+        target.style.setProperty('--motion-width', `${width}px`);
+        target.style.setProperty('--motion-height', `${height}px`);
+        target.style.setProperty('--motion-parent-width', `${parentWidth}px`);
+        target.style.setProperty('--motion-parent-height', `${parentHeight}px`);
+      });
+    });
+  }
+  return [{
+    ...options,
+    name: dvdX,
+    easing: 'linear',
+    delay,
+    duration: duration / ratio,
+    alternate: true,
+    keyframes: [{
+      translate: 'calc(-1 * var(--motion-left, 0px))'
+    }, {
+      translate: 'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px) - var(--motion-width, 100%))'
+    }],
+    get timing() {
+      return {
+        iterationStart: left && parentWidth ? left / parentWidth : 0
+      };
+    }
+  }, {
+    ...options,
+    name: dvdY,
+    easing: 'linear',
+    delay,
+    duration: duration * ratio,
+    alternate: true,
+    composite: 'add',
+    keyframes: [{
+      translate: '0 calc(-1 * var(--motion-top, 0px))'
+    }, {
+      translate: '0 calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px) - var(--motion-height, 100%))'
+    }],
+    get timing() {
+      return {
+        iterationStart: top && parentHeight ? top / parentHeight : 0
+      };
+    }
+  }];
+}
+function getNames(_) {
+  return ['motion-dvd-x', 'motion-dvd-y'];
+}
+//# sourceMappingURL=DVD.js.map

package/dist/cjs/library/ongoing/DVD.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","RATIO_DAMPING_FACTOR","web","options","dom","duration","delay","dvdX","dvdY","getNames","left","top","parentWidth","parentHeight","ratio","measure","target","rect","getBoundingClientRect","width","height","parent","closest","offsetParent","offset","getElementOffset","offsetWidth","offsetHeight","mutate","style","setProperty","name","easing","alternate","keyframes","translate","timing","iterationStart","composite","_"],"sources":["../../../../src/library/ongoing/DVD.ts"],"sourcesContent":["import type { TimeAnimationOptions, DomApi } from '../../types';\nimport { getElementOffset } from '../../utils';\n\nconst RATIO_DAMPING_FACTOR = 0.5;\n\nexport function web(options: TimeAnimationOptions, dom?: DomApi) {\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const [dvdX, dvdY] = getNames(options);\n\n  let left = 0;\n  let top = 0;\n  let parentWidth = 0;\n  let parentHeight = 0;\n  let ratio = (16 / 9) * RATIO_DAMPING_FACTOR;\n\n  if (dom) {\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rect = target.getBoundingClientRect();\n      const { width, height } = rect;\n\n      const parent = (target.closest('[data-block-level-container]') ||\n        target.offsetParent) as HTMLElement;\n      const offset = getElementOffset(target, parent);\n      left = offset.left;\n      top = offset.top;\n\n      parentWidth = parent?.offsetWidth || 0;\n      parentHeight = parent?.offsetHeight || 0;\n\n      ratio = (parentWidth / parentHeight) * RATIO_DAMPING_FACTOR;\n\n      dom.mutate(() => {\n        target.style.setProperty('--motion-left', `${left}px`);\n        target.style.setProperty('--motion-top', `${top}px`);\n        target.style.setProperty('--motion-width', `${width}px`);\n        target.style.setProperty('--motion-height', `${height}px`);\n        target.style.setProperty('--motion-parent-width', `${parentWidth}px`);\n        target.style.setProperty('--motion-parent-height', `${parentHeight}px`);\n      });\n    });\n  }\n\n  return [\n    {\n      ...options,\n      name: dvdX,\n      easing: 'linear',\n      delay,\n      duration: duration / ratio,\n      alternate: true,\n      keyframes: [\n        {\n          translate: 'calc(-1 * var(--motion-left, 0px))',\n        },\n        {\n          translate:\n            'calc(var(--motion-parent-width, 100vw) - var(--motion-left, 0px) - var(--motion-width, 100%))',\n        },\n      ],\n      get timing() {\n        return {\n          iterationStart: left && parentWidth ? left / parentWidth : 0,\n        };\n      },\n    },\n    {\n      ...options,\n      name: dvdY,\n      easing: 'linear',\n      delay,\n      duration: duration * ratio,\n      alternate: true,\n      composite: 'add' as const,\n      keyframes: [\n        {\n          translate: '0 calc(-1 * var(--motion-top, 0px))',\n        },\n        {\n          translate:\n            '0 calc(var(--motion-parent-height, 100vh) - var(--motion-top, 0px) - var(--motion-height, 100%))',\n        },\n      ],\n      get timing() {\n        return {\n          iterationStart: top && parentHeight ? top / parentHeight : 0,\n        };\n      },\n    },\n  ];\n}\n\nexport function getNames(_: TimeAnimationOptions) {\n  return ['motion-dvd-x', 'motion-dvd-y'];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/ongoing/Flash.js

@@ -0,0 +1,45 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+function web(options, _dom) {
+  return style(options, true);
+}
+function style(options, _asWeb = false) {
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const easing = (0, _utils.getEasing)(options.easing || 'cubicInOut');
+  const timingFactor = (0, _utils.getTimingFactor)(duration, delay);
+  const [name] = getNames(options);
+  const keyframes = [{
+    offset: 0,
+    opacity: 1,
+    easing
+  }, {
+    offset: 0.5 * timingFactor,
+    opacity: 0,
+    easing
+  }, {
+    offset: timingFactor,
+    opacity: 1
+  }, {
+    offset: 1,
+    opacity: 1
+  }];
+  return [{
+    ...options,
+    name,
+    easing: 'linear',
+    delay: 0,
+    duration: duration + delay,
+    keyframes
+  }];
+}
+function getNames(options) {
+  const timingFactor = (0, _utils.getTimingFactor)(options.duration, options.delay, true);
+  return [`motion-flash-${timingFactor}`];
+}
+//# sourceMappingURL=Flash.js.map

package/dist/cjs/library/ongoing/Flash.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","web","options","_dom","style","_asWeb","duration","delay","easing","getEasing","timingFactor","getTimingFactor","name","getNames","keyframes","offset","opacity"],"sources":["../../../../src/library/ongoing/Flash.ts"],"sourcesContent":["import type {\n  TimeAnimationOptions,\n  DomApi,\n  AnimationExtraOptions,\n} from '../../types';\nimport { getEasing, getTimingFactor } from '../../utils';\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  _dom?: DomApi,\n) {\n  return style(options, true);\n}\n\nexport function style(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  _asWeb = false,\n) {\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const easing = getEasing(options.easing || 'cubicInOut');\n  const timingFactor = getTimingFactor(duration, delay) as number;\n  const [name] = getNames(options);\n\n  const keyframes = [\n    {\n      offset: 0,\n      opacity: 1,\n      easing,\n    },\n    {\n      offset: 0.5 * timingFactor,\n      opacity: 0,\n      easing,\n    },\n    {\n      offset: timingFactor,\n      opacity: 1,\n    },\n    {\n      offset: 1,\n      opacity: 1,\n    },\n  ];\n\n  return [\n    {\n      ...options,\n      name,\n      easing: 'linear',\n      delay: 0,\n      duration: duration + delay,\n      keyframes,\n    },\n  ];\n}\n\nexport function getNames(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n) {\n  const timingFactor = getTimingFactor(options.duration!, options.delay!, true);\n\n  return [`motion-flash-${timingFactor}`];\n}\n"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,OAAA;AAEO,SAASC,GAAGA,CACjBC,OAAqD,EACrDC,IAAa,EACb;EACA,OAAOC,KAAK,CAACF,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASE,KAAKA,CACnBF,OAAqD,EACrDG,MAAM,GAAG,KAAK,EACd;EACA,MAAMC,QAAQ,GAAGJ,OAAO,CAACI,QAAQ,IAAI,CAAC;EACtC,MAAMC,KAAK,GAAGL,OAAO,CAACK,KAAK,IAAI,CAAC;EAChC,MAAMC,MAAM,GAAG,IAAAC,gBAAS,EAACP,OAAO,CAACM,MAAM,IAAI,YAAY,CAAC;EACxD,MAAME,YAAY,GAAG,IAAAC,sBAAe,EAACL,QAAQ,EAAEC,KAAK,CAAW;EAC/D,MAAM,CAACK,IAAI,CAAC,GAAGC,QAAQ,CAACX,OAAO,CAAC;EAEhC,MAAMY,SAAS,GAAG,CAChB;IACEC,MAAM,EAAE,CAAC;IACTC,OAAO,EAAE,CAAC;IACVR;EACF,CAAC,EACD;IACEO,MAAM,EAAE,GAAG,GAAGL,YAAY;IAC1BM,OAAO,EAAE,CAAC;IACVR;EACF,CAAC,EACD;IACEO,MAAM,EAAEL,YAAY;IACpBM,OAAO,EAAE;EACX,CAAC,EACD;IACED,MAAM,EAAE,CAAC;IACTC,OAAO,EAAE;EACX,CAAC,CACF;EAED,OAAO,CACL;IACE,GAAGd,OAAO;IACVU,IAAI;IACJJ,MAAM,EAAE,QAAQ;IAChBD,KAAK,EAAE,CAAC;IACRD,QAAQ,EAAEA,QAAQ,GAAGC,KAAK;IAC1BO;EACF,CAAC,CACF;AACH;AAEO,SAASD,QAAQA,CACtBX,OAAqD,EACrD;EACA,MAAMQ,YAAY,GAAG,IAAAC,sBAAe,EAACT,OAAO,CAACI,QAAQ,EAAGJ,OAAO,CAACK,KAAK,EAAG,IAAI,CAAC;EAE7E,OAAO,CAAC,gBAAgBG,YAAY,EAAE,CAAC;AACzC","ignoreList":[]}

package/dist/cjs/library/ongoing/Flip.js

@@ -0,0 +1,67 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+const POWER_EASING_MAP = {
+  soft: 'linear',
+  medium: 'quintInOut',
+  hard: 'backOut'
+};
+const DIRECTION_MAP = {
+  vertical: {
+    x: '1',
+    y: '0'
+  },
+  horizontal: {
+    x: '0',
+    y: '1'
+  }
+};
+function web(options, _dom) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    direction = 'horizontal',
+    power
+  } = options.namedEffect;
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const offset = (0, _utils.getTimingFactor)(duration, delay);
+  const [name] = getNames(options);
+  const rotationAxes = DIRECTION_MAP[direction];
+  const easing = power && POWER_EASING_MAP[power] || options.easing || 'linear';
+  const custom = {
+    '--motion-rotate-x': rotationAxes.x,
+    '--motion-rotate-y': rotationAxes.y
+  };
+  const rotateStart = `rotate3d(${(0, _utils.toKeyframeValue)(custom, '--motion-rotate-x', asWeb)}, ${(0, _utils.toKeyframeValue)(custom, '--motion-rotate-y', asWeb)}, 0, 0deg)`;
+  const rotateEnd = `rotate3d(${(0, _utils.toKeyframeValue)(custom, '--motion-rotate-x', asWeb)}, ${(0, _utils.toKeyframeValue)(custom, '--motion-rotate-y', asWeb)}, 0, 360deg)`;
+  return [{
+    ...options,
+    name,
+    delay: 0,
+    easing: 'linear',
+    duration: duration + delay,
+    custom,
+    keyframes: [{
+      offset: 0,
+      transform: `perspective(800px) rotateZ(var(--comp-rotate-z, 0deg)) ${rotateStart}`,
+      easing: (0, _utils.getEasing)(easing)
+    }, {
+      offset,
+      transform: `perspective(800px) rotateZ(var(--comp-rotate-z, 0deg)) ${rotateEnd}`
+    }, {
+      offset: 1,
+      transform: `perspective(800px) rotateZ(var(--comp-rotate-z, 0deg)) ${rotateEnd}`
+    }]
+  }];
+}
+function getNames(options) {
+  const timingFactor = (0, _utils.getTimingFactor)(options.duration, options.delay, true);
+  return [`motion-flip-${timingFactor}`];
+}
+//# sourceMappingURL=Flip.js.map