@wix/motion 1.0.72 → 1.571.0

package/dist/esm/library/scroll/GrowScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["MAX_Y_TRAVEL","POWER_MAP","soft","scaleFrom","scaleTo","travelY","medium","hard","directionMap","top","right","bottom","left","center","RANGES_MAP","in","_scaleTo","fromValues","scale","travel","toValues","out","_scaleFrom","continuous","getScrubOffsets","_ref","power","range","speed","offset","Math","abs","start","end","create","options","direction","namedEffect","easing","fill","trnsX","trnsY","startOffsetAdd","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/scroll/GrowScroll.ts"],"sourcesContent":["import {\n  AnimationFillMode,\n  GrowScroll,\n  ScrubAnimationOptions,\n} from '../../types';\n\nconst MAX_Y_TRAVEL = 40;\nconst POWER_MAP = {\n  soft: { scaleFrom: 0.8, scaleTo: 1.2, travelY: 0 },\n  medium: { scaleFrom: 0.3, scaleTo: 1.7, travelY: 0.75 },\n  hard: { scaleFrom: 0, scaleTo: 4, travelY: 1 },\n};\n\nconst directionMap = {\n  top: [0, -50],\n  'top-right': [50, -50],\n  right: [50, 0],\n  'bottom-right': [50, 50],\n  bottom: [0, 50],\n  'bottom-left': [-50, 50],\n  left: [-50, 0],\n  'top-left': [-50, -50],\n  center: [0, 0],\n};\n\nconst RANGES_MAP = {\n  in: (scaleFrom: number, _scaleTo: number, travelY: number) => ({\n    fromValues: { scale: scaleFrom, travel: travelY },\n    toValues: { scale: 1, travel: 0 },\n  }),\n  out: (_scaleFrom: number, scaleTo: number, travelY: number) => ({\n    fromValues: { scale: 1, travel: 0 },\n    toValues: { scale: scaleTo, travel: -travelY },\n  }),\n  continuous: (scaleFrom: number, scaleTo: number, travelY: number) => ({\n    fromValues: { scale: scaleFrom, travel: travelY },\n    toValues: { scale: scaleTo, travel: -travelY },\n  }),\n};\n\nfunction getScrubOffsets({ power, range = 'in', speed = 0 }: GrowScroll) {\n  const offset =\n    power && POWER_MAP[power]\n      ? POWER_MAP[power].travelY\n      : Math.abs(speed) * MAX_Y_TRAVEL;\n\n  return {\n    start: range === 'out' ? '0px' : `${-offset}vh`,\n    end: range === 'in' ? '0px' : `${offset}vh`,\n  };\n}\n\nexport default function create(options: ScrubAnimationOptions) {\n  const {\n    power,\n    range = 'in',\n    scale = range === 'in' ? POWER_MAP.hard.scaleFrom : POWER_MAP.hard.scaleTo,\n    direction = 'center',\n    speed = 0,\n  } = options.namedEffect as GrowScroll;\n\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n  const { scaleFrom, scaleTo, travelY } =\n    power && POWER_MAP[power]\n      ? POWER_MAP[power]\n      : {\n          scaleFrom: scale,\n          scaleTo: scale,\n          travelY: speed,\n        };\n\n  const { fromValues, toValues } = RANGES_MAP[range](\n    scaleFrom,\n    scaleTo,\n    travelY * -MAX_Y_TRAVEL,\n  );\n\n  const { start, end } = getScrubOffsets(options.namedEffect as GrowScroll);\n  const [trnsX, trnsY] = directionMap[direction];\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      startOffsetAdd: start,\n      endOffsetAdd: end,\n      keyframes: [\n        {\n          transform: `translateY(${\n            fromValues.travel\n          }vh) translate(${trnsX}%, ${trnsY}%) scale(${\n            fromValues.scale\n          }) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`,\n        },\n        {\n          transform: `translateY(${\n            toValues.travel\n          }vh) translate(${trnsX}%, ${trnsY}%) scale(${\n            toValues.scale\n          }) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     translate: 0 <fromValues.travel>;\n   *   }\n   *   to {\n   *     translate: 0 <toValues.travel>;\n   *   }\n   * }\n   *\n   * @keyframes <name>-scale {\n   *   from {\n   *     scale: <fromValues.scale>;\n   *   }\n   *   <scaleDelay>% {\n   *     scale: <fromValues.scale>;\n   *     animation-timing-function: <scaleEase>;\n   *   }\n   *   <scaleDuration>% {\n   *     scale: <toValues.scale>;\n   *   }\n   *   to {\n   *     scale: <toValues.scale>;\n   *   }\n   * }\n   *\n   * @supports (animation-timeline: view()) {\n   *   #target {\n   *     animation: <name> auto <easing> both,\n   *                <name>-scale auto linear both;\n   *     animation-range: cover <start> cover <end>,\n   *                      cover <start> cover <end>;\n   *     animation-timeline: view(), view();\n   *   }\n   * }\n   * @supports not (animation-timeline: view()) {\n   *   #target {\n   *     animation: <name> 100ms linear <fill> paused,\n   *                <name>-scale 100ms linear <fill> paused;\n   *   }\n   * }\n   */\n}\n"],"mappings":"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AEG;EAAS,CAAC,GAAGN,UAAU,CAACa,KAAK,CAAC,CAChDxB,SAAS,EACTC,OAAO,EACPC,OAAO,GAAG,CAACL,YACb,CAAC;EAED,MAAM;IAAEgC,KAAK;IAAEC;EAAI,CAAC,GAAGT,eAAe,CAACW,OAAO,CAACE,WAAyB,CAAC;EACzE,MAAM,CAACG,KAAK,EAAEC,KAAK,CAAC,GAAGjC,YAAY,CAAC4B,SAAS,CAAC;EAE9C,OAAO,CACL;IACE,GAAGD,OAAO;IACVI,IAAI;IACJD,MAAM;IACNI,cAAc,EAAEV,KAAK;IACrBW,YAAY,EAAEV,GAAG;IACjBW,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,cACT5B,UAAU,CAACE,MAAM,iBACFqB,KAAK,MAAMC,KAAK,YAC/BxB,UAAU,CAACC,KAAK,eACH,CAACsB,KAAK,MAAM,CAACC,KAAK;IACnC,CAAC,EACD;MACEI,SAAS,EAAE,cACTzB,QAAQ,CAACD,MAAM,iBACAqB,KAAK,MAAMC,KAAK,YAC/BrB,QAAQ,CAACF,KAAK,eACD,CAACsB,KAAK,MAAM,CAACC,KAAK;IACnC,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/esm/library/scroll/MoveScroll.js

