@wix/motion 1.661.0 → 1.662.0

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

@@ -1 +1 @@
-{"version":3,"names":["MAX_Y_TRAVEL","POWER_MAP","soft","rotationZ","travelY","medium","hard","RANGES_MAP","in","rotation","fromValues","rotationX","rotationY","travel","toValues","out","continuous","getScrubOffsets","_ref","power","range","speed","offset","Math","abs","start","end","create","options","rotate","namedEffect","easing","fill","initialParams","startOffsetAdd","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/scroll/Spin3dScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  Spin3dScroll,\n} from '../../types';\n\nconst MAX_Y_TRAVEL = 40;\n\nconst POWER_MAP = {\n  soft: { rotationZ: 45, travelY: 0 },\n  medium: { rotationZ: 100, travelY: 0.5 },\n  hard: { rotationZ: 200, travelY: 1 },\n};\n\nconst RANGES_MAP = {\n  in: (rotation: number, travelY: number) => ({\n    fromValues: {\n      rotationX: -2 * rotation,\n      rotationY: -rotation,\n      rotationZ: -rotation,\n      travel: travelY,\n    },\n    toValues: {\n      rotationX: 0,\n      rotationY: 0,\n      rotationZ: 0,\n      travel: 0,\n    },\n  }),\n  out: (rotation: number, travelY: number) => ({\n    fromValues: {\n      rotationX: 0,\n      rotationY: 0,\n      rotationZ: 0,\n      travel: 0,\n    },\n    toValues: {\n      rotationX: rotation * 3,\n      rotationY: rotation * 2,\n      rotationZ: rotation,\n      travel: -travelY,\n    },\n  }),\n  continuous: (rotation: number, travelY: number) => ({\n    fromValues: {\n      rotationX: -2 * rotation,\n      rotationY: -rotation,\n      rotationZ: -rotation,\n      travel: travelY,\n    },\n    toValues: {\n      rotationX: rotation * 1.8,\n      rotationY: rotation,\n      rotationZ: 2 * rotation,\n      travel: -travelY,\n    },\n  }),\n};\n\nfunction getScrubOffsets({ power, range = 'in', speed = 0 }: Spin3dScroll) {\n  const offset =\n    (power && POWER_MAP[power] ? POWER_MAP[power].travelY : Math.abs(speed)) *\n    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    rotate = -100,\n    power,\n    range = 'in',\n    speed = 0,\n  } = options.namedEffect as Spin3dScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const initialParams =\n    power && POWER_MAP[power]\n      ? POWER_MAP[power]\n      : { rotationZ: rotate, travelY: speed };\n\n  const { fromValues, toValues } = RANGES_MAP[range](\n    initialParams.rotationZ,\n    initialParams.travelY * -MAX_Y_TRAVEL,\n  );\n\n  const { start: startOffsetAdd, end: endOffsetAdd } = getScrubOffsets(\n    options.namedEffect as Spin3dScroll,\n  );\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      startOffsetAdd,\n      endOffsetAdd,\n      keyframes: [\n        {\n          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)`,\n        },\n        {\n          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)`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: perspective(1000px) translateY(<fromValue.travel>vh) rotateZ(<fromValue.rotateZ> + <rotation>) rotateY(<fromValue.rotateY>deg) rotateX(<fromValue.rotateX>deg);\n   *   }\n   *   to {\n   *     transform: perspective(1000px) translateY(<toValue.travel>vh) rotateZ(<fromValue.rotateZ> + <rotation>) rotateY(<toValue.rotateY>deg) rotateX(<toValue.rotateX>deg);\n   *   }\n   * }\n   */\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["toKeyframeValue","MAX_Y_TRAVEL","POWER_MAP","soft","rotationZ","travelY","medium","hard","getNames","_","web","options","_dom","style","asWeb","rotate","speed","power","range","namedEffect","easing","fill","travel","fromValues","rotationX","rotationY","toValues","offset","Math","abs","startOffsetAdd","endOffsetAdd","spin3dScroll","custom","name","keyframes","transform"],"sources":["../../../../src/library/scroll/Spin3dScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  Spin3dScroll,\n  DomApi,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\n\nconst MAX_Y_TRAVEL = 40;\n\nconst POWER_MAP = {\n  soft: { rotationZ: 45, travelY: 0 },\n  medium: { rotationZ: 100, travelY: 0.5 },\n  hard: { rotationZ: 200, travelY: 1 },\n};\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-spin3dScroll'];\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    rotate = -100,\n    speed = 0,\n    power,\n    range = 'in',\n  } = options.namedEffect as Spin3dScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const { rotationZ, travelY } =\n    power && POWER_MAP[power]\n      ? POWER_MAP[power]\n      : { rotationZ: rotate, travelY: speed };\n  const travel = travelY * MAX_Y_TRAVEL;\n\n  const fromValues = {\n    rotationX: range === 'out' ? 0 : -2 * rotationZ,\n    rotationY: range === 'out' ? 0 : -rotationZ,\n    rotationZ: range === 'out' ? 0 : -rotationZ,\n    travel: range === 'out' ? 0 : -travel,\n  };\n  const toValues = {\n    rotationX: rotationZ * (range === 'in' ? 0 : range === 'out' ? 3 : 1.8),\n    rotationY: rotationZ * (range === 'in' ? 0 : range === 'out' ? 2 : 1),\n    rotationZ: rotationZ * (range === 'in' ? 0 : range === 'out' ? 1 : 2),\n    travel: range === 'in' ? 0 : travel,\n  };\n\n  const offset = Math.abs(travel);\n  const startOffsetAdd = range === 'out' ? '0px' : `${-offset}vh`;\n  const endOffsetAdd = range === 'in' ? '0px' : `${offset}vh`;\n\n  const [spin3dScroll] = getNames(options);\n\n  const custom = {\n    '--motion-travel-from': `${fromValues.travel}vh`,\n    '--motion-travel-to': `${toValues.travel}vh`,\n    '--motion-rot-x-from': `${fromValues.rotationX}deg`,\n    '--motion-rot-x-to': `${toValues.rotationX}deg`,\n    '--motion-rot-y-from': `${fromValues.rotationY}deg`,\n    '--motion-rot-y-to': `${toValues.rotationY}deg`,\n    '--motion-rot-z-from': `${fromValues.rotationZ}deg`,\n    '--motion-rot-z-to': `${toValues.rotationZ}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: spin3dScroll,\n      fill,\n      easing,\n      custom,\n      startOffsetAdd,\n      endOffsetAdd,\n      keyframes: [\n        {\n          transform: `perspective(1000px) translateY(${toKeyframeValue(\n            custom,\n            '--motion-travel-from',\n            asWeb,\n          )}) rotateZ(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(\n            custom,\n            '--motion-rot-z-from',\n            asWeb,\n          )})) rotateY(${toKeyframeValue(\n            custom,\n            '--motion-rot-y-from',\n            asWeb,\n          )}) rotateX(${toKeyframeValue(\n            custom,\n            '--motion-rot-x-from',\n            asWeb,\n          )})`,\n        },\n        {\n          transform: `perspective(1000px) translateY(${toKeyframeValue(\n            custom,\n            '--motion-travel-to',\n            asWeb,\n          )}) rotateZ(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(\n            custom,\n            '--motion-rot-z-to',\n            asWeb,\n          )})) rotateY(${toKeyframeValue(\n            custom,\n            '--motion-rot-y-to',\n            asWeb,\n          )}) rotateX(${toKeyframeValue(custom, '--motion-rot-x-to', asWeb)})`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,13 +1,19 @@
+import { toKeyframeValue } from '../../utils';
 const POWER_MAP = {
   soft: 1,
   medium: 0.7,
   hard: 0.4
 };
-const DIRECTION_MAP = {
-  clockwise: 1,
-  'counter-clockwise': -1
-};
-export default function create(options) {
+export function getNames(_) {
+  return ['motion-spinScroll'];
+}
+export function web(options, _dom) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
   const {
     spins = 0.15,
     scale = 1,
@@ -17,31 +23,30 @@ export default function create(options) {
   } = options.namedEffect;
   const easing = 'linear';
   const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
-  const spinDirection = DIRECTION_MAP[direction];
-  const rotationZ = spins * 360;
+  const rotationZ = 360 * spins;
   const scaleFactor = power && POWER_MAP[power] ? POWER_MAP[power] : scale;
   const isIn = range === 'in';
   const fromValue = isIn ? -rotationZ : range === 'out' ? 0 : -rotationZ / 2;
   const toValue = isIn ? 0 : range === 'out' ? rotationZ : rotationZ / 2;
+  const spinDirection = direction === 'clockwise' ? 1 : -1;
+  const [spinScroll] = getNames(options);
+  const custom = {
+    '--motion-spin-from': `${spinDirection * fromValue}deg`,
+    '--motion-spin-to': `${spinDirection * toValue}deg`,
+    '--motion-spin-scale-from': isIn ? scaleFactor : 1,
+    '--motion-spin-scale-to': isIn ? 1 : scaleFactor
+  };
   return [{
     ...options,
+    name: spinScroll,
     fill,
     easing,
+    custom,
     keyframes: [{
-      transform: `scale(${isIn ? scaleFactor : 1}) rotate(calc(var(--comp-rotate-z, 0deg) + ${fromValue * spinDirection}deg))`
+      transform: `scale(${toKeyframeValue(custom, '--motion-spin-scale-from', asWeb)}) rotate(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-spin-from', asWeb)}))`
     }, {
-      transform: `scale(${isIn ? 1 : scaleFactor}) rotate(calc(var(--comp-rotate-z, 0deg) + ${toValue * spinDirection}deg))`
+      transform: `scale(${toKeyframeValue(custom, '--motion-spin-scale-to', asWeb)}) rotate(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-spin-to', asWeb)}))`
     }]
   }];
-  /*
-   * @keyframes <name> {
-   *   from {
-   *     transform: scale(<fromValues.scale>) rotate(<rotation> - <fromValue.rotate * spinDirection>);
-   *   }
-   *   to {
-   *     transform: scale(<toValues.scale>) rotate(<rotation> + <toValue.rotate * spinDirection>);
-   *   }
-   * }
-   */
 }
 //# sourceMappingURL=SpinScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["POWER_MAP","soft","medium","hard","DIRECTION_MAP","clockwise","create","options","spins","scale","direction","power","range","namedEffect","easing","fill","spinDirection","rotationZ","scaleFactor","isIn","fromValue","toValue","keyframes","transform"],"sources":["../../../../src/library/scroll/SpinScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  SpinScroll,\n} from '../../types';\n\nconst POWER_MAP = {\n  soft: 1,\n  medium: 0.7,\n  hard: 0.4,\n};\n\nconst DIRECTION_MAP = {\n  clockwise: 1,\n  'counter-clockwise': -1,\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const {\n    spins = 0.15,\n    scale = 1,\n    direction = 'clockwise',\n    power,\n    range = 'in',\n  } = options.namedEffect as SpinScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const spinDirection = DIRECTION_MAP[direction];\n  const rotationZ = spins * 360;\n  const scaleFactor = power && POWER_MAP[power] ? POWER_MAP[power] : scale;\n  const isIn = range === 'in';\n\n  const fromValue = isIn ? -rotationZ : range === 'out' ? 0 : -rotationZ / 2;\n  const toValue = isIn ? 0 : range === 'out' ? rotationZ : rotationZ / 2;\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          transform: `scale(${\n            isIn ? scaleFactor : 1\n          }) rotate(calc(var(--comp-rotate-z, 0deg) + ${\n            fromValue * spinDirection\n          }deg))`,\n        },\n        {\n          transform: `scale(${\n            isIn ? 1 : scaleFactor\n          }) rotate(calc(var(--comp-rotate-z, 0deg) + ${\n            toValue * spinDirection\n          }deg))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: scale(<fromValues.scale>) rotate(<rotation> - <fromValue.rotate * spinDirection>);\n   *   }\n   *   to {\n   *     transform: scale(<toValues.scale>) rotate(<rotation> + <toValue.rotate * spinDirection>);\n   *   }\n   * }\n   */\n}\n"],"mappings":"AAMA,MAAMA,SAAS,GAAG;EAChBC,IAAI,EAAE,CAAC;EACPC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,aAAa,GAAG;EACpBC,SAAS,EAAE,CAAC;EACZ,mBAAmB,EAAE,CAAC;AACxB,CAAC;AAED,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IACJC,KAAK,GAAG,IAAI;IACZC,KAAK,GAAG,CAAC;IACTC,SAAS,GAAG,WAAW;IACvBC,KAAK;IACLC,KAAK,GAAG;EACV,CAAC,GAAGL,OAAO,CAACM,WAAyB;EACrC,MAAMC,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRH,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGL,OAAO,CAACQ,IAClD;EAEtB,MAAMC,aAAa,GAAGZ,aAAa,CAACM,SAAS,CAAC;EAC9C,MAAMO,SAAS,GAAGT,KAAK,GAAG,GAAG;EAC7B,MAAMU,WAAW,GAAGP,KAAK,IAAIX,SAAS,CAACW,KAAK,CAAC,GAAGX,SAAS,CAACW,KAAK,CAAC,GAAGF,KAAK;EACxE,MAAMU,IAAI,GAAGP,KAAK,KAAK,IAAI;EAE3B,MAAMQ,SAAS,GAAGD,IAAI,GAAG,CAACF,SAAS,GAAGL,KAAK,KAAK,KAAK,GAAG,CAAC,GAAG,CAACK,SAAS,GAAG,CAAC;EAC1E,MAAMI,OAAO,GAAGF,IAAI,GAAG,CAAC,GAAGP,KAAK,KAAK,KAAK,GAAGK,SAAS,GAAGA,SAAS,GAAG,CAAC;EAEtE,OAAO,CACL;IACE,GAAGV,OAAO;IACVQ,IAAI;IACJD,MAAM;IACNQ,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,SACTJ,IAAI,GAAGD,WAAW,GAAG,CAAC,8CAEtBE,SAAS,GAAGJ,aAAa;IAE7B,CAAC,EACD;MACEO,SAAS,EAAE,SACTJ,IAAI,GAAG,CAAC,GAAGD,WAAW,8CAEtBG,OAAO,GAAGL,aAAa;IAE3B,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}
+{"version":3,"names":["toKeyframeValue","POWER_MAP","soft","medium","hard","getNames","_","web","options","_dom","style","asWeb","spins","scale","direction","power","range","namedEffect","easing","fill","rotationZ","scaleFactor","isIn","fromValue","toValue","spinDirection","spinScroll","custom","name","keyframes","transform"],"sources":["../../../../src/library/scroll/SpinScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  SpinScroll,\n  DomApi,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\n\nconst POWER_MAP = {\n  soft: 1,\n  medium: 0.7,\n  hard: 0.4,\n};\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-spinScroll'];\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    spins = 0.15,\n    scale = 1,\n    direction = 'clockwise',\n    power,\n    range = 'in',\n  } = options.namedEffect as SpinScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const rotationZ = 360 * spins;\n  const scaleFactor = power && POWER_MAP[power] ? POWER_MAP[power] : scale;\n\n  const isIn = range === 'in';\n  const fromValue = isIn ? -rotationZ : range === 'out' ? 0 : -rotationZ / 2;\n  const toValue = isIn ? 0 : range === 'out' ? rotationZ : rotationZ / 2;\n  const spinDirection = direction === 'clockwise' ? 1 : -1;\n\n  const [spinScroll] = getNames(options);\n\n  const custom = {\n    '--motion-spin-from': `${spinDirection * fromValue}deg`,\n    '--motion-spin-to': `${spinDirection * toValue}deg`,\n    '--motion-spin-scale-from': isIn ? scaleFactor : 1,\n    '--motion-spin-scale-to': isIn ? 1 : scaleFactor,\n  };\n\n  return [\n    {\n      ...options,\n      name: spinScroll,\n      fill,\n      easing,\n      custom,\n      keyframes: [\n        {\n          transform: `scale(${toKeyframeValue(\n            custom,\n            '--motion-spin-scale-from',\n            asWeb,\n          )}) rotate(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(custom, '--motion-spin-from', asWeb)}))`,\n        },\n        {\n          transform: `scale(${toKeyframeValue(\n            custom,\n            '--motion-spin-scale-to',\n            asWeb,\n          )}) rotate(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(custom, '--motion-spin-to', asWeb)}))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AAMA,SAASA,eAAe,QAAQ,aAAa;AAE7C,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAE,CAAC;EACPC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAAC;AAED,OAAO,SAASC,QAAQA,CAACC,CAAwB,EAAE;EACjD,OAAO,CAAC,mBAAmB,CAAC;AAC9B;AAEA,OAAO,SAASC,GAAGA,CAACC,OAA8B,EAAEC,IAAa,EAAE;EACjE,OAAOC,KAAK,CAACF,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEA,OAAO,SAASE,KAAKA,CAACF,OAA8B,EAAEG,KAAK,EAAU;EAAA,IAAfA,KAAK;IAALA,KAAK,GAAG,KAAK;EAAA;EACjE,MAAM;IACJC,KAAK,GAAG,IAAI;IACZC,KAAK,GAAG,CAAC;IACTC,SAAS,GAAG,WAAW;IACvBC,KAAK;IACLC,KAAK,GAAG;EACV,CAAC,GAAGR,OAAO,CAACS,WAAyB;EACrC,MAAMC,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRH,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGR,OAAO,CAACW,IAClD;EAEtB,MAAMC,SAAS,GAAG,GAAG,GAAGR,KAAK;EAC7B,MAAMS,WAAW,GAAGN,KAAK,IAAId,SAAS,CAACc,KAAK,CAAC,GAAGd,SAAS,CAACc,KAAK,CAAC,GAAGF,KAAK;EAExE,MAAMS,IAAI,GAAGN,KAAK,KAAK,IAAI;EAC3B,MAAMO,SAAS,GAAGD,IAAI,GAAG,CAACF,SAAS,GAAGJ,KAAK,KAAK,KAAK,GAAG,CAAC,GAAG,CAACI,SAAS,GAAG,CAAC;EAC1E,MAAMI,OAAO,GAAGF,IAAI,GAAG,CAAC,GAAGN,KAAK,KAAK,KAAK,GAAGI,SAAS,GAAGA,SAAS,GAAG,CAAC;EACtE,MAAMK,aAAa,GAAGX,SAAS,KAAK,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;EAExD,MAAM,CAACY,UAAU,CAAC,GAAGrB,QAAQ,CAACG,OAAO,CAAC;EAEtC,MAAMmB,MAAM,GAAG;IACb,oBAAoB,EAAE,GAAGF,aAAa,GAAGF,SAAS,KAAK;IACvD,kBAAkB,EAAE,GAAGE,aAAa,GAAGD,OAAO,KAAK;IACnD,0BAA0B,EAAEF,IAAI,GAAGD,WAAW,GAAG,CAAC;IAClD,wBAAwB,EAAEC,IAAI,GAAG,CAAC,GAAGD;EACvC,CAAC;EAED,OAAO,CACL;IACE,GAAGb,OAAO;IACVoB,IAAI,EAAEF,UAAU;IAChBP,IAAI;IACJD,MAAM;IACNS,MAAM;IACNE,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,SAAS9B,eAAe,CACjC2B,MAAM,EACN,0BAA0B,EAC1BhB,KACF,CAAC,iBAAiBX,eAAe,CAC/B,CAAC,CAAC,EACF,iBAAiB,EACjB,KAAK,EACL,MACF,CAAC,MAAMA,eAAe,CAAC2B,MAAM,EAAE,oBAAoB,EAAEhB,KAAK,CAAC;IAC7D,CAAC,EACD;MACEmB,SAAS,EAAE,SAAS9B,eAAe,CACjC2B,MAAM,EACN,wBAAwB,EACxBhB,KACF,CAAC,iBAAiBX,eAAe,CAC/B,CAAC,CAAC,EACF,iBAAiB,EACjB,KAAK,EACL,MACF,CAAC,MAAMA,eAAe,CAAC2B,MAAM,EAAE,kBAAkB,EAAEhB,KAAK,CAAC;IAC3D,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -1,4 +1,5 @@
 import { cssEasings as easings } from '../../easings';
+import { roundNumber, toKeyframeValue } from '../../utils';
 const POWER_MAP = {
   soft: {
     scaleY: 1.2,
@@ -13,34 +14,6 @@ const POWER_MAP = {
     scaleX: 0.4
   }
 };
-const KEYFRAMES_RANGE_MAP = {
-  in: (scaleX, scaleY) => [{
-    scale: `${scaleX} ${scaleY}`,
-    translate: `0 ${100 * (scaleY - 1)}%`
-  }, {
-    scale: '1 1',
-    translate: '0 0'
-  }],
-  out: (scaleX, scaleY) => [{
-    scale: '1 1',
-    translate: '0 0'
-  }, {
-    scale: `${scaleX} ${scaleY}`,
-    translate: `0 ${100 * (1 - scaleY)}%`
-  }],
-  continuous: (scaleX, scaleY) => [{
-    scale: `${scaleX} ${scaleY}`,
-    translate: `0 ${100 * (scaleY - 1)}%`,
-    easing: easings.backInOut
-  }, {
-    scale: '1 1',
-    translate: '0 0',
-    easing: easings.backInOut
-  }, {
-    scale: `${scaleX} ${scaleY}`,
-    translate: `0 ${100 * (1 - scaleY)}%`
-  }]
-};
 const opacityKeyframesMap = {
   in: [{
     opacity: 0,
@@ -70,7 +43,19 @@ const opacityKeyframesMap = {
     offset: 1
   }]
 };
-export default function create(options) {
+export function getNames(options) {
+  const {
+    range = 'out'
+  } = options.namedEffect;
+  return [`motion-stretchScrollScale${range === 'continuous' ? '-continuous' : ''}`, `motion-stretchScrollOpacity-${range}`];
+}
+export function web(options, _dom) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
   const {
     power,
     stretch = 0.6,
@@ -85,17 +70,49 @@ export default function create(options) {
     scaleX: 1 - stretch,
     scaleY: 1 + stretch
   };
-  const animations = KEYFRAMES_RANGE_MAP[range](scaleX, scaleY);
+  const [stretchScrollScale, stretchScrollOpacity] = getNames(options);
+  const isOut = range === 'out';
+  const roundedScaleX = roundNumber(scaleX);
+  const roundedScaleY = roundNumber(scaleY);
+  const custom = {
+    '--motion-stretch-scale-x-from': isOut ? 1 : roundedScaleX,
+    '--motion-stretch-scale-y-from': isOut ? 1 : roundedScaleY,
+    '--motion-stretch-scale-x-to': isOut ? roundedScaleX : 1,
+    '--motion-stretch-scale-y-to': isOut ? roundedScaleY : 1,
+    '--motion-stretch-trans-from': isOut ? 0 : `calc(-100% * (1 - ${roundedScaleY}))`,
+    '--motion-stretch-trans-to': isOut ? `calc(100% * (1 - ${roundedScaleY}))` : 0
+  };
+  const stretchKeyframes = [{
+    scale: `${toKeyframeValue(custom, '--motion-stretch-scale-x-from', asWeb)} ${toKeyframeValue(custom, '--motion-stretch-scale-y-from', asWeb)}`,
+    translate: `0 ${toKeyframeValue(custom, '--motion-stretch-trans-from', asWeb)}`
+  }, {
+    scale: `${toKeyframeValue(custom, '--motion-stretch-scale-x-to', asWeb)} ${toKeyframeValue(custom, '--motion-stretch-scale-y-to', asWeb)}`,
+    translate: `0 ${toKeyframeValue(custom, '--motion-stretch-trans-to', asWeb)}`
+  }];
+  if (range === 'continuous') {
+    stretchKeyframes.forEach(frame => {
+      Object.assign(frame, {
+        easing: easings.backInOut
+      });
+    });
+    stretchKeyframes.push({
+      scale: `${toKeyframeValue(custom, '--motion-stretch-scale-x-from', asWeb)} ${toKeyframeValue(custom, '--motion-stretch-scale-y-from', asWeb)}`,
+      translate: `0 calc(100% * (1 - ${toKeyframeValue(custom, '--motion-stretch-scale-y-from', asWeb)}))`
+    });
+  }
   return [{
     ...options,
+    name: stretchScrollScale,
     fill,
     easing,
-    keyframes: animations
+    custom,
+    keyframes: stretchKeyframes
   }, {
     ...options,
+    name: stretchScrollOpacity,
     fill,
     easing,
-    keyframes: opacityKeyframesMap[range]
+    keyframes: opacityKeyframesMap[range] || opacityKeyframesMap.out
   }];
 }
 //# sourceMappingURL=StretchScroll.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cssEasings","easings","POWER_MAP","soft","scaleY","scaleX","medium","hard","KEYFRAMES_RANGE_MAP","in","scale","translate","out","continuous","easing","backInOut","opacityKeyframesMap","opacity","offset","create","options","power","stretch","range","namedEffect","fill","animations","keyframes"],"sources":["../../../../src/library/scroll/StretchScroll.ts"],"sourcesContent":["import { cssEasings as easings } from '../../easings';\nimport type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  StretchScroll,\n} from '../../types';\n\nconst POWER_MAP = {\n  soft: { scaleY: 1.2, scaleX: 0.8 },\n  medium: { scaleY: 1.5, scaleX: 0.6 },\n  hard: { scaleY: 2, scaleX: 0.4 },\n};\n\nconst KEYFRAMES_RANGE_MAP = {\n  in: (scaleX: number, scaleY: number) => [\n    {\n      scale: `${scaleX} ${scaleY}`,\n      translate: `0 ${100 * (scaleY - 1)}%`,\n    },\n    {\n      scale: '1 1',\n      translate: '0 0',\n    },\n  ],\n  out: (scaleX: number, scaleY: number) => [\n    {\n      scale: '1 1',\n      translate: '0 0',\n    },\n    {\n      scale: `${scaleX} ${scaleY}`,\n      translate: `0 ${100 * (1 - scaleY)}%`,\n    },\n  ],\n  continuous: (scaleX: number, scaleY: number) => [\n    {\n      scale: `${scaleX} ${scaleY}`,\n      translate: `0 ${100 * (scaleY - 1)}%`,\n      easing: easings.backInOut,\n    },\n    {\n      scale: '1 1',\n      translate: '0 0',\n      easing: easings.backInOut,\n    },\n    {\n      scale: `${scaleX} ${scaleY}`,\n      translate: `0 ${100 * (1 - scaleY)}%`,\n    },\n  ],\n};\nconst opacityKeyframesMap = {\n  in: [\n    { opacity: 0, offset: 0 },\n    { opacity: 1, offset: 0.65 },\n  ],\n  out: [\n    { opacity: 1, offset: 0.35 },\n    { opacity: 0, offset: 1 },\n  ],\n  continuous: [\n    { opacity: 0, offset: 0 },\n    { opacity: 1, offset: 0.325 },\n    { opacity: 1, offset: 0.7 },\n    { opacity: 0, offset: 1 },\n  ],\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const {\n    power,\n    stretch = 0.6,\n    range = 'out',\n  } = options.namedEffect as StretchScroll;\n  const easing = range === 'continuous' ? 'linear' : 'backInOut';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const { scaleX, scaleY } =\n    power && POWER_MAP[power]\n      ? POWER_MAP[power]\n      : { scaleX: 1 - stretch, scaleY: 1 + stretch };\n\n  const animations = KEYFRAMES_RANGE_MAP[range](scaleX, scaleY);\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: animations,\n    },\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: opacityKeyframesMap[range],\n    },\n  ];\n}\n"],"mappings":"AAAA,SAASA,UAAU,IAAIC,OAAO,QAAQ,eAAe;AAOrD,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAE;IAAEC,MAAM,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAI,CAAC;EAClCC,MAAM,EAAE;IAAEF,MAAM,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAI,CAAC;EACpCE,IAAI,EAAE;IAAEH,MAAM,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAI;AACjC,CAAC;AAED,MAAMG,mBAAmB,GAAG;EAC1BC,EAAE,EAAEA,CAACJ,MAAc,EAAED,MAAc,KAAK,CACtC;IACEM,KAAK,EAAE,GAAGL,MAAM,IAAID,MAAM,EAAE;IAC5BO,SAAS,EAAE,KAAK,GAAG,IAAIP,MAAM,GAAG,CAAC,CAAC;EACpC,CAAC,EACD;IACEM,KAAK,EAAE,KAAK;IACZC,SAAS,EAAE;EACb,CAAC,CACF;EACDC,GAAG,EAAEA,CAACP,MAAc,EAAED,MAAc,KAAK,CACvC;IACEM,KAAK,EAAE,KAAK;IACZC,SAAS,EAAE;EACb,CAAC,EACD;IACED,KAAK,EAAE,GAAGL,MAAM,IAAID,MAAM,EAAE;IAC5BO,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC,GAAGP,MAAM,CAAC;EACpC,CAAC,CACF;EACDS,UAAU,EAAEA,CAACR,MAAc,EAAED,MAAc,KAAK,CAC9C;IACEM,KAAK,EAAE,GAAGL,MAAM,IAAID,MAAM,EAAE;IAC5BO,SAAS,EAAE,KAAK,GAAG,IAAIP,MAAM,GAAG,CAAC,CAAC,GAAG;IACrCU,MAAM,EAAEb,OAAO,CAACc;EAClB,CAAC,EACD;IACEL,KAAK,EAAE,KAAK;IACZC,SAAS,EAAE,KAAK;IAChBG,MAAM,EAAEb,OAAO,CAACc;EAClB,CAAC,EACD;IACEL,KAAK,EAAE,GAAGL,MAAM,IAAID,MAAM,EAAE;IAC5BO,SAAS,EAAE,KAAK,GAAG,IAAI,CAAC,GAAGP,MAAM,CAAC;EACpC,CAAC;AAEL,CAAC;AACD,MAAMY,mBAAmB,GAAG;EAC1BP,EAAE,EAAE,CACF;IAAEQ,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,EACzB;IAAED,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAK,CAAC,CAC7B;EACDN,GAAG,EAAE,CACH;IAAEK,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAK,CAAC,EAC5B;IAAED,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,CAC1B;EACDL,UAAU,EAAE,CACV;IAAEI,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,EACzB;IAAED,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAM,CAAC,EAC7B;IAAED,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAI,CAAC,EAC3B;IAAED,OAAO,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC;AAE7B,CAAC;AAED,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IACJC,KAAK;IACLC,OAAO,GAAG,GAAG;IACbC,KAAK,GAAG;EACV,CAAC,GAAGH,OAAO,CAACI,WAA4B;EACxC,MAAMV,MAAM,GAAGS,KAAK,KAAK,YAAY,GAAG,QAAQ,GAAG,WAAW;EAC9D,MAAME,IAAI,GACRF,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGH,OAAO,CAACK,IAClD;EAEtB,MAAM;IAAEpB,MAAM;IAAED;EAAO,CAAC,GACtBiB,KAAK,IAAInB,SAAS,CAACmB,KAAK,CAAC,GACrBnB,SAAS,CAACmB,KAAK,CAAC,GAChB;IAAEhB,MAAM,EAAE,CAAC,GAAGiB,OAAO;IAAElB,MAAM,EAAE,CAAC,GAAGkB;EAAQ,CAAC;EAElD,MAAMI,UAAU,GAAGlB,mBAAmB,CAACe,KAAK,CAAC,CAAClB,MAAM,EAAED,MAAM,CAAC;EAE7D,OAAO,CACL;IACE,GAAGgB,OAAO;IACVK,IAAI;IACJX,MAAM;IACNa,SAAS,EAAED;EACb,CAAC,EACD;IACE,GAAGN,OAAO;IACVK,IAAI;IACJX,MAAM;IACNa,SAAS,EAAEX,mBAAmB,CAACO,KAAK;EACtC,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["cssEasings","easings","roundNumber","toKeyframeValue","POWER_MAP","soft","scaleY","scaleX","medium","hard","opacityKeyframesMap","in","opacity","offset","out","continuous","getNames","options","range","namedEffect","web","_dom","style","asWeb","power","stretch","easing","fill","stretchScrollScale","stretchScrollOpacity","isOut","roundedScaleX","roundedScaleY","custom","stretchKeyframes","scale","translate","forEach","frame","Object","assign","backInOut","push","name","keyframes"],"sources":["../../../../src/library/scroll/StretchScroll.ts"],"sourcesContent":["import { cssEasings as easings } from '../../easings';\nimport type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  StretchScroll,\n  DomApi,\n} from '../../types';\nimport { roundNumber, toKeyframeValue } from '../../utils';\n\nconst POWER_MAP = {\n  soft: { scaleY: 1.2, scaleX: 0.8 },\n  medium: { scaleY: 1.5, scaleX: 0.6 },\n  hard: { scaleY: 2, scaleX: 0.4 },\n};\n\nconst opacityKeyframesMap = {\n  in: [\n    { opacity: 0, offset: 0 },\n    { opacity: 1, offset: 0.65 },\n  ],\n  out: [\n    { opacity: 1, offset: 0.35 },\n    { opacity: 0, offset: 1 },\n  ],\n  continuous: [\n    { opacity: 0, offset: 0 },\n    { opacity: 1, offset: 0.325 },\n    { opacity: 1, offset: 0.7 },\n    { opacity: 0, offset: 1 },\n  ],\n};\n\nexport function getNames(options: ScrubAnimationOptions) {\n  const { range = 'out' } = options.namedEffect as StretchScroll;\n  return [\n    `motion-stretchScrollScale${range === 'continuous' ? '-continuous' : ''}`,\n    `motion-stretchScrollOpacity-${range}`,\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    power,\n    stretch = 0.6,\n    range = 'out',\n  } = options.namedEffect as StretchScroll;\n  const easing = range === 'continuous' ? 'linear' : 'backInOut';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const { scaleX, scaleY } =\n    power && POWER_MAP[power]\n      ? POWER_MAP[power]\n      : { scaleX: 1 - stretch, scaleY: 1 + stretch };\n\n  const [stretchScrollScale, stretchScrollOpacity] = getNames(options);\n\n  const isOut = range === 'out';\n  const roundedScaleX = roundNumber(scaleX);\n  const roundedScaleY = roundNumber(scaleY);\n\n  const custom = {\n    '--motion-stretch-scale-x-from': isOut ? 1 : roundedScaleX,\n    '--motion-stretch-scale-y-from': isOut ? 1 : roundedScaleY,\n    '--motion-stretch-scale-x-to': isOut ? roundedScaleX : 1,\n    '--motion-stretch-scale-y-to': isOut ? roundedScaleY : 1,\n    '--motion-stretch-trans-from': isOut\n      ? 0\n      : `calc(-100% * (1 - ${roundedScaleY}))`,\n    '--motion-stretch-trans-to': isOut\n      ? `calc(100% * (1 - ${roundedScaleY}))`\n      : 0,\n  };\n\n  const stretchKeyframes = [\n    {\n      scale: `${toKeyframeValue(\n        custom,\n        '--motion-stretch-scale-x-from',\n        asWeb,\n      )} ${toKeyframeValue(custom, '--motion-stretch-scale-y-from', asWeb)}`,\n      translate: `0 ${toKeyframeValue(\n        custom,\n        '--motion-stretch-trans-from',\n        asWeb,\n      )}`,\n    },\n    {\n      scale: `${toKeyframeValue(\n        custom,\n        '--motion-stretch-scale-x-to',\n        asWeb,\n      )} ${toKeyframeValue(custom, '--motion-stretch-scale-y-to', asWeb)}`,\n      translate: `0 ${toKeyframeValue(\n        custom,\n        '--motion-stretch-trans-to',\n        asWeb,\n      )}`,\n    },\n  ];\n\n  if (range === 'continuous') {\n    stretchKeyframes.forEach((frame) => {\n      Object.assign(frame, { easing: easings.backInOut });\n    });\n\n    stretchKeyframes.push({\n      scale: `${toKeyframeValue(\n        custom,\n        '--motion-stretch-scale-x-from',\n        asWeb,\n      )} ${toKeyframeValue(custom, '--motion-stretch-scale-y-from', asWeb)}`,\n      translate: `0 calc(100% * (1 - ${toKeyframeValue(\n        custom,\n        '--motion-stretch-scale-y-from',\n        asWeb,\n      )}))`,\n    });\n  }\n\n  return [\n    {\n      ...options,\n      name: stretchScrollScale,\n      fill,\n      easing,\n      custom,\n      keyframes: stretchKeyframes,\n    },\n    {\n      ...options,\n      name: stretchScrollOpacity,\n      fill,\n      easing,\n      keyframes: opacityKeyframesMap[range] || opacityKeyframesMap.out,\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,76 +1,22 @@
 import { cssEasings as easings } from '../../easings';
+import { toKeyframeValue } from '../../utils';
 const MAX_Y_TRAVEL = 40;
 const [ROTATION_X, ROTATION_Y, ROTATION_Z] = [10, 25, 25];
-const [UP, DOWN, ORIGINAL_LAYOUT] = [-1, 1, 0];
 const TRANSLATE_Y_POWER_MAP = {
   soft: 0,
   medium: 0.5,
   hard: 1
 };
-const DIRECTIONS_MAP = {
-  right: 1,
-  left: -1
-};
-const RANGES_MAP = {
-  in: {
-    from: {
-      x: -1,
-      y: -1,
-      z: 1,
-      transY: DOWN
-    },
-    to: {
-      x: 0,
-      y: 0,
-      z: 0,
-      transY: ORIGINAL_LAYOUT
-    }
-  },
-  out: {
-    from: {
-      x: 0,
-      y: 0,
-      z: 0,
-      transY: ORIGINAL_LAYOUT
-    },
-    to: {
-      x: -1,
-      y: -1,
-      z: 1,
-      transY: UP
-    }
-  },
-  continuous: {
-    from: {
-      x: -1,
-      y: -1,
-      z: -1,
-      transY: DOWN
-    },
-    to: {
-      x: 1,
-      y: 0.5,
-      z: 1.25,
-      transY: UP
-    }
-  }
-};
-function getYTravel(distance, power) {
-  return (power && power in TRANSLATE_Y_POWER_MAP ? TRANSLATE_Y_POWER_MAP[power] : distance) * MAX_Y_TRAVEL;
+export function getNames(_) {
+  return ['motion-tiltScrollTranslate', 'motion-tiltScrollRotate'];
 }
-function getScrubOffsets(_ref) {
-  let {
-    power,
-    range = 'in',
-    distance = 0
-  } = _ref;
-  const offset = Math.abs(getYTravel(distance, power));
-  return {
-    start: range === 'out' ? '0px' : `${-offset}vh`,
-    end: range === 'in' ? '0px' : `${offset}vh`
-  };
+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,
     distance = 0,
@@ -79,47 +25,60 @@ export default function create(options) {
   } = options.namedEffect;
   const easing = 'linear';
   const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
-  const {
-    from,
-    to
-  } = RANGES_MAP[range];
-  const dir = DIRECTIONS_MAP[direction];
-  const rotateZFrom = Math.abs(from.z) * ROTATION_Z * dir * (from.z < 0 ? -1 : 1);
-  const rotateZTo = Math.abs(to.z) * ROTATION_Z * dir * (to.z < 0 ? -1 : 1);
-  const travelY = getYTravel(distance, power);
-  const travelYFrom = travelY * from.transY;
-  const travelYTo = travelY * to.transY;
-  const rotationXFrom = from.x * ROTATION_X;
-  const rotationYFrom = from.y * ROTATION_Y;
-  const rotationXTo = to.x * ROTATION_X;
-  const rotationYTo = to.y * ROTATION_Y;
-  const {
-    start: startOffsetAdd,
-    end: endOffsetAdd
-  } = getScrubOffsets(options.namedEffect);
+  const travelY = MAX_Y_TRAVEL * (power && power in TRANSLATE_Y_POWER_MAP ? TRANSLATE_Y_POWER_MAP[power] : distance);
+  const dir = direction === 'left' ? -1 : 1;
+  const from = {
+    x: ROTATION_X * (range === 'out' ? 0 : -1),
+    y: ROTATION_Y * (range === 'out' ? 0 : -1),
+    z: ROTATION_Z * dir * (range === 'out' ? 0 : range === 'in' ? 1 : -1),
+    transY: range === 'out' ? 0 : travelY
+  };
+  const to = {
+    x: ROTATION_X * (range === 'in' ? 0 : range === 'out' ? -1 : 1),
+    y: ROTATION_Y * (range === 'in' ? 0 : range === 'out' ? -1 : 0.5),
+    z: ROTATION_Z * dir * (range === 'in' ? 0 : range === 'out' ? 1 : 1.25),
+    transY: range === 'in' ? 0 : -1 * travelY
+  };
+  const startOffsetAdd = range === 'out' ? '0px' : `${-1 * Math.abs(travelY)}vh`;
+  const endOffsetAdd = range === 'in' ? '0px' : `${Math.abs(travelY)}vh`;
+  const [tiltScrollTranslate, tiltScrollRotate] = getNames(options);
+  const custom = {
+    '--motion-tilt-y-from': `${from.transY}vh`,
+    '--motion-tilt-y-to': `${to.transY}vh`,
+    '--motion-tilt-x-from': `${from.x}deg`,
+    '--motion-tilt-x-to': `${to.x}deg`,
+    '--motion-tilt-y-rot-from': `${from.y}deg`,
+    '--motion-tilt-y-rot-to': `${to.y}deg`,
+    '--motion-tilt-z-from': `${from.z}deg`,
+    '--motion-tilt-z-to': `${to.z}deg`
+  };
   return [{
     ...options,
+    name: tiltScrollTranslate,
     fill,
     easing,
     startOffsetAdd,
     endOffsetAdd,
+    custom,
     keyframes: [{
-      transform: `perspective(400px) translateY(${travelYFrom}vh) rotateX(${rotationXFrom}deg) rotateY(${rotationYFrom}deg)`
+      transform: `perspective(400px) translateY(${toKeyframeValue(custom, '--motion-tilt-y-from', asWeb)}) rotateX(${toKeyframeValue(custom, '--motion-tilt-x-from', asWeb)}) rotateY(${toKeyframeValue(custom, '--motion-tilt-y-rot-from', asWeb)})`
     }, {
-      transform: `perspective(400px) translateY(${travelYTo}vh) rotateX(${rotationXTo}deg) rotateY(${rotationYTo}deg)`
+      transform: `perspective(400px) translateY(${toKeyframeValue(custom, '--motion-tilt-y-to', asWeb)}) rotateX(${toKeyframeValue(custom, '--motion-tilt-x-to', asWeb)}) rotateY(${toKeyframeValue(custom, '--motion-tilt-y-rot-to', asWeb)})`
     }]
   }, {
     ...options,
+    name: tiltScrollRotate,
     fill,
     easing: easings.sineInOut,
     startOffsetAdd,
     endOffsetAdd,
     composite: 'add',
     // add this animation on top of the previous one
+    custom,
     keyframes: [{
-      transform: `rotate(calc(var(--comp-rotate-z, 0deg) + ${rotateZFrom}deg))`
+      transform: `rotate(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-tilt-z-from', asWeb)}))`
     }, {
-      transform: `rotate(calc(var(--comp-rotate-z, 0deg) + ${rotateZTo}deg))`
+      transform: `rotate(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-tilt-z-to', asWeb)}))`
     }]
   }];
 }

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

@@ -1 +1 @@
-{"version":3,"names":["cssEasings","easings","MAX_Y_TRAVEL","ROTATION_X","ROTATION_Y","ROTATION_Z","UP","DOWN","ORIGINAL_LAYOUT","TRANSLATE_Y_POWER_MAP","soft","medium","hard","DIRECTIONS_MAP","right","left","RANGES_MAP","in","from","x","y","z","transY","to","out","continuous","getYTravel","distance","power","getScrubOffsets","_ref","range","offset","Math","abs","start","end","create","options","direction","namedEffect","easing","fill","dir","rotateZFrom","rotateZTo","travelY","travelYFrom","travelYTo","rotationXFrom","rotationYFrom","rotationXTo","rotationYTo","startOffsetAdd","endOffsetAdd","keyframes","transform","sineInOut","composite"],"sources":["../../../../src/library/scroll/TiltScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  TiltScroll,\n} from '../../types';\nimport { cssEasings as easings } from '../../easings';\n\nconst MAX_Y_TRAVEL = 40;\n\nconst [ROTATION_X, ROTATION_Y, ROTATION_Z] = [10, 25, 25];\nconst [UP, DOWN, ORIGINAL_LAYOUT] = [-1, 1, 0];\n\nconst TRANSLATE_Y_POWER_MAP = {\n  soft: 0,\n  medium: 0.5,\n  hard: 1,\n};\n\nconst DIRECTIONS_MAP = {\n  right: 1,\n  left: -1,\n};\n\nconst RANGES_MAP = {\n  in: {\n    from: {\n      x: -1,\n      y: -1,\n      z: 1,\n      transY: DOWN,\n    },\n    to: {\n      x: 0,\n      y: 0,\n      z: 0,\n      transY: ORIGINAL_LAYOUT,\n    },\n  },\n  out: {\n    from: {\n      x: 0,\n      y: 0,\n      z: 0,\n      transY: ORIGINAL_LAYOUT,\n    },\n    to: {\n      x: -1,\n      y: -1,\n      z: 1,\n      transY: UP,\n    },\n  },\n  continuous: {\n    from: {\n      x: -1,\n      y: -1,\n      z: -1,\n      transY: DOWN,\n    },\n    to: {\n      x: 1,\n      y: 0.5,\n      z: 1.25,\n      transY: UP,\n    },\n  },\n};\n\nfunction getYTravel(\n  distance: number,\n  power?: keyof typeof TRANSLATE_Y_POWER_MAP,\n) {\n  return (\n    (power && power in TRANSLATE_Y_POWER_MAP\n      ? TRANSLATE_Y_POWER_MAP[power]\n      : distance) * MAX_Y_TRAVEL\n  );\n}\n\nfunction getScrubOffsets({ power, range = 'in', distance = 0 }: TiltScroll) {\n  const offset = Math.abs(getYTravel(distance, power));\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    distance = 0,\n    range = 'in',\n    direction = 'right',\n  } = options.namedEffect as TiltScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const { from, to } = RANGES_MAP[range];\n\n  const dir = DIRECTIONS_MAP[direction];\n  const rotateZFrom =\n    Math.abs(from.z) * ROTATION_Z * dir * (from.z < 0 ? -1 : 1);\n  const rotateZTo = Math.abs(to.z) * ROTATION_Z * dir * (to.z < 0 ? -1 : 1);\n\n  const travelY = getYTravel(distance, power);\n  const travelYFrom = travelY * from.transY;\n  const travelYTo = travelY * to.transY;\n  const rotationXFrom = from.x * ROTATION_X;\n  const rotationYFrom = from.y * ROTATION_Y;\n  const rotationXTo = to.x * ROTATION_X;\n  const rotationYTo = to.y * ROTATION_Y;\n\n  const { start: startOffsetAdd, end: endOffsetAdd } = getScrubOffsets(\n    options.namedEffect as TiltScroll,\n  );\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      startOffsetAdd,\n      endOffsetAdd,\n      keyframes: [\n        {\n          transform: `perspective(400px) translateY(${travelYFrom}vh) rotateX(${rotationXFrom}deg) rotateY(${rotationYFrom}deg)`,\n        },\n        {\n          transform: `perspective(400px) translateY(${travelYTo}vh) rotateX(${rotationXTo}deg) rotateY(${rotationYTo}deg)`,\n        },\n      ],\n    },\n    {\n      ...options,\n      fill,\n      easing: easings.sineInOut,\n      startOffsetAdd,\n      endOffsetAdd,\n      composite: 'add' as const, // add this animation on top of the previous one\n      keyframes: [\n        {\n          transform: `rotate(calc(var(--comp-rotate-z, 0deg) + ${rotateZFrom}deg))`,\n        },\n        {\n          transform: `rotate(calc(var(--comp-rotate-z, 0deg) + ${rotateZTo}deg))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["cssEasings","easings","toKeyframeValue","MAX_Y_TRAVEL","ROTATION_X","ROTATION_Y","ROTATION_Z","TRANSLATE_Y_POWER_MAP","soft","medium","hard","getNames","_","web","options","_dom","style","asWeb","power","distance","range","direction","namedEffect","easing","fill","travelY","dir","from","x","y","z","transY","to","startOffsetAdd","Math","abs","endOffsetAdd","tiltScrollTranslate","tiltScrollRotate","custom","name","keyframes","transform","sineInOut","composite"],"sources":["../../../../src/library/scroll/TiltScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  ScrubAnimationOptions,\n  TiltScroll,\n  DomApi,\n} from '../../types';\nimport { cssEasings as easings } from '../../easings';\nimport { toKeyframeValue } from '../../utils';\n\nconst MAX_Y_TRAVEL = 40;\n\nconst [ROTATION_X, ROTATION_Y, ROTATION_Z] = [10, 25, 25];\n\nconst TRANSLATE_Y_POWER_MAP = {\n  soft: 0,\n  medium: 0.5,\n  hard: 1,\n};\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-tiltScrollTranslate', 'motion-tiltScrollRotate'];\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    distance = 0,\n    range = 'in',\n    direction = 'right',\n  } = options.namedEffect as TiltScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const travelY =\n    MAX_Y_TRAVEL *\n    (power && power in TRANSLATE_Y_POWER_MAP\n      ? TRANSLATE_Y_POWER_MAP[power]\n      : distance);\n  const dir = direction === 'left' ? -1 : 1;\n\n  const from = {\n    x: ROTATION_X * (range === 'out' ? 0 : -1),\n    y: ROTATION_Y * (range === 'out' ? 0 : -1),\n    z: ROTATION_Z * dir * (range === 'out' ? 0 : range === 'in' ? 1 : -1),\n    transY: range === 'out' ? 0 : travelY,\n  };\n  const to = {\n    x: ROTATION_X * (range === 'in' ? 0 : range === 'out' ? -1 : 1),\n    y: ROTATION_Y * (range === 'in' ? 0 : range === 'out' ? -1 : 0.5),\n    z: ROTATION_Z * dir * (range === 'in' ? 0 : range === 'out' ? 1 : 1.25),\n    transY: range === 'in' ? 0 : -1 * travelY,\n  };\n\n  const startOffsetAdd =\n    range === 'out' ? '0px' : `${-1 * Math.abs(travelY)}vh`;\n  const endOffsetAdd = range === 'in' ? '0px' : `${Math.abs(travelY)}vh`;\n\n  const [tiltScrollTranslate, tiltScrollRotate] = getNames(options);\n\n  const custom = {\n    '--motion-tilt-y-from': `${from.transY}vh`,\n    '--motion-tilt-y-to': `${to.transY}vh`,\n    '--motion-tilt-x-from': `${from.x}deg`,\n    '--motion-tilt-x-to': `${to.x}deg`,\n    '--motion-tilt-y-rot-from': `${from.y}deg`,\n    '--motion-tilt-y-rot-to': `${to.y}deg`,\n    '--motion-tilt-z-from': `${from.z}deg`,\n    '--motion-tilt-z-to': `${to.z}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: tiltScrollTranslate,\n      fill,\n      easing,\n      startOffsetAdd,\n      endOffsetAdd,\n      custom,\n      keyframes: [\n        {\n          transform: `perspective(400px) translateY(${toKeyframeValue(\n            custom,\n            '--motion-tilt-y-from',\n            asWeb,\n          )}) rotateX(${toKeyframeValue(\n            custom,\n            '--motion-tilt-x-from',\n            asWeb,\n          )}) rotateY(${toKeyframeValue(\n            custom,\n            '--motion-tilt-y-rot-from',\n            asWeb,\n          )})`,\n        },\n        {\n          transform: `perspective(400px) translateY(${toKeyframeValue(\n            custom,\n            '--motion-tilt-y-to',\n            asWeb,\n          )}) rotateX(${toKeyframeValue(\n            custom,\n            '--motion-tilt-x-to',\n            asWeb,\n          )}) rotateY(${toKeyframeValue(\n            custom,\n            '--motion-tilt-y-rot-to',\n            asWeb,\n          )})`,\n        },\n      ],\n    },\n    {\n      ...options,\n      name: tiltScrollRotate,\n      fill,\n      easing: easings.sineInOut,\n      startOffsetAdd,\n      endOffsetAdd,\n      composite: 'add' as const, // add this animation on top of the previous one\n      custom,\n      keyframes: [\n        {\n          transform: `rotate(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(custom, '--motion-tilt-z-from', asWeb)}))`,\n        },\n        {\n          transform: `rotate(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(custom, '--motion-tilt-z-to', asWeb)}))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}