@wix/motion 1.661.0 → 1.662.0

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

@@ -1,80 +1,15 @@
+import { toKeyframeValue } from '../../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%)`
-  }
-};
-export default 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;
+export function getNames(_) {
+  return ['motion-skewPanScroll'];
+}
+export function prepare(_, dom) {
   if (dom) {
+    let left = 0;
     dom.measure(target => {
       if (!target) {
         return;
@@ -85,25 +20,53 @@ export default function create(options, dom) {
       target == null || target.style.setProperty('--motion-left', `${left}px`);
     });
   }
+}
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    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(${toKeyframeValue({}, '--motion-left', false, 'calc(100vw - 100%)')} * -1 - 100%)`;
+  const endXLeft = `calc(100vw - ${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(${toKeyframeValue(custom, '--motion-skewpan-start-x', asWeb)}) skewX(${toKeyframeValue(custom, '--motion-skewpan-from-skew', asWeb)}) rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')})`
     }, {
-      transform: `translateX(${toValues.endX}) skewX(${toValues.skewX}deg) rotate(var(--comp-rotate-z, 0))`
+      transform: `translateX(${toKeyframeValue(custom, '--motion-skewpan-end-x', asWeb)}) skewX(${toKeyframeValue(custom, '--motion-skewpan-to-skew', asWeb)}) rotate(${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/esm/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":["toKeyframeValue","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","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/esm/library/scroll/SlideScroll.js

@@ -1,20 +1,5 @@
-import { getAdjustedDirection, getClipPolygonParams } from '../../utils';
-const DIRECTIONS = ['bottom', 'left', 'top', 'right'];
-const OPPOSITE_DIRECTION_MAP = {
-  top: 'bottom',
-  bottom: 'top',
-  left: 'right',
-  right: 'left'
-};
+import { getOppositeDirection, applyRotationAdjustedClip, getRevealClipFrom, getRevealClipTo, toKeyframeValue, INITIAL_CLIP, FOUR_DIRECTIONS } from '../../utils';
 const DIRECTION_TRANSLATION_MAP = {
-  top: {
-    x: '0',
-    y: '-100%'
-  },
-  right: {
-    x: '100%',
-    y: '0'
-  },
   bottom: {
     x: '0',
     y: '100%'
@@ -22,90 +7,82 @@ const DIRECTION_TRANSLATION_MAP = {
   left: {
     x: '-100%',
     y: '0'
+  },
+  top: {
+    x: '0',
+    y: '-100%'
+  },
+  right: {
+    x: '100%',
+    y: '0'
   }
 };
-const initialClip = 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})`
-  }]
-};
-export default function create(options, dom) {
+export function getNames(options) {
+  const {
+    range = 'in'
+  } = options.namedEffect;
+  return [`motion-slideScroll${range === 'continuous' ? '-continuous' : ''}`];
+}
+export function prepare(options, dom) {
+  if (dom) {
+    const {
+      direction = 'bottom',
+      range = 'in'
+    } = options.namedEffect;
+    applyRotationAdjustedClip(dom, direction, range);
+  }
+}
+export function web(options, dom) {
+  prepare(options, dom);
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
   const {
     direction = '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: getClipPolygonParams({
-      direction: oppositeDirection
-    }),
-    to: getClipPolygonParams({
-      direction
-    })
+  const oppositeDirection = getOppositeDirection(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': getRevealClipFrom(direction, range),
+    '--motion-clip-to': 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: toKeyframeValue({}, '--motion-clip-from', false, custom['--motion-clip-from']),
+    transform: `rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')}) translate(${toKeyframeValue(custom, `--motion-translate-from-x`, asWeb)}, ${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 = getAdjustedDirection(DIRECTIONS, direction, rotation);
-        target.style.setProperty('--motion-clip-from', getClipPolygonParams({
-          direction: OPPOSITE_DIRECTION_MAP[adjDirection]
-        }));
-        target.style.setProperty('--motion-clip-to', getClipPolygonParams({
-          direction: adjDirection
-        }));
-      });
+    clipPath: toKeyframeValue({}, '--motion-clip-to', false, custom['--motion-clip-to']),
+    transform: `rotate(${toKeyframeValue({}, '--comp-rotate-z', false, '0')}) translate(${toKeyframeValue(custom, `--motion-translate-to-x`, asWeb)}, ${toKeyframeValue(custom, `--motion-translate-to-y`, asWeb)})`
+  }];
+  if (range === 'continuous') {
+    keyframes.splice(1, 0, {
+      clipPath: INITIAL_CLIP,
+      transform: `rotate(${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

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

@@ -1 +1 @@
-{"version":3,"names":["getAdjustedDirection","getClipPolygonParams","DIRECTIONS","OPPOSITE_DIRECTION_MAP","top","bottom","left","right","DIRECTION_TRANSLATION_MAP","x","y","initialClip","direction","KEYFRAMES_RANGE_MAP","in","clip","translate","clipPath","from","transform","out","continuous","to","create","options","dom","range","namedEffect","easing","fill","oppositeDirection","keyframes","measure","target","rotation","parseInt","getComputedStyle","getPropertyValue","mutate","adjDirection","style","setProperty"],"sources":["../../../../src/library/scroll/SlideScroll.ts"],"sourcesContent":["import type {\n  ScrubAnimationOptions,\n  SlideScroll,\n  EffectFourDirections,\n  EffectScrollRange,\n  DomApi,\n  AnimationFillMode,\n} from '../../types';\nimport { getAdjustedDirection, getClipPolygonParams } from '../../utils';\n\ntype Translate = { x: string; y: string };\n\nconst DIRECTIONS: EffectFourDirections[] = ['bottom', 'left', 'top', 'right'];\n\ntype Direction = (typeof DIRECTIONS)[number];\n\nconst OPPOSITE_DIRECTION_MAP: Record<Direction, Direction> = {\n  top: 'bottom',\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n};\n\nconst DIRECTION_TRANSLATION_MAP: Record<Direction, Translate> = {\n  top: { x: '0', y: '-100%' },\n  right: { x: '100%', y: '0' },\n  bottom: { x: '0', y: '100%' },\n  left: { x: '-100%', y: '0' },\n};\n\nconst initialClip = getClipPolygonParams({ direction: 'initial' });\n\nconst KEYFRAMES_RANGE_MAP: Record<\n  EffectScrollRange,\n  (\n    clip: { from: string; to: string },\n    translate: { from: Translate; to: Translate },\n  ) => { clipPath: string; transform: string }[]\n> = {\n  in: (clip, translate) => [\n    {\n      clipPath: `var(--motion-clip-from, ${clip.from})`,\n      transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`,\n    },\n    {\n      clipPath: initialClip,\n      transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`,\n    },\n  ],\n  out: (clip, translate) => [\n    {\n      clipPath: initialClip,\n      transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`,\n    },\n    {\n      clipPath: `var(--motion-clip-from, ${clip.from})`,\n      transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`,\n    },\n  ],\n  continuous: (clip, translate) => [\n    {\n      clipPath: `var(--motion-clip-from, ${clip.from})`,\n      transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.from.x}, ${translate.from.y})`,\n    },\n    {\n      clipPath: initialClip,\n      transform: `rotate(var(--comp-rotate-z, 0)) translate(0, 0)`,\n    },\n    {\n      clipPath: `var(--motion-clip-to, ${clip.to})`,\n      transform: `rotate(var(--comp-rotate-z, 0)) translate(${translate.to.x}, ${translate.to.y})`,\n    },\n  ],\n};\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const { direction = 'bottom', range = 'in' } =\n    options.namedEffect as SlideScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n  const oppositeDirection = OPPOSITE_DIRECTION_MAP[direction];\n\n  const keyframes = KEYFRAMES_RANGE_MAP[range](\n    {\n      from: getClipPolygonParams({\n        direction: oppositeDirection,\n      }),\n      to: getClipPolygonParams({\n        direction,\n      }),\n    },\n    {\n      from: DIRECTION_TRANSLATION_MAP[direction],\n      to: DIRECTION_TRANSLATION_MAP[oppositeDirection],\n    },\n  );\n\n  if (dom) {\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n\n      const rotation = parseInt(\n        getComputedStyle(target).getPropertyValue('--comp-rotate-z') || '0',\n        10,\n      );\n\n      dom.mutate(() => {\n        const adjDirection = getAdjustedDirection(\n          DIRECTIONS,\n          direction,\n          rotation,\n        ) as Direction;\n        target.style.setProperty(\n          '--motion-clip-from',\n          getClipPolygonParams({\n            direction: OPPOSITE_DIRECTION_MAP[adjDirection],\n          }),\n        );\n        target.style.setProperty(\n          '--motion-clip-to',\n          getClipPolygonParams({\n            direction: adjDirection,\n          }),\n        );\n      });\n    });\n  }\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes,\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     clip-path: <clip.from>;\n   *     translate: <translate.from.x> <translate.from.y>;\n   *   }\n   *   to {\n   *     clip-path: none;\n   *     translate: 0 0;\n   *   }\n   * }\n   */\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["getOppositeDirection","applyRotationAdjustedClip","getRevealClipFrom","getRevealClipTo","toKeyframeValue","INITIAL_CLIP","FOUR_DIRECTIONS","DIRECTION_TRANSLATION_MAP","bottom","x","y","left","top","right","getNames","options","range","namedEffect","prepare","dom","direction","web","style","asWeb","easing","fill","oppositeDirection","translateFrom","translateTo","custom","keyframes","clipPath","transform","splice","slideScroll","name"],"sources":["../../../../src/library/scroll/SlideScroll.ts"],"sourcesContent":["import type {\n  ScrubAnimationOptions,\n  SlideScroll,\n  EffectFourDirections,\n  DomApi,\n  AnimationFillMode,\n} from '../../types';\nimport {\n  getOppositeDirection,\n  applyRotationAdjustedClip,\n  getRevealClipFrom,\n  getRevealClipTo,\n  toKeyframeValue,\n  INITIAL_CLIP,\n  FOUR_DIRECTIONS,\n} from '../../utils';\n\ntype Translate = { x: string; y: string };\n\nconst DIRECTION_TRANSLATION_MAP: Record<EffectFourDirections, Translate> = {\n  bottom: { x: '0', y: '100%' },\n  left: { x: '-100%', y: '0' },\n  top: { x: '0', y: '-100%' },\n  right: { x: '100%', y: '0' },\n};\n\nexport function getNames(options: ScrubAnimationOptions) {\n  const { range = 'in' } = options.namedEffect as SlideScroll;\n  return [`motion-slideScroll${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 SlideScroll;\n    applyRotationAdjustedClip(dom, direction, range);\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 { direction = 'bottom', range = 'in' } =\n    options.namedEffect as SlideScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n  const oppositeDirection = getOppositeDirection(FOUR_DIRECTIONS, direction);\n\n  const translateFrom =\n    range === 'out' ? { x: '0', y: '0' } : DIRECTION_TRANSLATION_MAP[direction];\n  const translateTo =\n    range === 'in'\n      ? { x: '0', y: '0' }\n      : DIRECTION_TRANSLATION_MAP[\n          range === 'out' ? direction : oppositeDirection\n        ];\n\n  const custom = {\n    '--motion-clip-from': getRevealClipFrom(direction, range),\n    '--motion-clip-to': getRevealClipTo(direction, range),\n    '--motion-translate-from-x': translateFrom.x,\n    '--motion-translate-from-y': translateFrom.y,\n    '--motion-translate-to-x': translateTo.x,\n    '--motion-translate-to-y': translateTo.y,\n  };\n\n  const keyframes = [\n    {\n      clipPath: toKeyframeValue(\n        {},\n        '--motion-clip-from',\n        false,\n        custom['--motion-clip-from'],\n      ),\n      transform: `rotate(${toKeyframeValue(\n        {},\n        '--comp-rotate-z',\n        false,\n        '0',\n      )}) translate(${toKeyframeValue(\n        custom,\n        `--motion-translate-from-x`,\n        asWeb,\n      )}, ${toKeyframeValue(custom, `--motion-translate-from-y`, asWeb)})`,\n    },\n    {\n      clipPath: toKeyframeValue(\n        {},\n        '--motion-clip-to',\n        false,\n        custom['--motion-clip-to'],\n      ),\n      transform: `rotate(${toKeyframeValue(\n        {},\n        '--comp-rotate-z',\n        false,\n        '0',\n      )}) translate(${toKeyframeValue(\n        custom,\n        `--motion-translate-to-x`,\n        asWeb,\n      )}, ${toKeyframeValue(custom, `--motion-translate-to-y`, asWeb)})`,\n    },\n  ];\n\n  if (range === 'continuous') {\n    keyframes.splice(1, 0, {\n      clipPath: INITIAL_CLIP,\n      transform: `rotate(${toKeyframeValue(\n        {},\n        '--comp-rotate-z',\n        false,\n        '0',\n      )}) translate(0, 0)`,\n    });\n  }\n\n  const [slideScroll] = getNames(options);\n\n  return [\n    {\n      ...options,\n      name: slideScroll,\n      fill,\n      easing,\n      keyframes,\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+import { toKeyframeValue } from '../../utils';
 const MAX_Y_TRAVEL = 40;
 const POWER_MAP = {
   soft: {
@@ -13,104 +14,71 @@ const POWER_MAP = {
     travelY: 1
   }
 };
-const RANGES_MAP = {
-  in: (rotation, travelY) => ({
-    fromValues: {
-      rotationX: -2 * rotation,
-      rotationY: -rotation,
-      rotationZ: -rotation,
-      travel: travelY
-    },
-    toValues: {
-      rotationX: 0,
-      rotationY: 0,
-      rotationZ: 0,
-      travel: 0
-    }
-  }),
-  out: (rotation, travelY) => ({
-    fromValues: {
-      rotationX: 0,
-      rotationY: 0,
-      rotationZ: 0,
-      travel: 0
-    },
-    toValues: {
-      rotationX: rotation * 3,
-      rotationY: rotation * 2,
-      rotationZ: rotation,
-      travel: -travelY
-    }
-  }),
-  continuous: (rotation, travelY) => ({
-    fromValues: {
-      rotationX: -2 * rotation,
-      rotationY: -rotation,
-      rotationZ: -rotation,
-      travel: travelY
-    },
-    toValues: {
-      rotationX: rotation * 1.8,
-      rotationY: rotation,
-      rotationZ: 2 * rotation,
-      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-spin3dScroll'];
 }
-export default function create(options) {
+export function web(options, _dom) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
   const {
     rotate = -100,
+    speed = 0,
     power,
-    range = 'in',
-    speed = 0
+    range = 'in'
   } = options.namedEffect;
   const easing = 'linear';
   const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
-  const initialParams = power && POWER_MAP[power] ? POWER_MAP[power] : {
+  const {
+    rotationZ,
+    travelY
+  } = power && POWER_MAP[power] ? POWER_MAP[power] : {
     rotationZ: rotate,
     travelY: speed
   };
-  const {
-    fromValues,
-    toValues
-  } = RANGES_MAP[range](initialParams.rotationZ, initialParams.travelY * -MAX_Y_TRAVEL);
-  const {
-    start: startOffsetAdd,
-    end: endOffsetAdd
-  } = getScrubOffsets(options.namedEffect);
+  const travel = travelY * MAX_Y_TRAVEL;
+  const fromValues = {
+    rotationX: range === 'out' ? 0 : -2 * rotationZ,
+    rotationY: range === 'out' ? 0 : -rotationZ,
+    rotationZ: range === 'out' ? 0 : -rotationZ,
+    travel: range === 'out' ? 0 : -travel
+  };
+  const toValues = {
+    rotationX: rotationZ * (range === 'in' ? 0 : range === 'out' ? 3 : 1.8),
+    rotationY: rotationZ * (range === 'in' ? 0 : range === 'out' ? 2 : 1),
+    rotationZ: rotationZ * (range === 'in' ? 0 : range === 'out' ? 1 : 2),
+    travel: range === 'in' ? 0 : travel
+  };
+  const offset = Math.abs(travel);
+  const startOffsetAdd = range === 'out' ? '0px' : `${-offset}vh`;
+  const endOffsetAdd = range === 'in' ? '0px' : `${offset}vh`;
+  const [spin3dScroll] = getNames(options);
+  const custom = {
+    '--motion-travel-from': `${fromValues.travel}vh`,
+    '--motion-travel-to': `${toValues.travel}vh`,
+    '--motion-rot-x-from': `${fromValues.rotationX}deg`,
+    '--motion-rot-x-to': `${toValues.rotationX}deg`,
+    '--motion-rot-y-from': `${fromValues.rotationY}deg`,
+    '--motion-rot-y-to': `${toValues.rotationY}deg`,
+    '--motion-rot-z-from': `${fromValues.rotationZ}deg`,
+    '--motion-rot-z-to': `${toValues.rotationZ}deg`
+  };
   return [{
     ...options,
+    name: spin3dScroll,
     fill,
     easing,
+    custom,
     startOffsetAdd,
     endOffsetAdd,
     keyframes: [{
-      transform: `perspective(1000px) translateY(${fromValues.travel}vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + ${fromValues.rotationZ}deg)) rotateY(${fromValues.rotationY}deg) rotateX(${fromValues.rotationX}deg)`
+      transform: `perspective(1000px) translateY(${toKeyframeValue(custom, '--motion-travel-from', asWeb)}) rotateZ(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-rot-z-from', asWeb)})) rotateY(${toKeyframeValue(custom, '--motion-rot-y-from', asWeb)}) rotateX(${toKeyframeValue(custom, '--motion-rot-x-from', asWeb)})`
     }, {
-      transform: `perspective(1000px) translateY(${toValues.travel}vh) rotateZ(calc(var(--comp-rotate-z, 0deg) + ${toValues.rotationZ}deg)) rotateY(${toValues.rotationY}deg) rotateX(${toValues.rotationX}deg)`
+      transform: `perspective(1000px) translateY(${toKeyframeValue(custom, '--motion-travel-to', asWeb)}) rotateZ(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-rot-z-to', asWeb)})) rotateY(${toKeyframeValue(custom, '--motion-rot-y-to', asWeb)}) rotateX(${toKeyframeValue(custom, '--motion-rot-x-to', asWeb)})`
     }]
   }];
-  /*
-   * @keyframes <name> {
-   *   from {
-   *     transform: perspective(1000px) translateY(<fromValue.travel>vh) rotateZ(<fromValue.rotateZ> + <rotation>) rotateY(<fromValue.rotateY>deg) rotateX(<fromValue.rotateX>deg);
-   *   }
-   *   to {
-   *     transform: perspective(1000px) translateY(<toValue.travel>vh) rotateZ(<fromValue.rotateZ> + <rotation>) rotateY(<toValue.rotateY>deg) rotateX(<toValue.rotateX>deg);
-   *   }
-   * }
-   */
 }
 //# sourceMappingURL=Spin3dScroll.js.map