@wix/motion 1.661.0 → 1.662.0

package/dist/cjs/library/scroll/ShrinkScroll.js.map

@@ -1 +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","power","range","speed","offset","Math","abs","start","end","create","options","direction","namedEffect","fill","easing","startOffsetAdd","endOffsetAdd","trnsX","trnsY","keyframes","transform"],"sources":["../../../../src/library/scroll/ShrinkScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  ShrinkScroll,\n} from '../../types';\n\nconst MAX_Y_TRAVEL = 40;\nconst POWER_MAP = {\n  soft: { scaleFrom: 1.2, scaleTo: 0.8, travelY: 0 },\n  medium: { scaleFrom: 1.7, scaleTo: 0.3, travelY: 0.5 },\n  hard: { scaleFrom: 3.5, scaleTo: 0, 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 }: ShrinkScroll) {\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' ? 1.2 : 0.8,\n    direction = 'center',\n    speed = 0,\n  } = options.namedEffect as ShrinkScroll;\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\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 easing = 'linear';\n\n  const { start: startOffsetAdd, end: endOffsetAdd } = getScrubOffsets(\n    options.namedEffect as ShrinkScroll,\n  );\n\n  const [trnsX, trnsY] = directionMap[direction];\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      startOffsetAdd,\n      endOffsetAdd,\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  /* // we may want to squash both animations into a single one and simply generate dynamically all the necessary keyframes to reach same result\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   *     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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","ignoreList":[]}
+{"version":3,"names":["_utils","require","MAX_Y_TRAVEL","POWER_MAP","soft","scaleFrom","scaleTo","travelY","medium","hard","directionMap","top","right","bottom","left","center","getNames","_","web","options","_dom","style","asWeb","power","range","scale","direction","speed","namedEffect","easing","fill","travel","fromValues","toValues","offset","Math","abs","startOffsetAdd","endOffsetAdd","trnsX","trnsY","shrinkScroll","custom","name","keyframes","transform","toKeyframeValue"],"sources":["../../../../src/library/scroll/ShrinkScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  ShrinkScroll,\n  DomApi,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\n\nconst MAX_Y_TRAVEL = 40;\nconst POWER_MAP = {\n  soft: { scaleFrom: 1.2, scaleTo: 0.8, travelY: 0 },\n  medium: { scaleFrom: 1.7, scaleTo: 0.3, travelY: 0.5 },\n  hard: { scaleFrom: 3.5, scaleTo: 0, 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\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-shrinkScroll'];\n}\n\nexport function web(options: ScrubAnimationOptions, _dom?: DomApi) {\n  return style(options, true);\n}\n\nexport function style(options: ScrubAnimationOptions, asWeb = false) {\n  const {\n    power,\n    range = 'in',\n    scale = range === 'in' ? 1.2 : 0.8,\n    direction = 'center',\n    speed = 0,\n  } = options.namedEffect as ShrinkScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\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  const travel = travelY * MAX_Y_TRAVEL;\n\n  const fromValues = {\n    scale: range === 'out' ? 1 : scaleFrom,\n    travel: range === 'out' ? 0 : -travel,\n  };\n  const toValues = {\n    scale: range === 'in' ? 1 : scaleTo,\n    travel: range === 'in' ? 0 : travel,\n  };\n\n  const offset = Math.abs(\n    power && POWER_MAP[power] ? POWER_MAP[power].travelY : travel,\n  );\n  const startOffsetAdd = range === 'out' ? '0px' : `${-offset}vh`;\n  const endOffsetAdd = range === 'in' ? '0px' : `${offset}vh`;\n\n  const [trnsX, trnsY] = directionMap[direction] || [0, 0];\n\n  const [shrinkScroll] = getNames(options);\n\n  const custom = {\n    '--motion-travel-from': `${fromValues.travel}vh`,\n    '--motion-travel-to': `${toValues.travel}vh`,\n    '--motion-shrink-from': fromValues.scale,\n    '--motion-shrink-to': toValues.scale,\n    '--motion-trans-x': `${trnsX}%`,\n    '--motion-trans-y': `${trnsY}%`,\n  };\n\n  return [\n    {\n      ...options,\n      name: shrinkScroll,\n      fill,\n      easing,\n      custom,\n      startOffsetAdd,\n      endOffsetAdd,\n      keyframes: [\n        {\n          transform: `translateY(${toKeyframeValue(\n            custom,\n            '--motion-travel-from',\n            asWeb,\n          )}) translate(${toKeyframeValue(\n            custom,\n            '--motion-trans-x',\n            asWeb,\n          )}, ${toKeyframeValue(\n            custom,\n            '--motion-trans-y',\n            asWeb,\n          )}) scale(${toKeyframeValue(\n            custom,\n            '--motion-shrink-from',\n            asWeb,\n          )}) translate(calc(-1 * ${toKeyframeValue(\n            custom,\n            '--motion-trans-x',\n            asWeb,\n          )}), calc(-1 * ${toKeyframeValue(\n            custom,\n            '--motion-trans-y',\n            asWeb,\n          )})) rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')})`,\n        },\n        {\n          transform: `translateY(${toKeyframeValue(\n            custom,\n            '--motion-travel-to',\n            asWeb,\n          )}) translate(${toKeyframeValue(\n            custom,\n            '--motion-trans-x',\n            asWeb,\n          )}, ${toKeyframeValue(\n            custom,\n            '--motion-trans-y',\n            asWeb,\n          )}) scale(${toKeyframeValue(\n            custom,\n            '--motion-shrink-to',\n            asWeb,\n          )}) translate(calc(-1 * ${toKeyframeValue(\n            custom,\n            '--motion-trans-x',\n            asWeb,\n          )}), calc(-1 * ${toKeyframeValue(\n            custom,\n            '--motion-trans-y',\n            asWeb,\n          )})) rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')})`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/scroll/ShuttersScroll.js

@@ -1,15 +1,20 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
+exports.getNames = getNames;
+exports.style = style;
+exports.web = web;
 var _utils = require("../../utils");
-const OPPOSITE_DIRECTION_MAP = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right'
-};
-function create(options) {
+function getNames(options) {
+  const {
+    range = 'in'
+  } = options.namedEffect;
+  return [`motion-shuttersScroll-${range === 'continuous' ? '-continuous' : ''}`];
+}
+function web(options, _dom) {
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const {
     direction = 'right',
     shutters = 12,
@@ -18,49 +23,52 @@ function create(options) {
   } = options.namedEffect;
   const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
   const easing = range === 'in' ? (0, _utils.getEasing)('sineIn') : (0, _utils.getEasing)('sineOut');
-  const directionOpp = OPPOSITE_DIRECTION_MAP[direction];
+  const directionOpp = (0, _utils.getOppositeDirection)(_utils.FOUR_DIRECTIONS, direction);
   const {
     clipStart,
     clipEnd
   } = (0, _utils.getShuttersClipPaths)(range === 'out' ? directionOpp : direction, shutters, staggered);
-  const start = range !== 'out' ? clipStart : clipEnd;
-  const end = range !== 'out' ? clipEnd : clipStart;
-  let keyframes;
+  const custom = {
+    '--motion-shutters-clip-start': range === 'out' ? clipEnd : clipStart,
+    '--motion-shutters-clip-end': range === 'out' ? clipStart : clipEnd
+  };
+  const [shuttersScroll] = getNames(options);
+  const keyframes = [{
+    clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shutters-clip-start', asWeb),
+    easing
+  }, {
+    clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shutters-clip-end', asWeb)
+  }];
   if (range === 'continuous') {
+    keyframes[1].easing = easing;
+    keyframes[1].offset = staggered ? 0.45 : 0.4;
     const {
       clipStart: oppClipStart,
       clipEnd: oppClipEnd
     } = (0, _utils.getShuttersClipPaths)(directionOpp, shutters, staggered, true);
-    keyframes = [{
-      clipPath: start,
-      easing
-    }, {
-      clipPath: end,
-      offset: staggered ? 0.45 : 0.4,
-      easing
-    }, {
-      clipPath: end,
-      offset: staggered ? 0.55 : 0.6,
-      easing
-    }, {
-      clipPath: oppClipEnd,
-      offset: staggered ? 0.55 : 0.6,
+    Object.assign(custom, {
+      '--motion-shutters-clip-opp-end': oppClipEnd,
+      '--motion-shutters-clip-opp-start': oppClipStart
+    });
+    const secondOffset = staggered ? 0.55 : 0.6;
+    keyframes.push({
+      clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shutters-clip-end', asWeb),
+      offset: secondOffset,
       easing
     }, {
-      clipPath: oppClipStart
-    }];
-  } else {
-    keyframes = [{
-      clipPath: start,
+      clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shutters-clip-opp-end', asWeb),
+      offset: secondOffset,
       easing
     }, {
-      clipPath: end
-    }];
+      clipPath: (0, _utils.toKeyframeValue)(custom, '--motion-shutters-clip-opp-start', asWeb)
+    });
   }
   return [{
     ...options,
+    name: shuttersScroll,
     fill,
     easing: 'linear',
+    custom,
     keyframes
   }];
 }

package/dist/cjs/library/scroll/ShuttersScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","OPPOSITE_DIRECTION_MAP","top","right","bottom","left","create","options","direction","shutters","staggered","range","namedEffect","fill","easing","getEasing","directionOpp","clipStart","clipEnd","getShuttersClipPaths","start","end","keyframes","oppClipStart","oppClipEnd","clipPath","offset"],"sources":["../../../../src/library/scroll/ShuttersScroll.ts"],"sourcesContent":["import {\n  EffectFourDirections,\n  ShuttersScroll,\n  ScrubAnimationOptions,\n  AnimationFillMode,\n} from '../../types';\nimport { getShuttersClipPaths, getEasing } from '../../utils';\n\nconst OPPOSITE_DIRECTION_MAP: Record<\n  EffectFourDirections,\n  EffectFourDirections\n> = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const {\n    direction = 'right',\n    shutters = 12,\n    staggered = true,\n    range = 'in',\n  } = options.namedEffect as ShuttersScroll;\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const easing = range === 'in' ? getEasing('sineIn') : getEasing('sineOut');\n  const directionOpp = OPPOSITE_DIRECTION_MAP[direction];\n  const { clipStart, clipEnd } = getShuttersClipPaths(\n    range === 'out' ? directionOpp : direction,\n    shutters,\n    staggered,\n  );\n  const start = range !== 'out' ? clipStart : clipEnd;\n  const end = range !== 'out' ? clipEnd : clipStart;\n  let keyframes;\n\n  if (range === 'continuous') {\n    const { clipStart: oppClipStart, clipEnd: oppClipEnd } =\n      getShuttersClipPaths(directionOpp, shutters, staggered, true);\n\n    keyframes = [\n      {\n        clipPath: start,\n        easing,\n      },\n      {\n        clipPath: end,\n        offset: staggered ? 0.45 : 0.4,\n        easing,\n      },\n      {\n        clipPath: end,\n        offset: staggered ? 0.55 : 0.6,\n        easing,\n      },\n      {\n        clipPath: oppClipEnd,\n        offset: staggered ? 0.55 : 0.6,\n        easing,\n      },\n      {\n        clipPath: oppClipStart,\n      },\n    ];\n  } else {\n    keyframes = [\n      {\n        clipPath: start,\n        easing,\n      },\n      {\n        clipPath: end,\n      },\n    ];\n  }\n\n  return [\n    {\n      ...options,\n      fill,\n      easing: 'linear',\n      keyframes,\n    },\n  ];\n}\n"],"mappings":";;;;AAMA,IAAAA,MAAA,GAAAC,OAAA;AAEA,MAAMC,sBAGL,GAAG;EACFC,GAAG,EAAE,QAAQ;EACbC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE;AACR,CAAC;AAEc,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IACJC,SAAS,GAAG,OAAO;IACnBC,QAAQ,GAAG,EAAE;IACbC,SAAS,GAAG,IAAI;IAChBC,KAAK,GAAG;EACV,CAAC,GAAGJ,OAAO,CAACK,WAA6B;EACzC,MAAMC,IAAI,GACRF,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGJ,OAAO,CAACM,IAClD;EAEtB,MAAMC,MAAM,GAAGH,KAAK,KAAK,IAAI,GAAG,IAAAI,gBAAS,EAAC,QAAQ,CAAC,GAAG,IAAAA,gBAAS,EAAC,SAAS,CAAC;EAC1E,MAAMC,YAAY,GAAGf,sBAAsB,CAACO,SAAS,CAAC;EACtD,MAAM;IAAES,SAAS;IAAEC;EAAQ,CAAC,GAAG,IAAAC,2BAAoB,EACjDR,KAAK,KAAK,KAAK,GAAGK,YAAY,GAAGR,SAAS,EAC1CC,QAAQ,EACRC,SACF,CAAC;EACD,MAAMU,KAAK,GAAGT,KAAK,KAAK,KAAK,GAAGM,SAAS,GAAGC,OAAO;EACnD,MAAMG,GAAG,GAAGV,KAAK,KAAK,KAAK,GAAGO,OAAO,GAAGD,SAAS;EACjD,IAAIK,SAAS;EAEb,IAAIX,KAAK,KAAK,YAAY,EAAE;IAC1B,MAAM;MAAEM,SAAS,EAAEM,YAAY;MAAEL,OAAO,EAAEM;IAAW,CAAC,GACpD,IAAAL,2BAAoB,EAACH,YAAY,EAAEP,QAAQ,EAAEC,SAAS,EAAE,IAAI,CAAC;IAE/DY,SAAS,GAAG,CACV;MACEG,QAAQ,EAAEL,KAAK;MACfN;IACF,CAAC,EACD;MACEW,QAAQ,EAAEJ,GAAG;MACbK,MAAM,EAAEhB,SAAS,GAAG,IAAI,GAAG,GAAG;MAC9BI;IACF,CAAC,EACD;MACEW,QAAQ,EAAEJ,GAAG;MACbK,MAAM,EAAEhB,SAAS,GAAG,IAAI,GAAG,GAAG;MAC9BI;IACF,CAAC,EACD;MACEW,QAAQ,EAAED,UAAU;MACpBE,MAAM,EAAEhB,SAAS,GAAG,IAAI,GAAG,GAAG;MAC9BI;IACF,CAAC,EACD;MACEW,QAAQ,EAAEF;IACZ,CAAC,CACF;EACH,CAAC,MAAM;IACLD,SAAS,GAAG,CACV;MACEG,QAAQ,EAAEL,KAAK;MACfN;IACF,CAAC,EACD;MACEW,QAAQ,EAAEJ;IACZ,CAAC,CACF;EACH;EAEA,OAAO,CACL;IACE,GAAGd,OAAO;IACVM,IAAI;IACJC,MAAM,EAAE,QAAQ;IAChBQ;EACF,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["_utils","require","getNames","options","range","namedEffect","web","_dom","style","asWeb","direction","shutters","staggered","fill","easing","getEasing","directionOpp","getOppositeDirection","FOUR_DIRECTIONS","clipStart","clipEnd","getShuttersClipPaths","custom","shuttersScroll","keyframes","clipPath","toKeyframeValue","offset","oppClipStart","oppClipEnd","Object","assign","secondOffset","push","name"],"sources":["../../../../src/library/scroll/ShuttersScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  ShuttersScroll,\n  DomApi,\n} from '../../types';\nimport {\n  getOppositeDirection,\n  getShuttersClipPaths,\n  getEasing,\n  toKeyframeValue,\n  FOUR_DIRECTIONS,\n} from '../../utils';\n\nexport function getNames(options: ScrubAnimationOptions) {\n  const { range = 'in' } = options.namedEffect as ShuttersScroll;\n  return [\n    `motion-shuttersScroll-${range === 'continuous' ? '-continuous' : ''}`,\n  ];\n}\n\nexport function web(options: ScrubAnimationOptions, _dom?: DomApi) {\n  return style(options, true);\n}\n\nexport function style(options: ScrubAnimationOptions, asWeb = false) {\n  const {\n    direction = 'right',\n    shutters = 12,\n    staggered = true,\n    range = 'in',\n  } = options.namedEffect as ShuttersScroll;\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const easing = range === 'in' ? getEasing('sineIn') : getEasing('sineOut');\n\n  const directionOpp = getOppositeDirection(FOUR_DIRECTIONS, direction);\n\n  const { clipStart, clipEnd } = getShuttersClipPaths(\n    range === 'out' ? directionOpp : direction,\n    shutters,\n    staggered,\n  );\n\n  const custom = {\n    '--motion-shutters-clip-start': range === 'out' ? clipEnd : clipStart,\n    '--motion-shutters-clip-end': range === 'out' ? clipStart : clipEnd,\n  };\n\n  const [shuttersScroll] = getNames(options);\n\n  const keyframes: {\n    clipPath: string | number;\n    easing?: string;\n    offset?: number;\n  }[] = [\n    {\n      clipPath: toKeyframeValue(custom, '--motion-shutters-clip-start', asWeb),\n      easing,\n    },\n    {\n      clipPath: toKeyframeValue(custom, '--motion-shutters-clip-end', asWeb),\n    },\n  ];\n\n  if (range === 'continuous') {\n    keyframes[1].easing = easing;\n    keyframes[1].offset = staggered ? 0.45 : 0.4;\n\n    const { clipStart: oppClipStart, clipEnd: oppClipEnd } =\n      getShuttersClipPaths(directionOpp, shutters, staggered, true);\n    Object.assign(custom, {\n      '--motion-shutters-clip-opp-end': oppClipEnd,\n      '--motion-shutters-clip-opp-start': oppClipStart,\n    });\n\n    const secondOffset = staggered ? 0.55 : 0.6;\n    keyframes.push(\n      {\n        clipPath: toKeyframeValue(custom, '--motion-shutters-clip-end', asWeb),\n        offset: secondOffset,\n        easing,\n      },\n      {\n        clipPath: toKeyframeValue(\n          custom,\n          '--motion-shutters-clip-opp-end',\n          asWeb,\n        ),\n        offset: secondOffset,\n        easing,\n      },\n      {\n        clipPath: toKeyframeValue(\n          custom,\n          '--motion-shutters-clip-opp-start',\n          asWeb,\n        ),\n      },\n    );\n  }\n\n  return [\n    {\n      ...options,\n      name: shuttersScroll,\n      fill,\n      easing: 'linear',\n      custom,\n      keyframes,\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/scroll/SkewPanScroll.js

@@ -1,84 +1,22 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
 const POWER_MAP = {
-  soft: {
-    skewX: 10
-  },
-  medium: {
-    skewX: 17
-  },
-  hard: {
-    skewX: 24
-  }
-};
-const DIRECTION_MAP = {
-  right: -1,
-  left: 1
+  soft: 10,
+  medium: 17,
+  hard: 24
 };
-const RANGES_MAP = {
-  in: (skewX, startX, _endX) => ({
-    fromValues: {
-      skewX,
-      startX
-    },
-    toValues: {
-      skewX: 0,
-      endX: 0
-    }
-  }),
-  out: (skewX, startX, _endX) => ({
-    fromValues: {
-      skewX: 0,
-      startX: 0
-    },
-    toValues: {
-      skewX: -skewX,
-      endX: startX
-    }
-  }),
-  continuous: (skewX, startX, endX) => ({
-    fromValues: {
-      skewX,
-      startX
-    },
-    toValues: {
-      skewX: -skewX,
-      endX
-    }
-  })
-};
-const 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%)`
-  }
-};
-function create(options, dom) {
-  const {
-    skew = 10,
-    direction = 'right',
-    power,
-    range = 'in'
-  } = options.namedEffect;
-  const easing = 'linear';
-  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
-  const skewX = (power && POWER_MAP[power] ? POWER_MAP[power].skewX : skew) * DIRECTION_MAP[direction];
-  const {
-    startX,
-    endX
-  } = POSITIONS[direction];
-  const {
-    fromValues,
-    toValues
-  } = RANGES_MAP[range](skewX, startX, endX);
-  let left = 0;
+function getNames(_) {
+  return ['motion-skewPanScroll'];
+}
+function prepare(_, dom) {
   if (dom) {
+    let left = 0;
     dom.measure(target => {
       if (!target) {
         return;
@@ -89,25 +27,50 @@ function create(options, dom) {
       target == null || target.style.setProperty('--motion-left', `${left}px`);
     });
   }
+}
+function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
+  const {
+    skew = 10,
+    direction = 'right',
+    power,
+    range = 'in'
+  } = options.namedEffect;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  const skewX = (power && POWER_MAP[power] ? POWER_MAP[power] : skew) * (direction === 'left' ? 1 : -1);
+  const startXLeft = `calc(${(0, _utils.toKeyframeValue)({}, '--motion-left', false, 'calc(100vw - 100%)')} * -1 - 100%)`;
+  const endXLeft = `calc(100vw - ${(0, _utils.toKeyframeValue)({}, '--motion-left', false, '0px')})`;
+  const [startX, endX] = direction === 'left' ? [startXLeft, endXLeft] : [endXLeft, startXLeft];
+  const fromValues = {
+    skew: range === 'out' ? 0 : skewX,
+    translate: range === 'out' ? 0 : startX
+  };
+  const toValues = {
+    skew: range === 'in' ? 0 : -skewX,
+    translate: range === 'in' ? 0 : range === 'out' ? startX : endX
+  };
+  const [skewPanScroll] = getNames(options);
+  const custom = {
+    '--motion-skewpan-start-x': fromValues.translate,
+    '--motion-skewpan-end-x': toValues.translate,
+    '--motion-skewpan-from-skew': `${fromValues.skew}deg`,
+    '--motion-skewpan-to-skew': `${toValues.skew}deg`
+  };
   return [{
     ...options,
+    name: skewPanScroll,
     fill,
     easing,
+    custom,
     keyframes: [{
-      transform: `translateX(${fromValues.startX}) skewX(${fromValues.skewX}deg) rotate(var(--comp-rotate-z, 0))`
+      transform: `translateX(${(0, _utils.toKeyframeValue)(custom, '--motion-skewpan-start-x', asWeb)}) skewX(${(0, _utils.toKeyframeValue)(custom, '--motion-skewpan-from-skew', asWeb)}) rotate(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0')})`
     }, {
-      transform: `translateX(${toValues.endX}) skewX(${toValues.skewX}deg) rotate(var(--comp-rotate-z, 0))`
+      transform: `translateX(${(0, _utils.toKeyframeValue)(custom, '--motion-skewpan-end-x', asWeb)}) skewX(${(0, _utils.toKeyframeValue)(custom, '--motion-skewpan-to-skew', asWeb)}) rotate(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0')})`
     }]
   }];