@@ -0,0 +1,120 @@
+import { getCssUnits, transformPolarToXY } from '../../utils';
+const POWER_MAP = {
+  soft: {
+    value: 150,
+    type: 'px'
+  },
+  medium: {
+    value: 400,
+    type: 'px'
+  },
+  hard: {
+    value: 800,
+    type: 'px'
+  }
+};
+const RANGES_MAP = {
+  in: (travelX, travelY) => ({
+    fromValue: {
+      x: travelX,
+      y: travelY
+    },
+    toValue: {
+      x: 0,
+      y: 0
+    }
+  }),
+  out: (travelX, travelY) => ({
+    fromValue: {
+      x: 0,
+      y: 0
+    },
+    toValue: {
+      x: travelX,
+      y: travelY
+    }
+  }),
+  continuous: (travelX, travelY) => ({
+    fromValue: {
+      x: travelX,
+      y: travelY
+    },
+    toValue: {
+      x: -travelX,
+      y: -travelY
+    }
+  })
+};
+function getScrubOffsets(_ref) {
+  let {
+    angle = 210,
+    distance = {
+      value: 400,
+      type: 'px'
+    },
+    power,
+    range = 'in'
+  } = _ref;
+  const travel = power ? POWER_MAP[power] : distance;
+  const [, travelY] = transformPolarToXY(angle - 90, travel.value);
+  const isTravelingDownwards = travelY < 0 && range !== 'out' || travelY > 0 && range === 'out';
+  const units = getCssUnits(travel.type);
+  const startOffsetAdd = isTravelingDownwards ? `${travelY}${units}` : '0px';
+  const endOffsetAdd = isTravelingDownwards ? `${Math.abs(travelY)}${units}` : '0px';
+  return {
+    start: range === 'out' ? '0px' : startOffsetAdd,
+    end: range === 'in' ? '0px' : endOffsetAdd
+  };
+}
+export default function create(options, _, config) {
+  const {
+    power,
+    distance = {
+      value: 400,
+      type: 'px'
+    },
+    angle = 210,
+    range = 'in'
+  } = options.namedEffect;
+  const travel = power ? POWER_MAP[power] : distance;
+  const [travelX, travelY] = transformPolarToXY(angle - 90, travel.value);
+  const {
+    fromValue,
+    toValue
+  } = RANGES_MAP[range](Math.round(travelX), Math.round(travelY));
+  const unit = getCssUnits(travel.type);
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  const {
+    start,
+    end
+  } = config != null && config.ignoreScrollMoveOffsets ? {
+    start: '',
+    end: ''
+  } : getScrubOffsets(options.namedEffect);
+
+  // use transform: translate(<value>) and not translate: <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281
+  return [{
+    ...options,
+    fill,
+    easing,
+    startOffsetAdd: start,
+    endOffsetAdd: end,
+    keyframes: [{
+      transform: `translate(${fromValue.x}${unit}, ${fromValue.y}${unit}) rotate(var(--comp-rotate-z, 0))`
+    }, {
+      transform: `translate(${toValue.x}${unit}, ${toValue.y}${unit}) rotate(var(--comp-rotate-z, 0))`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     transform: translate(<fromValue.x>, <fromValue.y>) rotate(var(--comp-rotate-z, 0));
+   *   }
+   *   to {
+   *     transform: translate(<toValue.x>, <toValue.y>) rotate(var(--comp-rotate-z, 0));
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=MoveScroll.js.map

package/dist/esm/library/scroll/MoveScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getCssUnits","transformPolarToXY","POWER_MAP","soft","value","type","medium","hard","RANGES_MAP","in","travelX","travelY","fromValue","x","y","toValue","out","continuous","getScrubOffsets","_ref","angle","distance","power","range","travel","isTravelingDownwards","units","startOffsetAdd","endOffsetAdd","Math","abs","start","end","create","options","_","config","namedEffect","round","unit","easing","fill","ignoreScrollMoveOffsets","keyframes","transform"],"sources":["../../../../src/library/scroll/MoveScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  DomApi,\n  MoveScroll,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { getCssUnits, transformPolarToXY } from '../../utils';\n\nconst POWER_MAP = {\n  soft: { value: 150, type: 'px' },\n  medium: { value: 400, type: 'px' },\n  hard: { value: 800, type: 'px' },\n};\n\nconst RANGES_MAP = {\n  in: (travelX: number, travelY: number) => ({\n    fromValue: { x: travelX, y: travelY },\n    toValue: { x: 0, y: 0 },\n  }),\n  out: (travelX: number, travelY: number) => ({\n    fromValue: { x: 0, y: 0 },\n    toValue: { x: travelX, y: travelY },\n  }),\n  continuous: (travelX: number, travelY: number) => ({\n    fromValue: { x: travelX, y: travelY },\n    toValue: { x: -travelX, y: -travelY },\n  }),\n};\n\nfunction getScrubOffsets({\n  angle = 210,\n  distance = { value: 400, type: 'px' },\n  power,\n  range = 'in',\n}: MoveScroll) {\n  const travel = power ? POWER_MAP[power] : distance;\n  const [, travelY] = transformPolarToXY(angle - 90, travel.value);\n  const isTravelingDownwards =\n    (travelY < 0 && range !== 'out') || (travelY > 0 && range === 'out');\n\n  const units = getCssUnits(travel.type);\n  const startOffsetAdd = isTravelingDownwards ? `${travelY}${units}` : '0px';\n  const endOffsetAdd = isTravelingDownwards\n    ? `${Math.abs(travelY)}${units}`\n    : '0px';\n\n  return {\n    start: range === 'out' ? '0px' : startOffsetAdd,\n    end: range === 'in' ? '0px' : endOffsetAdd,\n  };\n}\n\nexport default function create(\n  options: ScrubAnimationOptions,\n  _?: DomApi,\n  config?: Record<string, any>,\n) {\n  const {\n    power,\n    distance = { value: 400, type: 'px' },\n    angle = 210,\n    range = 'in',\n  } = options.namedEffect as MoveScroll;\n\n  const travel = power ? POWER_MAP[power] : distance;\n  const [travelX, travelY] = transformPolarToXY(angle - 90, travel.value);\n  const { fromValue, toValue } = RANGES_MAP[range](\n    Math.round(travelX),\n    Math.round(travelY),\n  );\n  const unit = getCssUnits(travel.type);\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n  const { start, end } = config?.ignoreScrollMoveOffsets\n    ? { start: '', end: '' }\n    : getScrubOffsets(options.namedEffect as MoveScroll);\n\n  // use transform: translate(<value>) and not translate: <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      startOffsetAdd: start,\n      endOffsetAdd: end,\n      keyframes: [\n        {\n          transform: `translate(${fromValue.x}${unit}, ${fromValue.y}${unit}) rotate(var(--comp-rotate-z, 0))`,\n        },\n        {\n          transform: `translate(${toValue.x}${unit}, ${toValue.y}${unit}) rotate(var(--comp-rotate-z, 0))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: translate(<fromValue.x>, <fromValue.y>) rotate(var(--comp-rotate-z, 0));\n   *   }\n   *   to {\n   *     transform: translate(<toValue.x>, <toValue.y>) rotate(var(--comp-rotate-z, 0));\n   *   }\n   * }\n   */\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/library/scroll/PanScroll.js

@@ -0,0 +1,73 @@
+import { getCssUnits } from '../../utils';
+const DIRECTIONS = {
+  left: 1,
+  right: -1
+};
+const OFFSCREEN_POSITIONS = {
+  left: {
+    startX: `calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)`,
+    endX: `calc(100vw - var(--motion-left, 0px))`
+  },
+  right: {
+    startX: `calc(100vw - var(--motion-left, 0px))`,
+    endX: `calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)`
+  }
+};
+export default function create(options, dom) {
+  const {
+    distance = {
+      value: 400,
+      type: 'px'
+    },
+    direction = 'left',
+    startFromOffScreen = true,
+    range = 'in'
+  } = options.namedEffect;
+  const travel = distance.value * DIRECTIONS[direction];
+  const {
+    startX,
+    endX
+  } = startFromOffScreen ? OFFSCREEN_POSITIONS[direction] : {
+    startX: `${-travel}${getCssUnits(distance.type)}`,
+    endX: `${travel}${getCssUnits(distance.type)}`
+  };
+  const fromValue = range === 'out' ? 0 : startX;
+  const toValue = range === 'in' ? 0 : range === 'out' ? startX : endX;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  if (startFromOffScreen && dom) {
+    let left = 0;
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      left = target.getBoundingClientRect().left;
+    });
+    dom.mutate(target => {
+      target == null || target.style.setProperty('--motion-left', `${left}px`);
+    });
+  }
+
+  // use transform: translateX(<value>) and not translate: <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes: [{
+      transform: `translateX(${fromValue}) rotate(var(--comp-rotate-z, 0))`
+    }, {
+      transform: `translateX(${toValue}) rotate(var(--comp-rotate-z, 0))`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     transform: translateX(<fromValue>) rotate(var(--comp-rotate-z, 0));
+   *   }
+   *   to {
+   *     transform: translateX(<toValue>) rotate(var(--comp-rotate-z, 0));
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=PanScroll.js.map

package/dist/esm/library/scroll/PanScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getCssUnits","DIRECTIONS","left","right","OFFSCREEN_POSITIONS","startX","endX","create","options","dom","distance","value","type","direction","startFromOffScreen","range","namedEffect","travel","fromValue","toValue","easing","fill","measure","target","getBoundingClientRect","mutate","style","setProperty","keyframes","transform"],"sources":["../../../../src/library/scroll/PanScroll.ts"],"sourcesContent":["import {\n  PanScroll,\n  ScrubAnimationOptions,\n  EffectTwoSides,\n  DomApi,\n  AnimationFillMode,\n} from '../../types';\nimport { getCssUnits } from '../../utils';\n\nconst DIRECTIONS: Record<EffectTwoSides, number> = {\n  left: 1,\n  right: -1,\n};\n\nconst OFFSCREEN_POSITIONS: Record<\n  EffectTwoSides,\n  Record<'startX' | 'endX', string>\n> = {\n  left: {\n    startX: `calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)`,\n    endX: `calc(100vw - var(--motion-left, 0px))`,\n  },\n  right: {\n    startX: `calc(100vw - var(--motion-left, 0px))`,\n    endX: `calc(var(--motion-left, calc(100vw - 100%)) * -1 - 100%)`,\n  },\n};\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const {\n    distance = { value: 400, type: 'px' },\n    direction = 'left',\n    startFromOffScreen = true,\n    range = 'in',\n  } = options.namedEffect as PanScroll;\n  const travel = distance.value * DIRECTIONS[direction];\n  const { startX, endX } = startFromOffScreen\n    ? OFFSCREEN_POSITIONS[direction]\n    : {\n        startX: `${-travel}${getCssUnits(distance.type)}`,\n        endX: `${travel}${getCssUnits(distance.type)}`,\n      };\n\n  const fromValue = range === 'out' ? 0 : startX;\n  const toValue = range === 'in' ? 0 : range === 'out' ? startX : endX;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  if (startFromOffScreen && dom) {\n    let left = 0;\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n      left = target.getBoundingClientRect().left;\n    });\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-left', `${left}px`);\n    });\n  }\n\n  // use transform: translateX(<value>) and not translate: <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          transform: `translateX(${fromValue}) rotate(var(--comp-rotate-z, 0))`,\n        },\n        {\n          transform: `translateX(${toValue}) rotate(var(--comp-rotate-z, 0))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: translateX(<fromValue>) rotate(var(--comp-rotate-z, 0));\n   *   }\n   *   to {\n   *     transform: translateX(<toValue>) rotate(var(--comp-rotate-z, 0));\n   *   }\n   * }\n   */\n}\n"],"mappings":"AAOA,SAASA,WAAW,QAAQ,aAAa;AAEzC,MAAMC,UAA0C,GAAG;EACjDC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;AACV,CAAC;AAED,MAAMC,mBAGL,GAAG;EACFF,IAAI,EAAE;IACJG,MAAM,EAAE,0DAA0D;IAClEC,IAAI,EAAE;EACR,CAAC;EACDH,KAAK,EAAE;IACLE,MAAM,EAAE,uCAAuC;IAC/CC,IAAI,EAAE;EACR;AACF,CAAC;AAED,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAM;IACJC,QAAQ,GAAG;MAAEC,KAAK,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAK,CAAC;IACrCC,SAAS,GAAG,MAAM;IAClBC,kBAAkB,GAAG,IAAI;IACzBC,KAAK,GAAG;EACV,CAAC,GAAGP,OAAO,CAACQ,WAAwB;EACpC,MAAMC,MAAM,GAAGP,QAAQ,CAACC,KAAK,GAAGV,UAAU,CAACY,SAAS,CAAC;EACrD,MAAM;IAAER,MAAM;IAAEC;EAAK,CAAC,GAAGQ,kBAAkB,GACvCV,mBAAmB,CAACS,SAAS,CAAC,GAC9B;IACER,MAAM,EAAE,GAAG,CAACY,MAAM,GAAGjB,WAAW,CAACU,QAAQ,CAACE,IAAI,CAAC,EAAE;IACjDN,IAAI,EAAE,GAAGW,MAAM,GAAGjB,WAAW,CAACU,QAAQ,CAACE,IAAI,CAAC;EAC9C,CAAC;EAEL,MAAMM,SAAS,GAAGH,KAAK,KAAK,KAAK,GAAG,CAAC,GAAGV,MAAM;EAC9C,MAAMc,OAAO,GAAGJ,KAAK,KAAK,IAAI,GAAG,CAAC,GAAGA,KAAK,KAAK,KAAK,GAAGV,MAAM,GAAGC,IAAI;EACpE,MAAMc,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRN,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGP,OAAO,CAACa,IAClD;EAEtB,IAAIP,kBAAkB,IAAIL,GAAG,EAAE;IAC7B,IAAIP,IAAI,GAAG,CAAC;IACZO,GAAG,CAACa,OAAO,CAAEC,MAAM,IAAK;MACtB,IAAI,CAACA,MAAM,EAAE;QACX;MACF;MACArB,IAAI,GAAGqB,MAAM,CAACC,qBAAqB,CAAC,CAAC,CAACtB,IAAI;IAC5C,CAAC,CAAC;IACFO,GAAG,CAACgB,MAAM,CAAEF,MAAM,IAAK;MACrBA,MAAM,YAANA,MAAM,CAAEG,KAAK,CAACC,WAAW,CAAC,eAAe,EAAE,GAAGzB,IAAI,IAAI,CAAC;IACzD,CAAC,CAAC;EACJ;;EAEA;EACA,OAAO,CACL;IACE,GAAGM,OAAO;IACVa,IAAI;IACJD,MAAM;IACNQ,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,cAAcX,SAAS;IACpC,CAAC,EACD;MACEW,SAAS,EAAE,cAAcV,OAAO;IAClC,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/esm/library/scroll/ParallaxScroll.js

@@ -0,0 +1,53 @@
+const DEFAULT_SPEED = 0.5;
+function getOffsetAdd(factor, speed) {
+  return `${100 * factor * speed}vh`;
+}
+function getScrubOffsets(_ref) {
+  let {
+    speed = DEFAULT_SPEED
+  } = _ref;
+  const start = getOffsetAdd(-0.5, speed);
+  const end = getOffsetAdd(0.5, speed);
+  return {
+    start,
+    end
+  };
+}
+export default function create(options) {
+  const {
+    speed = DEFAULT_SPEED
+  } = options.namedEffect;
+  const fromValue = `${-50 * speed}vh`;
+  const toValue = `${50 * speed}vh`;
+  const easing = 'linear';
+  const {
+    start,
+    end
+  } = getScrubOffsets(options.namedEffect);
+
+  // use transform: translateY(<value>) and not translate: 0 <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281
+  return [{
+    ...options,
+    fill: 'both',
+    easing,
+    startOffsetAdd: start,
+    endOffsetAdd: end,
+    keyframes: [{
+      transform: `translateY(${fromValue}) rotate(var(--comp-rotate-z, 0))`
+    }, {
+      transform: `translateY(${toValue}) rotate(var(--comp-rotate-z, 0))`
+    }]
+  }];
+  // only 'continuous' and 0%-100% of range
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     transform: translateY(<fromValue>) rotate(var(--comp-rotate-z, 0));
+   *   }
+   *   to {
+   *     transform: translateY(<toValue>) rotate(var(--comp-rotate-z, 0));
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=ParallaxScroll.js.map

package/dist/esm/library/scroll/ParallaxScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_SPEED","getOffsetAdd","factor","speed","getScrubOffsets","_ref","start","end","create","options","namedEffect","fromValue","toValue","easing","fill","startOffsetAdd","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/scroll/ParallaxScroll.ts"],"sourcesContent":["import type {\n  ScrubAnimationOptions,\n  ParallaxScroll,\n  AnimationFillMode,\n} from '../../types';\n\nconst DEFAULT_SPEED = 0.5;\n\nfunction getOffsetAdd(factor: number, speed: number) {\n  return `${100 * factor * speed}vh`;\n}\n\nfunction getScrubOffsets({ speed = DEFAULT_SPEED }: ParallaxScroll) {\n  const start = getOffsetAdd(-0.5, speed);\n  const end = getOffsetAdd(0.5, speed);\n\n  return {\n    start,\n    end,\n  };\n}\n\nexport default function create(options: ScrubAnimationOptions) {\n  const { speed = DEFAULT_SPEED } = options.namedEffect as ParallaxScroll;\n\n  const fromValue = `${-50 * speed}vh`;\n  const toValue = `${50 * speed}vh`;\n  const easing = 'linear';\n  const { start, end } = getScrubOffsets(options.namedEffect as ParallaxScroll);\n\n  // use transform: translateY(<value>) and not translate: 0 <value> because of WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=276281\n  return [\n    {\n      ...options,\n      fill: 'both' as AnimationFillMode,\n      easing,\n      startOffsetAdd: start,\n      endOffsetAdd: end,\n      keyframes: [\n        {\n          transform: `translateY(${fromValue}) rotate(var(--comp-rotate-z, 0))`,\n        },\n        {\n          transform: `translateY(${toValue}) rotate(var(--comp-rotate-z, 0))`,\n        },\n      ],\n    },\n  ];\n  // only 'continuous' and 0%-100% of range\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: translateY(<fromValue>) rotate(var(--comp-rotate-z, 0));\n   *   }\n   *   to {\n   *     transform: translateY(<toValue>) rotate(var(--comp-rotate-z, 0));\n   *   }\n   * }\n   */\n}\n"],"mappings":"AAMA,MAAMA,aAAa,GAAG,GAAG;AAEzB,SAASC,YAAYA,CAACC,MAAc,EAAEC,KAAa,EAAE;EACnD,OAAO,GAAG,GAAG,GAAGD,MAAM,GAAGC,KAAK,IAAI;AACpC;AAEA,SAASC,eAAeA,CAAAC,IAAA,EAA4C;EAAA,IAA3C;IAAEF,KAAK,GAAGH;EAA8B,CAAC,GAAAK,IAAA;EAChE,MAAMC,KAAK,GAAGL,YAAY,CAAC,CAAC,GAAG,EAAEE,KAAK,CAAC;EACvC,MAAMI,GAAG,GAAGN,YAAY,CAAC,GAAG,EAAEE,KAAK,CAAC;EAEpC,OAAO;IACLG,KAAK;IACLC;EACF,CAAC;AACH;AAEA,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IAAEN,KAAK,GAAGH;EAAc,CAAC,GAAGS,OAAO,CAACC,WAA6B;EAEvE,MAAMC,SAAS,GAAG,GAAG,CAAC,EAAE,GAAGR,KAAK,IAAI;EACpC,MAAMS,OAAO,GAAG,GAAG,EAAE,GAAGT,KAAK,IAAI;EACjC,MAAMU,MAAM,GAAG,QAAQ;EACvB,MAAM;IAAEP,KAAK;IAAEC;EAAI,CAAC,GAAGH,eAAe,CAACK,OAAO,CAACC,WAA6B,CAAC;;EAE7E;EACA,OAAO,CACL;IACE,GAAGD,OAAO;IACVK,IAAI,EAAE,MAA2B;IACjCD,MAAM;IACNE,cAAc,EAAET,KAAK;IACrBU,YAAY,EAAET,GAAG;IACjBU,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,cAAcP,SAAS;IACpC,CAAC,EACD;MACEO,SAAS,EAAE,cAAcN,OAAO;IAClC,CAAC;EAEL,CAAC,CACF;EACD;EACA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/esm/library/scroll/RevealScroll.js

@@ -0,0 +1,88 @@
+import { getClipPolygonParams, getAdjustedDirection } from '../../utils';
+const DIRECTIONS = ['bottom', 'left', 'top', 'right'];
+const OPPOSITE_DIRECTION_MAP = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left'
+};
+const initialClip = getClipPolygonParams({
+  direction: 'initial'
+});
+function getClipFrom(direction, range) {
+  return range === 'out' ? initialClip : getClipPolygonParams({
+    direction: OPPOSITE_DIRECTION_MAP[direction]
+  });
+}
+function getClipTo(direction, range) {
+  return range === 'in' ? initialClip : getClipPolygonParams({
+    direction: range === 'out' ? OPPOSITE_DIRECTION_MAP[direction] : direction
+  });
+}
+export default function create(options, dom) {
+  const {
+    direction = 'bottom',
+    range = 'in'
+  } = options.namedEffect;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  let clipFrom = getClipFrom(direction, range);
+  let clipTo = getClipTo(direction, range);
+  if (dom) {
+    dom.measure(target => {
+      if (!target) {
+        return;
+      }
+      const rotation = getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0';
+      dom.mutate(() => {
+        const adjDirection = getAdjustedDirection(DIRECTIONS, direction, parseInt(rotation, 10));
+        clipFrom = getClipFrom(adjDirection, range);
+        clipTo = getClipTo(adjDirection, range);
+        target.style.setProperty('--motion-clip-from', clipFrom);
+        target.style.setProperty('--motion-clip-to', clipTo);
+      });
+    });
+  }
+  const keyframes = range === 'continuous' ? [{
+    clipPath: `var(--motion-clip-from, ${clipFrom})`
+  }, {
+    clipPath: initialClip
+  }, {
+    clipPath: `var(--motion-clip-to, ${clipTo})`
+  }] : [{
+    clipPath: `var(--motion-clip-from, ${clipFrom})`
+  }, {
+    clipPath: `var(--motion-clip-to, ${clipTo})`
+  }];
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     clip-path: <fromValue>;
+   *   }
+   *   to {
+   *     clip-path: <toValue>;
+   *   }
+   * }
+   *
+   * OR for continuous:
+   *
+   * @keyframes <name> {
+   *   from {
+   *     clip-path: <fromValue>;
+   *   }
+   *   50% {
+   *     clip-path: <initialClip>;
+   *   }
+   *   to {
+   *     clip-path: <toValue>;
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=RevealScroll.js.map

package/dist/esm/library/scroll/RevealScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getClipPolygonParams","getAdjustedDirection","DIRECTIONS","OPPOSITE_DIRECTION_MAP","top","bottom","left","right","initialClip","direction","getClipFrom","range","getClipTo","create","options","dom","namedEffect","easing","fill","clipFrom","clipTo","measure","target","rotation","getComputedStyle","getPropertyValue","mutate","adjDirection","parseInt","style","setProperty","keyframes","clipPath"],"sources":["../../../../src/library/scroll/RevealScroll.ts"],"sourcesContent":["import {\n  EffectFourDirections,\n  RevealScroll,\n  ScrubAnimationOptions,\n  DomApi,\n  AnimationFillMode,\n} from '../../types';\nimport { getClipPolygonParams, getAdjustedDirection } from '../../utils';\n\nconst DIRECTIONS: EffectFourDirections[] = ['bottom', 'left', 'top', 'right'];\n\nconst OPPOSITE_DIRECTION_MAP: Record<\n  EffectFourDirections,\n  EffectFourDirections\n> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n};\n\nconst initialClip = getClipPolygonParams({ direction: 'initial' });\n\nfunction getClipFrom(\n  direction: EffectFourDirections,\n  range: RevealScroll['range'],\n) {\n  return range === 'out'\n    ? initialClip\n    : getClipPolygonParams({\n        direction: OPPOSITE_DIRECTION_MAP[direction],\n      });\n}\nfunction getClipTo(\n  direction: EffectFourDirections,\n  range: RevealScroll['range'],\n) {\n  return range === 'in'\n    ? initialClip\n    : getClipPolygonParams({\n        direction:\n          range === 'out' ? OPPOSITE_DIRECTION_MAP[direction] : direction,\n      });\n}\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const { direction = 'bottom', range = 'in' } =\n    options.namedEffect as RevealScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  let clipFrom = getClipFrom(direction, range);\n  let clipTo = getClipTo(direction, range);\n\n  if (dom) {\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rotation =\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0';\n\n      dom.mutate(() => {\n        const adjDirection = getAdjustedDirection(\n          DIRECTIONS,\n          direction,\n          parseInt(rotation, 10),\n        ) as (typeof DIRECTIONS)[number];\n\n        clipFrom = getClipFrom(adjDirection, range);\n        clipTo = getClipTo(adjDirection, range);\n\n        target.style.setProperty('--motion-clip-from', clipFrom);\n        target.style.setProperty('--motion-clip-to', clipTo);\n      });\n    });\n  }\n\n  const keyframes =\n    range === 'continuous'\n      ? [\n          { clipPath: `var(--motion-clip-from, ${clipFrom})` },\n          { clipPath: initialClip },\n          { clipPath: `var(--motion-clip-to, ${clipTo})` },\n        ]\n      : ([\n          { clipPath: `var(--motion-clip-from, ${clipFrom})` },\n          { clipPath: `var(--motion-clip-to, ${clipTo})` },\n        ] as {\n          clipPath: string;\n        }[]);\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes,\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     clip-path: <fromValue>;\n   *   }\n   *   to {\n   *     clip-path: <toValue>;\n   *   }\n   * }\n   *\n   * OR for continuous:\n   *\n   * @keyframes <name> {\n   *   from {\n   *     clip-path: <fromValue>;\n   *   }\n   *   50% {\n   *     clip-path: <initialClip>;\n   *   }\n   *   to {\n   *     clip-path: <toValue>;\n   *   }\n   * }\n   */\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/library/scroll/ShapeScroll.js

@@ -0,0 +1,110 @@
+import { getEasing } from '../../utils';
+const SHAPES = {
+  diamond: {
+    start: {
+      soft: 'polygon(50% 20%, 80% 50%, 50% 80%, 20% 50%)',
+      medium: 'polygon(50% 40%, 60% 50%, 50% 60%, 40% 50%)',
+      hard: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)'
+    },
+    end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)'
+  },
+  window: {
+    start: {
+      soft: 'inset(20% round 50% 50% 0% 0%)',
+      medium: 'inset(35% round 50% 50% 0% 0%)',
+      hard: 'inset(50% round 50% 50% 0% 0%)'
+    },
+    end: 'inset(-20% round 50% 50% 0% 0%)'
+  },
+  rectangle: {
+    start: {
+      soft: 'inset(20%)',
+      medium: 'inset(50%)',
+      hard: 'inset(80%)'
+    },
+    end: 'inset(0%)'
+  },
+  circle: {
+    start: {
+      soft: 'circle(40%)',
+      medium: 'circle(25%)',
+      hard: 'circle(0%)'
+    },
+    end: 'circle(75%)'
+  },
+  ellipse: {
+    start: {
+      soft: 'ellipse(50% 50%)',
+      medium: 'ellipse(30% 30%)',
+      hard: 'ellipse(0% 0%)'
+    },
+    end: 'ellipse(75% 75%)'
+  }
+};
+const RESPONSIVE_SHAPES_MAP = {
+  diamond: clipFactor => {
+    const clip = clipFactor / 2;
+    const clipNeg = 100 - clip;
+    return [`polygon(50% ${clip}%, ${clipNeg}% 50%, 50% ${clipNeg}%, ${clip}% 50%)`, 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)'];
+  },
+  window: clipFactor => [`inset(${clipFactor / 2}% round 50% 50% 0% 0%)`, 'inset(-20% round 50% 50% 0% 0%)'],
+  rectangle: clipFactor => [`inset(${clipFactor}%)`, `inset(0%)`],
+  circle: clipFactor => [`circle(${100 - clipFactor}%)`, `circle(75%)`],
+  ellipse: clipFactor => {
+    const clip = 50 - clipFactor / 2;
+    return [`ellipse(${clip}% ${clip}%)`, `ellipse(75% 75%)`];
+  }
+};
+const easing = getEasing('circInOut');
+const KEYFRAMES_RANGE_MAP = {
+  in: (start, end) => [{
+    clipPath: start,
+    easing
+  }, {
+    clipPath: end
+  }],
+  out: (start, end) => [{
+    clipPath: end,
+    easing
+  }, {
+    clipPath: start
+  }],
+  continuous: (start, end) => [{
+    clipPath: start,
+    easing
+  }, {
+    clipPath: end,
+    easing
+  }, {
+    clipPath: start
+  }]
+};
+export default function create(options) {
+  const {
+    shape = 'circle',
+    power,
+    intensity = 0.5,
+    range = 'in'
+  } = options.namedEffect;
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  const [start, end] = power && SHAPES[shape].start[power] ? [SHAPES[shape].start[power], SHAPES[shape].end] : RESPONSIVE_SHAPES_MAP[shape](intensity * 100);
+  const keyframes = KEYFRAMES_RANGE_MAP[range](start, end);
+  return [{
+    ...options,
+    fill,
+    easing: 'linear',
+    keyframes
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     clip-path: <fromValue>;
+   *     easing: <easing>;
+   *   }
+   *   to {
+   *     clip-path: <toValue>;
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=ShapeScroll.js.map

package/dist/esm/library/scroll/ShapeScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getEasing","SHAPES","diamond","start","soft","medium","hard","end","window","rectangle","circle","ellipse","RESPONSIVE_SHAPES_MAP","clipFactor","clip","clipNeg","easing","KEYFRAMES_RANGE_MAP","in","clipPath","out","continuous","create","options","shape","power","intensity","range","namedEffect","fill","keyframes"],"sources":["../../../../src/library/scroll/ShapeScroll.ts"],"sourcesContent":["import {\n  EffectPower,\n  AnimationData,\n  EffectScrollRange,\n  ScrubAnimationOptions,\n  ShapeScroll,\n  AnimationFillMode,\n} from '../../types';\nimport { getEasing } from '../../utils';\n\nconst SHAPES: Record<\n  ShapeScroll['shape'],\n  { start: Record<EffectPower, string>; end: string }\n> = {\n  diamond: {\n    start: {\n      soft: 'polygon(50% 20%, 80% 50%, 50% 80%, 20% 50%)',\n      medium: 'polygon(50% 40%, 60% 50%, 50% 60%, 40% 50%)',\n      hard: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',\n    },\n    end: 'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',\n  },\n  window: {\n    start: {\n      soft: 'inset(20% round 50% 50% 0% 0%)',\n      medium: 'inset(35% round 50% 50% 0% 0%)',\n      hard: 'inset(50% round 50% 50% 0% 0%)',\n    },\n    end: 'inset(-20% round 50% 50% 0% 0%)',\n  },\n  rectangle: {\n    start: {\n      soft: 'inset(20%)',\n      medium: 'inset(50%)',\n      hard: 'inset(80%)',\n    },\n    end: 'inset(0%)',\n  },\n  circle: {\n    start: {\n      soft: 'circle(40%)',\n      medium: 'circle(25%)',\n      hard: 'circle(0%)',\n    },\n    end: 'circle(75%)',\n  },\n  ellipse: {\n    start: {\n      soft: 'ellipse(50% 50%)',\n      medium: 'ellipse(30% 30%)',\n      hard: 'ellipse(0% 0%)',\n    },\n    end: 'ellipse(75% 75%)',\n  },\n};\n\nconst RESPONSIVE_SHAPES_MAP = {\n  diamond: (clipFactor: number) => {\n    const clip = clipFactor / 2;\n    const clipNeg = 100 - clip;\n    return [\n      `polygon(50% ${clip}%, ${clipNeg}% 50%, 50% ${clipNeg}%, ${clip}% 50%)`,\n      'polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%)',\n    ];\n  },\n  window: (clipFactor: number) => [\n    `inset(${clipFactor / 2}% round 50% 50% 0% 0%)`,\n    'inset(-20% round 50% 50% 0% 0%)',\n  ],\n  rectangle: (clipFactor: number) => [`inset(${clipFactor}%)`, `inset(0%)`],\n  circle: (clipFactor: number) => [\n    `circle(${100 - clipFactor}%)`,\n    `circle(75%)`,\n  ],\n  ellipse: (clipFactor: number) => {\n    const clip = 50 - clipFactor / 2;\n    return [`ellipse(${clip}% ${clip}%)`, `ellipse(75% 75%)`];\n  },\n};\n\nconst easing = getEasing('circInOut');\n\nconst KEYFRAMES_RANGE_MAP: Record<\n  EffectScrollRange,\n  (start: string, end: string) => AnimationData['keyframes']\n> = {\n  in: (start: string, end: string) => [\n    {\n      clipPath: start,\n      easing,\n    },\n    {\n      clipPath: end,\n    },\n  ],\n  out: (start: string, end: string) => [\n    {\n      clipPath: end,\n      easing,\n    },\n    {\n      clipPath: start,\n    },\n  ],\n  continuous: (start: string, end: string) => [\n    {\n      clipPath: start,\n      easing,\n    },\n    {\n      clipPath: end,\n      easing,\n    },\n    {\n      clipPath: start,\n    },\n  ],\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const {\n    shape = 'circle',\n    power,\n    intensity = 0.5,\n    range = 'in',\n  } = options.namedEffect as ShapeScroll;\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const [start, end] =\n    power && SHAPES[shape].start[power]\n      ? [SHAPES[shape].start[power], SHAPES[shape].end]\n      : RESPONSIVE_SHAPES_MAP[shape](intensity * 100);\n\n  const keyframes = KEYFRAMES_RANGE_MAP[range](start, end);\n\n  return [\n    {\n      ...options,\n      fill,\n      easing: 'linear',\n      keyframes,\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     clip-path: <fromValue>;\n   *     easing: <easing>;\n   *   }\n   *   to {\n   *     clip-path: <toValue>;\n   *   }\n   * }\n   */\n}\n"],"mappings":"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","ignoreList":[]}