@wix/motion 1.661.0 → 1.662.0

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

@@ -1 +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":[]}
+{"version":3,"names":["applyRotationAdjustedClip","getRevealClipFrom","getRevealClipTo","toKeyframeValue","INITIAL_CLIP","getNames","options","range","namedEffect","prepare","dom","direction","web","style","easing","fill","revealScroll","custom","keyframes","clipPath","splice","name"],"sources":["../../../../src/library/scroll/RevealScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  RevealScroll,\n  DomApi,\n} from '../../types';\nimport {\n  applyRotationAdjustedClip,\n  getRevealClipFrom,\n  getRevealClipTo,\n  toKeyframeValue,\n  INITIAL_CLIP,\n} from '../../utils';\n\nexport function getNames(options: ScrubAnimationOptions) {\n  const { range = 'in' } = options.namedEffect as RevealScroll;\n  return [`motion-revealScroll${range === 'continuous' ? '-continuous' : ''}`];\n}\n\nexport function prepare(options: ScrubAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    const { direction = 'bottom', range = 'in' } =\n      options.namedEffect as RevealScroll;\n    applyRotationAdjustedClip(dom, direction, range);\n  }\n}\n\nexport function web(options: ScrubAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options);\n}\n\nexport function style(options: ScrubAnimationOptions) {\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  const [revealScroll] = getNames(options);\n\n  const custom = {\n    '--motion-clip-from': getRevealClipFrom(direction, range),\n    '--motion-clip-to': getRevealClipTo(direction, range),\n  };\n\n  const keyframes = [\n    {\n      clipPath: toKeyframeValue(\n        {},\n        '--motion-clip-from',\n        false,\n        custom['--motion-clip-from'],\n      ),\n    },\n    {\n      clipPath: toKeyframeValue(\n        {},\n        '--motion-clip-to',\n        false,\n        custom['--motion-clip-to'],\n      ),\n    },\n  ];\n\n  if (range === 'continuous') {\n    keyframes.splice(1, 0, { clipPath: INITIAL_CLIP });\n  }\n\n  return [\n    {\n      ...options,\n      name: revealScroll,\n      fill,\n      easing,\n      custom,\n      keyframes,\n    },\n  ];\n}\n"],"mappings":"AAMA,SACEA,yBAAyB,EACzBC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,EACfC,YAAY,QACP,aAAa;AAEpB,OAAO,SAASC,QAAQA,CAACC,OAA8B,EAAE;EACvD,MAAM;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGD,OAAO,CAACE,WAA2B;EAC5D,OAAO,CAAC,sBAAsBD,KAAK,KAAK,YAAY,GAAG,aAAa,GAAG,EAAE,EAAE,CAAC;AAC9E;AAEA,OAAO,SAASE,OAAOA,CAACH,OAA8B,EAAEI,GAAY,EAAE;EACpE,IAAIA,GAAG,EAAE;IACP,MAAM;MAAEC,SAAS,GAAG,QAAQ;MAAEJ,KAAK,GAAG;IAAK,CAAC,GAC1CD,OAAO,CAACE,WAA2B;IACrCR,yBAAyB,CAACU,GAAG,EAAEC,SAAS,EAAEJ,KAAK,CAAC;EAClD;AACF;AAEA,OAAO,SAASK,GAAGA,CAACN,OAA8B,EAAEI,GAAY,EAAE;EAChED,OAAO,CAACH,OAAO,EAAEI,GAAG,CAAC;EAErB,OAAOG,KAAK,CAACP,OAAO,CAAC;AACvB;AAEA,OAAO,SAASO,KAAKA,CAACP,OAA8B,EAAE;EACpD,MAAM;IAAEK,SAAS,GAAG,QAAQ;IAAEJ,KAAK,GAAG;EAAK,CAAC,GAC1CD,OAAO,CAACE,WAA2B;EACrC,MAAMM,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRR,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGD,OAAO,CAACS,IAClD;EAEtB,MAAM,CAACC,YAAY,CAAC,GAAGX,QAAQ,CAACC,OAAO,CAAC;EAExC,MAAMW,MAAM,GAAG;IACb,oBAAoB,EAAEhB,iBAAiB,CAACU,SAAS,EAAEJ,KAAK,CAAC;IACzD,kBAAkB,EAAEL,eAAe,CAACS,SAAS,EAAEJ,KAAK;EACtD,CAAC;EAED,MAAMW,SAAS,GAAG,CAChB;IACEC,QAAQ,EAAEhB,eAAe,CACvB,CAAC,CAAC,EACF,oBAAoB,EACpB,KAAK,EACLc,MAAM,CAAC,oBAAoB,CAC7B;EACF,CAAC,EACD;IACEE,QAAQ,EAAEhB,eAAe,CACvB,CAAC,CAAC,EACF,kBAAkB,EAClB,KAAK,EACLc,MAAM,CAAC,kBAAkB,CAC3B;EACF,CAAC,CACF;EAED,IAAIV,KAAK,KAAK,YAAY,EAAE;IAC1BW,SAAS,CAACE,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE;MAAED,QAAQ,EAAEf;IAAa,CAAC,CAAC;EACpD;EAEA,OAAO,CACL;IACE,GAAGE,OAAO;IACVe,IAAI,EAAEL,YAAY;IAClBD,IAAI;IACJD,MAAM;IACNG,MAAM;IACNC;EACF,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-import { getEasing } from '../../utils';
+import { toKeyframeValue, getEasing } from '../../utils';
 const SHAPES = {
   diamond: {
     start: {
@@ -55,56 +55,57 @@ const RESPONSIVE_SHAPES_MAP = {
     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) {
+export function getNames(options) {
+  const {
+    range = 'in'
+  } = options.namedEffect;
+  return [`motion-shapeScroll${range === 'continuous' ? '-continuous' : ''}`];
+}
+export function web(options, _dom) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
   const {
-    shape = 'circle',
     power,
     intensity = 0.5,
     range = 'in'
   } = options.namedEffect;
+  let {
+    shape = 'circle'
+  } = options.namedEffect;
+  if (!(shape in SHAPES)) {
+    shape = 'circle';
+  }
   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);
+  const [shapeScroll] = getNames(options);
+  const custom = {
+    '--motion-clip-from': range === 'out' ? end : start,
+    '--motion-clip-to': range === 'out' ? start : end
+  };
+  const easing = getEasing('circInOut');
+  const keyframes = [{
+    clipPath: toKeyframeValue(custom, `--motion-clip-from`, asWeb),
+    easing
+  }, {
+    clipPath: toKeyframeValue(custom, `--motion-clip-to`, asWeb)
+  }];
+  if (range === 'continuous') {
+    keyframes[1].easing = easing;
+    keyframes.push({
+      clipPath: toKeyframeValue(custom, `--motion-clip-from`, asWeb)
+    });
+  }
   return [{
     ...options,
+    name: shapeScroll,
     fill,
     easing: 'linear',
+    custom,
     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

@@ -1 +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":[]}
+{"version":3,"names":["toKeyframeValue","getEasing","SHAPES","diamond","start","soft","medium","hard","end","window","rectangle","circle","ellipse","RESPONSIVE_SHAPES_MAP","clipFactor","clip","clipNeg","getNames","options","range","namedEffect","web","_dom","style","asWeb","power","intensity","shape","fill","shapeScroll","custom","easing","keyframes","clipPath","push","name"],"sources":["../../../../src/library/scroll/ShapeScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  EffectPower,\n  ScrubAnimationOptions,\n  ShapeScroll,\n  DomApi,\n} from '../../types';\nimport { toKeyframeValue, 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\nexport function getNames(options: ScrubAnimationOptions) {\n  const { range = 'in' } = options.namedEffect as ShapeScroll;\n  return [`motion-shapeScroll${range === 'continuous' ? '-continuous' : ''}`];\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    intensity = 0.5,\n    range = 'in',\n  } = options.namedEffect as ShapeScroll;\n  let { shape = 'circle' } = options.namedEffect as ShapeScroll;\n  if (!(shape in SHAPES)) {\n    shape = 'circle';\n  }\n\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 [shapeScroll] = getNames(options);\n\n  const custom = {\n    '--motion-clip-from': range === 'out' ? end : start,\n    '--motion-clip-to': range === 'out' ? start : end,\n  };\n\n  const easing = getEasing('circInOut');\n\n  const keyframes = [\n    {\n      clipPath: toKeyframeValue(custom, `--motion-clip-from`, asWeb),\n      easing,\n    },\n    { clipPath: toKeyframeValue(custom, `--motion-clip-to`, asWeb) },\n  ];\n\n  if (range === 'continuous') {\n    keyframes[1].easing = easing;\n    keyframes.push({\n      clipPath: toKeyframeValue(custom, `--motion-clip-from`, asWeb),\n    });\n  }\n\n  return [\n    {\n      ...options,\n      name: shapeScroll,\n      fill,\n      easing: 'linear',\n      custom,\n      keyframes,\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+import { toKeyframeValue } from '../../utils';
 const MAX_Y_TRAVEL = 40;
 const POWER_MAP = {
   soft: {
@@ -27,51 +28,16 @@ const directionMap = {
   'top-left': [-50, -50],
   center: [0, 0]
 };
-const RANGES_MAP = {
-  in: (scaleFrom, _scaleTo, travelY) => ({
-    fromValues: {
-      scale: scaleFrom,
-      travel: travelY
-    },
-    toValues: {
-      scale: 1,
-      travel: 0
-    }
-  }),
-  out: (_scaleFrom, scaleTo, travelY) => ({
-    fromValues: {
-      scale: 1,
-      travel: 0
-    },
-    toValues: {
-      scale: scaleTo,
-      travel: -travelY
-    }
-  }),
-  continuous: (scaleFrom, scaleTo, travelY) => ({
-    fromValues: {
-      scale: scaleFrom,
-      travel: travelY
-    },
-    toValues: {
-      scale: scaleTo,
-      travel: -travelY
-    }
-  })
-};
-function getScrubOffsets(_ref) {
-  let {
-    power,
-    range = 'in',
-    speed = 0
-  } = _ref;
-  const offset = power && POWER_MAP[power] ? POWER_MAP[power].travelY : Math.abs(speed) * MAX_Y_TRAVEL;
-  return {
-    start: range === 'out' ? '0px' : `${-offset}vh`,
-    end: range === 'in' ? '0px' : `${offset}vh`
-  };
+export function getNames(_) {
+  return ['motion-shrinkScroll'];
+}
+export function web(options, _dom) {
+  return style(options, true);
 }
-export default function create(options) {
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
   const {
     power,
     range = 'in',
@@ -79,6 +45,7 @@ export default function create(options) {
     direction = 'center',
     speed = 0
   } = options.namedEffect;
+  const easing = 'linear';
   const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
   const {
     scaleFrom,
@@ -89,66 +56,41 @@ export default function create(options) {
     scaleTo: scale,
     travelY: speed
   };
-  const {
-    fromValues,
-    toValues
-  } = RANGES_MAP[range](scaleFrom, scaleTo, travelY * -MAX_Y_TRAVEL);
-  const easing = 'linear';
-  const {
-    start: startOffsetAdd,
-    end: endOffsetAdd
-  } = getScrubOffsets(options.namedEffect);
-  const [trnsX, trnsY] = directionMap[direction];
+  const travel = travelY * MAX_Y_TRAVEL;
+  const fromValues = {
+    scale: range === 'out' ? 1 : scaleFrom,
+    travel: range === 'out' ? 0 : -travel
+  };
+  const toValues = {
+    scale: range === 'in' ? 1 : scaleTo,
+    travel: range === 'in' ? 0 : travel
+  };
+  const offset = Math.abs(power && POWER_MAP[power] ? POWER_MAP[power].travelY : travel);
+  const startOffsetAdd = range === 'out' ? '0px' : `${-offset}vh`;
+  const endOffsetAdd = range === 'in' ? '0px' : `${offset}vh`;
+  const [trnsX, trnsY] = directionMap[direction] || [0, 0];
+  const [shrinkScroll] = getNames(options);
+  const custom = {
+    '--motion-travel-from': `${fromValues.travel}vh`,
+    '--motion-travel-to': `${toValues.travel}vh`,
+    '--motion-shrink-from': fromValues.scale,
+    '--motion-shrink-to': toValues.scale,
+    '--motion-trans-x': `${trnsX}%`,
+    '--motion-trans-y': `${trnsY}%`
+  };
   return [{
     ...options,
+    name: shrinkScroll,
     fill,
     easing,
+    custom,
     startOffsetAdd,
     endOffsetAdd,
     keyframes: [{
-      transform: `translateY(${fromValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${fromValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`
+      transform: `translateY(${toKeyframeValue(custom, '--motion-travel-from', asWeb)}) translate(${toKeyframeValue(custom, '--motion-trans-x', asWeb)}, ${toKeyframeValue(custom, '--motion-trans-y', asWeb)}) scale(${toKeyframeValue(custom, '--motion-shrink-from', asWeb)}) translate(calc(-1 * ${toKeyframeValue(custom, '--motion-trans-x', asWeb)}), calc(-1 * ${toKeyframeValue(custom, '--motion-trans-y', asWeb)})) rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')})`
     }, {
-      transform: `translateY(${toValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${toValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`
+      transform: `translateY(${toKeyframeValue(custom, '--motion-travel-to', asWeb)}) translate(${toKeyframeValue(custom, '--motion-trans-x', asWeb)}, ${toKeyframeValue(custom, '--motion-trans-y', asWeb)}) scale(${toKeyframeValue(custom, '--motion-shrink-to', asWeb)}) translate(calc(-1 * ${toKeyframeValue(custom, '--motion-trans-x', asWeb)}), calc(-1 * ${toKeyframeValue(custom, '--motion-trans-y', asWeb)})) rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')})`
     }]
   }];
-  /* // we may want to squash both animations into a single one and simply generate dynamically all the necessary keyframes to reach same result
-   * @keyframes <name> {
-   *   from {
-   *     translate: 0 <fromValues.travel>;
-   *   }
-   *   to {
-   *     translate: 0 <toValues.travel>;
-   *   }
-   * }
-   *
-   * @keyframes <name>-scale {
-   *   from {
-   *     scale: <fromValues.scale>;
-   *     animation-timing-function: <scaleEase>;
-   *   }
-   *   <scaleDuration>% {
-   *     scale: <toValues.scale>;
-   *   }
-   *   to {
-   *     scale: <toValues.scale>;
-   *   }
-   * }
-   *
-   * @supports (animation-timeline: view()) {
-   *   #target {
-   *     animation: <name> auto <easing> both,
-   *                <name>-scale auto linear both;
-   *     animation-range: cover <start> cover <end>,
-   *                      cover <start> cover <end>;
-   *     animation-timeline: view(), view();
-   *   }
-   * }
-   * @supports not (animation-timeline: view()) {
-   *   #target {
-   *     animation: <name> 100ms linear <fill> paused,
-   *                <name>-scale 100ms linear <fill> paused;
-   *   }
-   * }
-   */
 }
 //# sourceMappingURL=ShrinkScroll.js.map

package/dist/esm/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","_ref","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":["toKeyframeValue","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"],"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/esm/library/scroll/ShuttersScroll.js

@@ -1,11 +1,17 @@
-import { getShuttersClipPaths, getEasing } from '../../utils';
-const OPPOSITE_DIRECTION_MAP = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right'
-};
-export default function create(options) {
+import { getOppositeDirection, getShuttersClipPaths, getEasing, toKeyframeValue, FOUR_DIRECTIONS } from '../../utils';
+export function getNames(options) {
+  const {
+    range = 'in'
+  } = options.namedEffect;
+  return [`motion-shuttersScroll-${range === 'continuous' ? '-continuous' : ''}`];
+}
+export function web(options, _dom) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
   const {
     direction = 'right',
     shutters = 12,
@@ -14,49 +20,52 @@ export default function create(options) {
   } = options.namedEffect;
   const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
   const easing = range === 'in' ? getEasing('sineIn') : getEasing('sineOut');
-  const directionOpp = OPPOSITE_DIRECTION_MAP[direction];
+  const directionOpp = getOppositeDirection(FOUR_DIRECTIONS, direction);
   const {
     clipStart,
     clipEnd
   } = 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: toKeyframeValue(custom, '--motion-shutters-clip-start', asWeb),
+    easing
+  }, {
+    clipPath: 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
     } = 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: toKeyframeValue(custom, '--motion-shutters-clip-end', asWeb),
+      offset: secondOffset,
       easing
     }, {
-      clipPath: oppClipStart
-    }];
-  } else {
-    keyframes = [{
-      clipPath: start,
+      clipPath: toKeyframeValue(custom, '--motion-shutters-clip-opp-end', asWeb),
+      offset: secondOffset,
       easing
     }, {
-      clipPath: end
-    }];
+      clipPath: toKeyframeValue(custom, '--motion-shutters-clip-opp-start', asWeb)
+    });
   }
   return [{
     ...options,
+    name: shuttersScroll,
     fill,
     easing: 'linear',
+    custom,
     keyframes
   }];
 }

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

@@ -1 +1 @@
-{"version":3,"names":["getShuttersClipPaths","getEasing","OPPOSITE_DIRECTION_MAP","top","right","bottom","left","create","options","direction","shutters","staggered","range","namedEffect","fill","easing","directionOpp","clipStart","clipEnd","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,SAASA,oBAAoB,EAAEC,SAAS,QAAQ,aAAa;AAE7D,MAAMC,sBAGL,GAAG;EACFC,GAAG,EAAE,QAAQ;EACbC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE;AACR,CAAC;AAED,eAAe,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,GAAGX,SAAS,CAAC,QAAQ,CAAC,GAAGA,SAAS,CAAC,SAAS,CAAC;EAC1E,MAAMe,YAAY,GAAGd,sBAAsB,CAACO,SAAS,CAAC;EACtD,MAAM;IAAEQ,SAAS;IAAEC;EAAQ,CAAC,GAAGlB,oBAAoB,CACjDY,KAAK,KAAK,KAAK,GAAGI,YAAY,GAAGP,SAAS,EAC1CC,QAAQ,EACRC,SACF,CAAC;EACD,MAAMQ,KAAK,GAAGP,KAAK,KAAK,KAAK,GAAGK,SAAS,GAAGC,OAAO;EACnD,MAAME,GAAG,GAAGR,KAAK,KAAK,KAAK,GAAGM,OAAO,GAAGD,SAAS;EACjD,IAAII,SAAS;EAEb,IAAIT,KAAK,KAAK,YAAY,EAAE;IAC1B,MAAM;MAAEK,SAAS,EAAEK,YAAY;MAAEJ,OAAO,EAAEK;IAAW,CAAC,GACpDvB,oBAAoB,CAACgB,YAAY,EAAEN,QAAQ,EAAEC,SAAS,EAAE,IAAI,CAAC;IAE/DU,SAAS,GAAG,CACV;MACEG,QAAQ,EAAEL,KAAK;MACfJ;IACF,CAAC,EACD;MACES,QAAQ,EAAEJ,GAAG;MACbK,MAAM,EAAEd,SAAS,GAAG,IAAI,GAAG,GAAG;MAC9BI;IACF,CAAC,EACD;MACES,QAAQ,EAAEJ,GAAG;MACbK,MAAM,EAAEd,SAAS,GAAG,IAAI,GAAG,GAAG;MAC9BI;IACF,CAAC,EACD;MACES,QAAQ,EAAED,UAAU;MACpBE,MAAM,EAAEd,SAAS,GAAG,IAAI,GAAG,GAAG;MAC9BI;IACF,CAAC,EACD;MACES,QAAQ,EAAEF;IACZ,CAAC,CACF;EACH,CAAC,MAAM;IACLD,SAAS,GAAG,CACV;MACEG,QAAQ,EAAEL,KAAK;MACfJ;IACF,CAAC,EACD;MACES,QAAQ,EAAEJ;IACZ,CAAC,CACF;EACH;EAEA,OAAO,CACL;IACE,GAAGZ,OAAO;IACVM,IAAI;IACJC,MAAM,EAAE,QAAQ;IAChBM;EACF,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["getOppositeDirection","getShuttersClipPaths","getEasing","toKeyframeValue","FOUR_DIRECTIONS","getNames","options","range","namedEffect","web","_dom","style","asWeb","direction","shutters","staggered","fill","easing","directionOpp","clipStart","clipEnd","custom","shuttersScroll","keyframes","clipPath","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":[]}