-  /*
-   * @keyframes <name> {
-   *   from {
-   *     transform: translateX(<fromValue.startX>) skewX(<fromValue.skew>) rotate(<rotation>);
-   *   }
-   *   to {
-   *     transform: translateX(<toValue.endX>) skewX(<toValue.skew>) rotate(<rotation>);
-   *   }
-   * }
-   */
 }
 //# sourceMappingURL=SkewPanScroll.js.map

package/dist/cjs/library/scroll/SkewPanScroll.js.map

@@ -1 +1 @@
-{"version":3,"names":["POWER_MAP","soft","skewX","medium","hard","DIRECTION_MAP","right","left","RANGES_MAP","in","startX","_endX","fromValues","toValues","endX","out","continuous","POSITIONS","create","options","dom","skew","direction","power","range","namedEffect","easing","fill","measure","target","getBoundingClientRect","mutate","style","setProperty","keyframes","transform"],"sources":["../../../../src/library/scroll/SkewPanScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  DomApi,\n  ScrubAnimationOptions,\n  SkewPanScroll,\n} from '../../types';\n\nconst POWER_MAP = {\n  soft: { skewX: 10 },\n  medium: { skewX: 17 },\n  hard: { skewX: 24 },\n};\n\nconst DIRECTION_MAP = {\n  right: -1,\n  left: 1,\n};\n\nconst RANGES_MAP = {\n  in: (skewX: number, startX: string, _endX: string) => ({\n    fromValues: { skewX, startX },\n    toValues: { skewX: 0, endX: 0 },\n  }),\n  out: (skewX: number, startX: string, _endX: string) => ({\n    fromValues: { skewX: 0, startX: 0 },\n    toValues: { skewX: -skewX, endX: startX },\n  }),\n  continuous: (skewX: number, startX: string, endX: string) => ({\n    fromValues: { skewX, startX },\n    toValues: { skewX: -skewX, endX },\n  }),\n};\n\nconst POSITIONS = {\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    skew = 10,\n    direction = 'right',\n    power,\n    range = 'in',\n  } = options.namedEffect as SkewPanScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const skewX =\n    (power && POWER_MAP[power] ? POWER_MAP[power!].skewX : skew) *\n    DIRECTION_MAP[direction];\n  const { startX, endX } = POSITIONS[direction];\n  const { fromValues, toValues } = RANGES_MAP[range](skewX, startX, endX);\n\n  let left = 0;\n  if (dom) {\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  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          transform: `translateX(${fromValues.startX}) skewX(${fromValues.skewX}deg) rotate(var(--comp-rotate-z, 0))`,\n        },\n        {\n          transform: `translateX(${toValues.endX}) skewX(${toValues.skewX}deg) rotate(var(--comp-rotate-z, 0))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: translateX(<fromValue.startX>) skewX(<fromValue.skew>) rotate(<rotation>);\n   *   }\n   *   to {\n   *     transform: translateX(<toValue.endX>) skewX(<toValue.skew>) rotate(<rotation>);\n   *   }\n   * }\n   */\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_utils","require","POWER_MAP","soft","medium","hard","getNames","_","prepare","dom","left","measure","target","getBoundingClientRect","mutate","style","setProperty","web","options","asWeb","skew","direction","power","range","namedEffect","easing","fill","skewX","startXLeft","toKeyframeValue","endXLeft","startX","endX","fromValues","translate","toValues","skewPanScroll","custom","name","keyframes","transform"],"sources":["../../../../src/library/scroll/SkewPanScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  DomApi,\n  ScrubAnimationOptions,\n  SkewPanScroll,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\n\nconst POWER_MAP = {\n  soft: 10,\n  medium: 17,\n  hard: 24,\n};\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-skewPanScroll'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  if (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\nexport function web(options: ScrubAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(options: ScrubAnimationOptions, asWeb = false) {\n  const {\n    skew = 10,\n    direction = 'right',\n    power,\n    range = 'in',\n  } = options.namedEffect as SkewPanScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const skewX =\n    (power && POWER_MAP[power] ? POWER_MAP[power] : skew) *\n    (direction === 'left' ? 1 : -1);\n  const startXLeft = `calc(${toKeyframeValue(\n    {},\n    '--motion-left',\n    false,\n    'calc(100vw - 100%)',\n  )} * -1 - 100%)`;\n  const endXLeft = `calc(100vw - ${toKeyframeValue(\n    {},\n    '--motion-left',\n    false,\n    '0px',\n  )})`;\n  const [startX, endX] =\n    direction === 'left' ? [startXLeft, endXLeft] : [endXLeft, startXLeft];\n\n  const fromValues = {\n    skew: range === 'out' ? 0 : skewX,\n    translate: range === 'out' ? 0 : startX,\n  };\n  const toValues = {\n    skew: range === 'in' ? 0 : -skewX,\n    translate: range === 'in' ? 0 : range === 'out' ? startX : endX,\n  };\n\n  const [skewPanScroll] = getNames(options);\n\n  const custom = {\n    '--motion-skewpan-start-x': fromValues.translate,\n    '--motion-skewpan-end-x': toValues.translate,\n    '--motion-skewpan-from-skew': `${fromValues.skew}deg`,\n    '--motion-skewpan-to-skew': `${toValues.skew}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: skewPanScroll,\n      fill,\n      easing,\n      custom,\n      keyframes: [\n        {\n          transform: `translateX(${toKeyframeValue(\n            custom,\n            '--motion-skewpan-start-x',\n            asWeb,\n          )}) skewX(${toKeyframeValue(\n            custom,\n            '--motion-skewpan-from-skew',\n            asWeb,\n          )}) rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')})`,\n        },\n        {\n          transform: `translateX(${toKeyframeValue(\n            custom,\n            '--motion-skewpan-end-x',\n            asWeb,\n          )}) skewX(${toKeyframeValue(\n            custom,\n            '--motion-skewpan-to-skew',\n            asWeb,\n          )}) rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')})`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/scroll/SlideScroll.js

@@ -1,24 +1,12 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
 var _utils = require("../../utils");
-const DIRECTIONS = ['bottom', 'left', 'top', 'right'];
-const OPPOSITE_DIRECTION_MAP = {
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left'
-};
 const DIRECTION_TRANSLATION_MAP = {
-  top: {
-    x: '0',
-    y: '-100%'
-  },
-  right: {
-    x: '100%',
-    y: '0'
-  },
   bottom: {
     x: '0',
     y: '100%'
@@ -26,90 +14,79 @@ const DIRECTION_TRANSLATION_MAP = {
   left: {
     x: '-100%',
     y: '0'
+  },
+  top: {
+    x: '0',
+    y: '-100%'
+  },
+  right: {
+    x: '100%',
+    y: '0'
   }
 };
-const initialClip = (0, _utils.getClipPolygonParams)({
-  direction: 'initial'
-});
-const KEYFRAMES_RANGE_MAP = {
-  in: (clip, translate) => [{
-    clipPath: `var(--motion-clip-from, ${clip.from})`,
-    transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`
-  }, {
-    clipPath: initialClip,
-    transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`
-  }],
-  out: (clip, translate) => [{
-    clipPath: initialClip,
-    transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`
-  }, {
-    clipPath: `var(--motion-clip-from, ${clip.from})`,
-    transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`
-  }],
-  continuous: (clip, translate) => [{
-    clipPath: `var(--motion-clip-from, ${clip.from})`,
-    transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`
-  }, {
-    clipPath: initialClip,
-    transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`
-  }, {
-    clipPath: `var(--motion-clip-to, ${clip.to})`,
-    transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.to.x}, ${translate.to.y})`
-  }]
-};
-function create(options, dom) {
+function getNames(options) {
+  const {
+    range = 'in'
+  } = options.namedEffect;
+  return [`motion-slideScroll${range === 'continuous' ? '-continuous' : ''}`];
+}
+function prepare(options, dom) {
+  if (dom) {
+    const {
+      direction = 'bottom',
+      range = 'in'
+    } = options.namedEffect;
+    (0, _utils.applyRotationAdjustedClip)(dom, direction, range);
+  }
+}
+function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const {
     direction = 'bottom',
     range = 'in'
   } = options.namedEffect;
   const easing = 'linear';
   const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
-  const oppositeDirection = OPPOSITE_DIRECTION_MAP[direction];
-  const keyframes = KEYFRAMES_RANGE_MAP[range]({
-    from: (0, _utils.getClipPolygonParams)({
-      direction: oppositeDirection
-    }),
-    to: (0, _utils.getClipPolygonParams)({
-      direction
-    })
+  const oppositeDirection = (0, _utils.getOppositeDirection)(_utils.FOUR_DIRECTIONS, direction);
+  const translateFrom = range === 'out' ? {
+    x: '0',
+    y: '0'
+  } : DIRECTION_TRANSLATION_MAP[direction];
+  const translateTo = range === 'in' ? {
+    x: '0',
+    y: '0'
+  } : DIRECTION_TRANSLATION_MAP[range === 'out' ? direction : oppositeDirection];
+  const custom = {
+    '--motion-clip-from': (0, _utils.getRevealClipFrom)(direction, range),
+    '--motion-clip-to': (0, _utils.getRevealClipTo)(direction, range),
+    '--motion-translate-from-x': translateFrom.x,
+    '--motion-translate-from-y': translateFrom.y,
+    '--motion-translate-to-x': translateTo.x,
+    '--motion-translate-to-y': translateTo.y
+  };
+  const keyframes = [{
+    clipPath: (0, _utils.toKeyframeValue)({}, '--motion-clip-from', false, custom['--motion-clip-from']),
+    transform: `rotate(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0')}) translate(${(0, _utils.toKeyframeValue)(custom, `--motion-translate-from-x`, asWeb)}, ${(0, _utils.toKeyframeValue)(custom, `--motion-translate-from-y`, asWeb)})`
   }, {
-    from: DIRECTION_TRANSLATION_MAP[direction],
-    to: DIRECTION_TRANSLATION_MAP[oppositeDirection]
-  });
-  if (dom) {
-    dom.measure(target => {
-      if (!target) {
-        return;
-      }
-      const rotation = parseInt(getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0', 10);
-      dom.mutate(() => {
-        const adjDirection = (0, _utils.getAdjustedDirection)(DIRECTIONS, direction, rotation);
-        target.style.setProperty('--motion-clip-from', (0, _utils.getClipPolygonParams)({
-          direction: OPPOSITE_DIRECTION_MAP[adjDirection]
-        }));
-        target.style.setProperty('--motion-clip-to', (0, _utils.getClipPolygonParams)({
-          direction: adjDirection
-        }));
-      });
+    clipPath: (0, _utils.toKeyframeValue)({}, '--motion-clip-to', false, custom['--motion-clip-to']),
+    transform: `rotate(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0')}) translate(${(0, _utils.toKeyframeValue)(custom, `--motion-translate-to-x`, asWeb)}, ${(0, _utils.toKeyframeValue)(custom, `--motion-translate-to-y`, asWeb)})`
+  }];
+  if (range === 'continuous') {
+    keyframes.splice(1, 0, {
+      clipPath: _utils.INITIAL_CLIP,
+      transform: `rotate(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0')}) translate(0, 0)`
     });
   }
+  const [slideScroll] = getNames(options);
   return [{
     ...options,
+    name: slideScroll,
     fill,
     easing,
     keyframes
   }];
-  /*
-   * @keyframes <name> {
-   *   from {
-   *     clip-path: <clip.from>;
-   *     translate: <translate.from.x> <translate.from.y>;
-   *   }
-   *   to {
-   *     clip-path: none;
-   *     translate: 0 0;
-   *   }
-   * }
-   */
 }
 //# sourceMappingURL=SlideScroll.js.map