@wix/motion 1.661.0 → 1.663.0

package/dist/cjs/library/backgroundScroll/BgCloseUp.js

@@ -1,21 +1,41 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
 var _utils = require("./utils");
-function create(options, dom) {
+var _utils2 = require("../../utils");
+function getNames(_) {
+  return ['motion-bgCloseUpOpacity', 'motion-bgCloseUpZoom'];
+}
+function prepare(_, dom) {
   const measures = {
-    compHeight: 0
+    '--motion-comp-height': '0px',
+    '--motion-comp-half-height': '0px'
   };
   if (dom) {
-    (0, _utils.measureCompHeight)(measures, dom);
+    (0, _utils.measureCompHeight)(measures, dom, true);
   }
+  return measures;
+}
+function web(options, dom) {
+  options.measures = prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const easing = 'linear';
   const {
     scale = 80
   } = options.namedEffect;
+  const custom = {
+    '--motion-trans-z': `${scale}px`
+  };
+  const [bgCloseUpOpacity, bgCloseUpZoom] = getNames(options);
   return [{
     ...options,
+    name: bgCloseUpOpacity,
     easing,
     part: 'BG_LAYER',
     startOffset: {
@@ -26,7 +46,7 @@ function create(options, dom) {
       }
     },
     get startOffsetAdd() {
-      return `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+      return `calc(50vh + ${(0, _utils2.toKeyframeValue)(options.measures || {}, '--motion-comp-half-height', asWeb)})`;
     },
     endOffset: {
       name: 'cover',
@@ -36,7 +56,7 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100vh + ${measures.compHeight}px)`;
+      return `calc(100vh + ${(0, _utils2.toKeyframeValue)(options.measures || {}, '--motion-comp-height', asWeb)})`;
     },
     keyframes: [{
       opacity: 1
@@ -45,6 +65,7 @@ function create(options, dom) {
     }]
   }, {
     ...options,
+    name: bgCloseUpZoom,
     easing,
     part: 'BG_MEDIA',
     startOffset: {
@@ -62,12 +83,12 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100vh + ${measures.compHeight}px)`;
+      return `calc(100vh + ${(0, _utils2.toKeyframeValue)(options.measures || {}, '--motion-comp-height', asWeb)})`;
     },
     keyframes: [{
       transform: 'perspective(100px) translateZ(0px)'
     }, {
-      transform: `perspective(100px) translateZ(${scale}px)`
+      transform: `perspective(100px) translateZ(${(0, _utils2.toKeyframeValue)(custom, '--motion-trans-z', asWeb)})`
     }]
   }];
 }

package/dist/cjs/library/backgroundScroll/BgCloseUp.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","create","options","dom","measures","compHeight","measureCompHeight","easing","scale","namedEffect","part","startOffset","name","offset","type","value","startOffsetAdd","Math","round","endOffset","endOffsetAdd","keyframes","opacity","transform"],"sources":["../../../../src/library/backgroundScroll/BgCloseUp.ts"],"sourcesContent":["import type {\n  BgCloseUp,\n  DomApi,\n  RangeOffset,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { measureCompHeight } from './utils';\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom);\n  }\n\n  const easing = 'linear';\n  const { scale = 80 } = options.namedEffect as BgCloseUp;\n\n  return [\n    {\n      ...options,\n      easing,\n      part: 'BG_LAYER',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get startOffsetAdd() {\n        return `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;\n      },\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          opacity: 1,\n        },\n        {\n          opacity: 0,\n        },\n      ],\n    },\n    {\n      ...options,\n      easing,\n      part: 'BG_MEDIA',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          transform: 'perspective(100px) translateZ(0px)',\n        },\n        {\n          transform: `perspective(100px) translateZ(${scale}px)`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;AAMA,IAAAA,MAAA,GAAAC,OAAA;AAEe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACP,IAAAG,wBAAiB,EAACF,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAMI,MAAM,GAAG,QAAQ;EACvB,MAAM;IAAEC,KAAK,GAAG;EAAG,CAAC,GAAGN,OAAO,CAACO,WAAwB;EAEvD,OAAO,CACL;IACE,GAAGP,OAAO;IACVK,MAAM;IACNG,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIC,cAAcA,CAAA,EAAG;MACnB,OAAO,eAAeC,IAAI,CAACC,KAAK,CAAC,GAAG,GAAGd,QAAQ,CAACC,UAAU,CAAC,KAAK;IAClE,CAAC;IACDc,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIK,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgBhB,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDgB,SAAS,EAAE,CACT;MACEC,OAAO,EAAE;IACX,CAAC,EACD;MACEA,OAAO,EAAE;IACX,CAAC;EAEL,CAAC,EACD;IACE,GAAGpB,OAAO;IACVK,MAAM;IACNG,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBI,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIK,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgBhB,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDgB,SAAS,EAAE,CACT;MACEE,SAAS,EAAE;IACb,CAAC,EACD;MACEA,SAAS,EAAE,iCAAiCf,KAAK;IACnD,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["_utils","require","_utils2","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","easing","scale","namedEffect","custom","bgCloseUpOpacity","bgCloseUpZoom","name","part","startOffset","offset","type","value","startOffsetAdd","toKeyframeValue","endOffset","endOffsetAdd","keyframes","opacity","transform"],"sources":["../../../../src/library/backgroundScroll/BgCloseUp.ts"],"sourcesContent":["import type {\n  BgCloseUp,\n  DomApi,\n  RangeOffset,\n  AnimationExtraOptions,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { measureCompHeight } from './utils';\nimport { toKeyframeValue } from '../../utils';\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-bgCloseUpOpacity', 'motion-bgCloseUpZoom'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = {\n    '--motion-comp-height': '0px',\n    '--motion-comp-half-height': '0px',\n  };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n  return measures;\n}\n\nexport function web(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  options.measures = prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const easing = 'linear';\n  const { scale = 80 } = options.namedEffect as BgCloseUp;\n\n  const custom = { '--motion-trans-z': `${scale}px` };\n\n  const [bgCloseUpOpacity, bgCloseUpZoom] = getNames(options);\n\n  return [\n    {\n      ...options,\n      name: bgCloseUpOpacity,\n      easing,\n      part: 'BG_LAYER',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get startOffsetAdd() {\n        return `calc(50vh + ${toKeyframeValue(\n          options.measures || {},\n          '--motion-comp-half-height',\n          asWeb,\n        )})`;\n      },\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${toKeyframeValue(\n          options.measures || {},\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          opacity: 1,\n        },\n        {\n          opacity: 0,\n        },\n      ],\n    },\n    {\n      ...options,\n      name: bgCloseUpZoom,\n      easing,\n      part: 'BG_MEDIA',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${toKeyframeValue(\n          options.measures || {},\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          transform: 'perspective(100px) translateZ(0px)',\n        },\n        {\n          transform: `perspective(100px) translateZ(${toKeyframeValue(\n            custom,\n            '--motion-trans-z',\n            asWeb,\n          )})`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/backgroundScroll/BgFade.js

@@ -1,26 +1,41 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
-var _utils = require("./utils");
-const EASE_IN = 'sineIn';
-const EASE_OUT = 'sineOut';
-function create(options, dom) {
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+var _utils2 = require("./utils");
+function getNames(_) {
+  return ['motion-bgFade'];
+}
+function prepare(_, dom) {
   const measures = {
-    compHeight: 0
+    '--motion-comp-height': '0px',
+    '--motion-comp-half-height': '0px'
   };
   if (dom) {
-    (0, _utils.measureCompHeight)(measures, dom);
+    (0, _utils2.measureCompHeight)(measures, dom, true);
   }
+  return measures;
+}
+function web(options, dom) {
+  options.measures = prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const {
     range = 'in'
   } = options.namedEffect;
   const isOut = range === 'out';
   const fromValue = isOut ? 1 : 0;
   const toValue = isOut ? 0 : 1;
-  const easing = isOut ? EASE_OUT : EASE_IN;
+  const easing = isOut ? 'sineOut' : 'sineIn';
+  const [bgFade] = getNames(options);
   return [{
     ...options,
+    name: bgFade,
     part: 'BG_LAYER',
     easing,
     startOffset: {
@@ -39,7 +54,7 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return isOut ? `calc(100vh + ${measures.compHeight}px)` : `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+      return isOut ? `calc(100vh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-height', asWeb)})` : `calc(50vh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-half-height', asWeb)})`;
     },
     keyframes: [{
       opacity: fromValue

package/dist/cjs/library/backgroundScroll/BgFade.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","EASE_IN","EASE_OUT","create","options","dom","measures","compHeight","measureCompHeight","range","namedEffect","isOut","fromValue","toValue","easing","part","startOffset","name","offset","type","value","startOffsetAdd","endOffset","endOffsetAdd","Math","round","keyframes","opacity"],"sources":["../../../../src/library/backgroundScroll/BgFade.ts"],"sourcesContent":["import type {\n  BgFade,\n  DomApi,\n  RangeOffset,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { measureCompHeight } from './utils';\n\nconst EASE_IN = 'sineIn';\nconst EASE_OUT = 'sineOut';\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom);\n  }\n\n  const { range = 'in' } = options.namedEffect as BgFade;\n  const isOut = range === 'out';\n  const fromValue = isOut ? 1 : 0;\n  const toValue = isOut ? 0 : 1;\n  const easing = isOut ? EASE_OUT : EASE_IN;\n\n  return [\n    {\n      ...options,\n      part: 'BG_LAYER',\n      easing,\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      startOffsetAdd: isOut ? '100vh' : '0px',\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return isOut\n          ? `calc(100vh + ${measures.compHeight}px)`\n          : `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;\n      },\n      keyframes: [\n        {\n          opacity: fromValue,\n        },\n        {\n          opacity: toValue,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;AAMA,IAAAA,MAAA,GAAAC,OAAA;AAEA,MAAMC,OAAO,GAAG,QAAQ;AACxB,MAAMC,QAAQ,GAAG,SAAS;AAEX,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACP,IAAAG,wBAAiB,EAACF,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAM;IAAEI,KAAK,GAAG;EAAK,CAAC,GAAGL,OAAO,CAACM,WAAqB;EACtD,MAAMC,KAAK,GAAGF,KAAK,KAAK,KAAK;EAC7B,MAAMG,SAAS,GAAGD,KAAK,GAAG,CAAC,GAAG,CAAC;EAC/B,MAAME,OAAO,GAAGF,KAAK,GAAG,CAAC,GAAG,CAAC;EAC7B,MAAMG,MAAM,GAAGH,KAAK,GAAGT,QAAQ,GAAGD,OAAO;EAEzC,OAAO,CACL;IACE,GAAGG,OAAO;IACVW,IAAI,EAAE,UAAU;IAChBD,MAAM;IACNE,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAEV,KAAK,GAAG,OAAO,GAAG,KAAK;IACvCW,SAAS,EAAE;MACTL,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAOZ,KAAK,GACR,gBAAgBL,QAAQ,CAACC,UAAU,KAAK,GACxC,eAAeiB,IAAI,CAACC,KAAK,CAAC,GAAG,GAAGnB,QAAQ,CAACC,UAAU,CAAC,KAAK;IAC/D,CAAC;IACDmB,SAAS,EAAE,CACT;MACEC,OAAO,EAAEf;IACX,CAAC,EACD;MACEe,OAAO,EAAEd;IACX,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["_utils","require","_utils2","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","range","namedEffect","isOut","fromValue","toValue","easing","bgFade","name","part","startOffset","offset","type","value","startOffsetAdd","endOffset","endOffsetAdd","toKeyframeValue","keyframes","opacity"],"sources":["../../../../src/library/backgroundScroll/BgFade.ts"],"sourcesContent":["import type {\n  BgFade,\n  DomApi,\n  RangeOffset,\n  AnimationExtraOptions,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\nimport { measureCompHeight } from './utils';\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-bgFade'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = {\n    '--motion-comp-height': '0px',\n    '--motion-comp-half-height': '0px',\n  };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n  return measures;\n}\n\nexport function web(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  options.measures = prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { range = 'in' } = options.namedEffect as BgFade;\n  const isOut = range === 'out';\n  const fromValue = isOut ? 1 : 0;\n  const toValue = isOut ? 0 : 1;\n  const easing = isOut ? 'sineOut' : 'sineIn';\n\n  const [bgFade] = getNames(options);\n\n  return [\n    {\n      ...options,\n      name: bgFade,\n      part: 'BG_LAYER',\n      easing,\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      startOffsetAdd: isOut ? '100vh' : '0px',\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return isOut\n          ? `calc(100vh + ${toKeyframeValue(\n              options.measures || {},\n              '--motion-comp-height',\n              asWeb,\n            )})`\n          : `calc(50vh + ${toKeyframeValue(\n              options.measures || {},\n              '--motion-comp-half-height',\n              asWeb,\n            )})`;\n      },\n      keyframes: [\n        {\n          opacity: fromValue,\n        },\n        {\n          opacity: toValue,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;;AAOA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,SAASE,QAAQA,CAACC,CAAwB,EAAE;EACjD,OAAO,CAAC,eAAe,CAAC;AAC1B;AAEO,SAASC,OAAOA,CAACD,CAAwB,EAAEE,GAAY,EAAE;EAC9D,MAAMC,QAAQ,GAAG;IACf,sBAAsB,EAAE,KAAK;IAC7B,2BAA2B,EAAE;EAC/B,CAAC;EACD,IAAID,GAAG,EAAE;IACP,IAAAE,yBAAiB,EAACD,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EACA,OAAOC,QAAQ;AACjB;AAEO,SAASE,GAAGA,CACjBC,OAAsD,EACtDJ,GAAY,EACZ;EACAI,OAAO,CAACH,QAAQ,GAAGF,OAAO,CAACK,OAAO,EAAEJ,GAAG,CAAC;EAExC,OAAOK,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CACnBD,OAAsD,EACtDE,KAAK,GAAG,KAAK,EACb;EACA,MAAM;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGH,OAAO,CAACI,WAAqB;EACtD,MAAMC,KAAK,GAAGF,KAAK,KAAK,KAAK;EAC7B,MAAMG,SAAS,GAAGD,KAAK,GAAG,CAAC,GAAG,CAAC;EAC/B,MAAME,OAAO,GAAGF,KAAK,GAAG,CAAC,GAAG,CAAC;EAC7B,MAAMG,MAAM,GAAGH,KAAK,GAAG,SAAS,GAAG,QAAQ;EAE3C,MAAM,CAACI,MAAM,CAAC,GAAGhB,QAAQ,CAACO,OAAO,CAAC;EAElC,OAAO,CACL;IACE,GAAGA,OAAO;IACVU,IAAI,EAAED,MAAM;IACZE,IAAI,EAAE,UAAU;IAChBH,MAAM;IACNI,WAAW,EAAE;MACXF,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAEX,KAAK,GAAG,OAAO,GAAG,KAAK;IACvCY,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAOb,KAAK,GACR,gBAAgB,IAAAc,sBAAe,EAC7BnB,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,sBAAsB,EACtBK,KACF,CAAC,GAAG,GACJ,eAAe,IAAAiB,sBAAe,EAC5BnB,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,2BAA2B,EAC3BK,KACF,CAAC,GAAG;IACV,CAAC;IACDkB,SAAS,EAAE,CACT;MACEC,OAAO,EAAEf;IACX,CAAC,EACD;MACEe,OAAO,EAAEd;IACX,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/cjs/library/backgroundScroll/BgFadeBack.js

@@ -1,21 +1,41 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
-var _utils = require("./utils");
-function create(options, dom) {
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+var _utils2 = require("./utils");
+function getNames(_) {
+  return ['motion-bgFadeBackOpacity', 'motion-bgFadeBackScale'];
+}
+function prepare(_, dom) {
   const measures = {
-    compHeight: 0
+    '--motion-comp-height': '0px',
+    '--motion-comp-half-height': '0px'
   };
   if (dom) {
-    (0, _utils.measureCompHeight)(measures, dom);
+    (0, _utils2.measureCompHeight)(measures, dom, true);
   }
+  return measures;
+}
+function web(options, dom) {
+  options.measures = prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const easing = 'sineOut';
   const {
     scale = 0.7
   } = options.namedEffect;
+  const custom = {
+    '--motion-scale': scale
+  };
+  const [bgFadeBackOpacity, bgFadeBackScale] = getNames(options);
   return [{
     ...options,
+    name: bgFadeBackOpacity,
     easing: 'linear',
     part: 'BG_LAYER',
     startOffset: {
@@ -34,7 +54,7 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100vh + ${measures.compHeight}px)`;
+      return `calc(100vh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-height', asWeb)})`;
     },
     keyframes: [{
       opacity: 1
@@ -43,6 +63,7 @@ function create(options, dom) {
     }]
   }, {
     ...options,
+    name: bgFadeBackScale,
     easing,
     part: 'BG_LAYER',
     startOffset: {
@@ -61,12 +82,12 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+      return `calc(100vh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-half-height', asWeb)})`;
     },
     keyframes: [{
       scale: 1
     }, {
-      scale
+      scale: (0, _utils.toKeyframeValue)(custom, '--motion-scale', asWeb)
     }]
   }];
 }

package/dist/cjs/library/backgroundScroll/BgFadeBack.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","create","options","dom","measures","compHeight","measureCompHeight","easing","scale","namedEffect","part","startOffset","name","offset","type","value","startOffsetAdd","endOffset","endOffsetAdd","keyframes","opacity","Math","round"],"sources":["../../../../src/library/backgroundScroll/BgFadeBack.ts"],"sourcesContent":["import type {\n  BgFadeBack,\n  DomApi,\n  RangeOffset,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { measureCompHeight } from './utils';\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom);\n  }\n\n  const easing = 'sineOut';\n  const { scale = 0.7 } = options.namedEffect as BgFadeBack;\n\n  return [\n    {\n      ...options,\n      easing: 'linear',\n      part: 'BG_LAYER',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      startOffsetAdd: '100vh',\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          opacity: 1,\n        },\n        {\n          opacity: 0,\n        },\n      ],\n    },\n    {\n      ...options,\n      easing,\n      part: 'BG_LAYER',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      startOffsetAdd: '100vh',\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${Math.round(0.5 * measures.compHeight)}px)`;\n      },\n      keyframes: [\n        {\n          scale: 1,\n        },\n        {\n          scale,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;AAMA,IAAAA,MAAA,GAAAC,OAAA;AAEe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACP,IAAAG,wBAAiB,EAACF,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAMI,MAAM,GAAG,SAAS;EACxB,MAAM;IAAEC,KAAK,GAAG;EAAI,CAAC,GAAGN,OAAO,CAACO,WAAyB;EAEzD,OAAO,CACL;IACE,GAAGP,OAAO;IACVK,MAAM,EAAE,QAAQ;IAChBG,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAE,OAAO;IACvBC,SAAS,EAAE;MACTL,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgBd,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDc,SAAS,EAAE,CACT;MACEC,OAAO,EAAE;IACX,CAAC,EACD;MACEA,OAAO,EAAE;IACX,CAAC;EAEL,CAAC,EACD;IACE,GAAGlB,OAAO;IACVK,MAAM;IACNG,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAE,OAAO;IACvBC,SAAS,EAAE;MACTL,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgBG,IAAI,CAACC,KAAK,CAAC,GAAG,GAAGlB,QAAQ,CAACC,UAAU,CAAC,KAAK;IACnE,CAAC;IACDc,SAAS,EAAE,CACT;MACEX,KAAK,EAAE;IACT,CAAC,EACD;MACEA;IACF,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["_utils","require","_utils2","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","easing","scale","namedEffect","custom","bgFadeBackOpacity","bgFadeBackScale","name","part","startOffset","offset","type","value","startOffsetAdd","endOffset","endOffsetAdd","toKeyframeValue","keyframes","opacity"],"sources":["../../../../src/library/backgroundScroll/BgFadeBack.ts"],"sourcesContent":["import type {\n  BgFadeBack,\n  DomApi,\n  RangeOffset,\n  AnimationExtraOptions,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\nimport { measureCompHeight } from './utils';\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-bgFadeBackOpacity', 'motion-bgFadeBackScale'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = {\n    '--motion-comp-height': '0px',\n    '--motion-comp-half-height': '0px',\n  };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n  return measures;\n}\n\nexport function web(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  options.measures = prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const easing = 'sineOut';\n  const { scale = 0.7 } = options.namedEffect as BgFadeBack;\n\n  const custom = { '--motion-scale': scale };\n\n  const [bgFadeBackOpacity, bgFadeBackScale] = getNames(options);\n\n  return [\n    {\n      ...options,\n      name: bgFadeBackOpacity,\n      easing: 'linear',\n      part: 'BG_LAYER',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      startOffsetAdd: '100vh',\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${toKeyframeValue(\n          options.measures || {},\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          opacity: 1,\n        },\n        {\n          opacity: 0,\n        },\n      ],\n    },\n    {\n      ...options,\n      name: bgFadeBackScale,\n      easing,\n      part: 'BG_LAYER',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      startOffsetAdd: '100vh',\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${toKeyframeValue(\n          options.measures || {},\n          '--motion-comp-half-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          scale: 1,\n        },\n        {\n          scale: toKeyframeValue(custom, '--motion-scale', asWeb),\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;;AAOA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,SAASE,QAAQA,CAACC,CAAwB,EAAE;EACjD,OAAO,CAAC,0BAA0B,EAAE,wBAAwB,CAAC;AAC/D;AAEO,SAASC,OAAOA,CAACD,CAAwB,EAAEE,GAAY,EAAE;EAC9D,MAAMC,QAAQ,GAAG;IACf,sBAAsB,EAAE,KAAK;IAC7B,2BAA2B,EAAE;EAC/B,CAAC;EACD,IAAID,GAAG,EAAE;IACP,IAAAE,yBAAiB,EAACD,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EACA,OAAOC,QAAQ;AACjB;AAEO,SAASE,GAAGA,CACjBC,OAAsD,EACtDJ,GAAY,EACZ;EACAI,OAAO,CAACH,QAAQ,GAAGF,OAAO,CAACK,OAAO,EAAEJ,GAAG,CAAC;EAExC,OAAOK,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CACnBD,OAAsD,EACtDE,KAAK,GAAG,KAAK,EACb;EACA,MAAMC,MAAM,GAAG,SAAS;EACxB,MAAM;IAAEC,KAAK,GAAG;EAAI,CAAC,GAAGJ,OAAO,CAACK,WAAyB;EAEzD,MAAMC,MAAM,GAAG;IAAE,gBAAgB,EAAEF;EAAM,CAAC;EAE1C,MAAM,CAACG,iBAAiB,EAAEC,eAAe,CAAC,GAAGf,QAAQ,CAACO,OAAO,CAAC;EAE9D,OAAO,CACL;IACE,GAAGA,OAAO;IACVS,IAAI,EAAEF,iBAAiB;IACvBJ,MAAM,EAAE,QAAQ;IAChBO,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXF,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAE,OAAO;IACvBC,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgB,IAAAC,sBAAe,EACpClB,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,sBAAsB,EACtBK,KACF,CAAC,GAAG;IACN,CAAC;IACDiB,SAAS,EAAE,CACT;MACEC,OAAO,EAAE;IACX,CAAC,EACD;MACEA,OAAO,EAAE;IACX,CAAC;EAEL,CAAC,EACD;IACE,GAAGpB,OAAO;IACVS,IAAI,EAAED,eAAe;IACrBL,MAAM;IACNO,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXF,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,cAAc,EAAE,OAAO;IACvBC,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIG,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgB,IAAAC,sBAAe,EACpClB,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,2BAA2B,EAC3BK,KACF,CAAC,GAAG;IACN,CAAC;IACDiB,SAAS,EAAE,CACT;MACEf,KAAK,EAAE;IACT,CAAC,EACD;MACEA,KAAK,EAAE,IAAAc,sBAAe,EAACZ,MAAM,EAAE,gBAAgB,EAAEJ,KAAK;IACxD,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/cjs/library/backgroundScroll/BgFake3D.js

@@ -1,23 +1,49 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
-var _utils = require("./utils");
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+var _utils2 = require("./utils");
 const PERSPECTIVE = 100;
-function create(options, dom) {
+function getNames(_) {
+  return ['motion-bgFake3DParallax', 'motion-bgFake3DStretch', 'motion-bgFake3DZoom'];
+}
+function prepare(_, dom) {
   const measures = {
-    compHeight: 0
+    '--motion-comp-height': '0px'
   };
   if (dom) {
-    (0, _utils.measureCompHeight)(measures, dom, true);
+    (0, _utils2.measureCompHeight)(measures, dom, true);
   }
+  return measures;
+}
+function web(options, dom) {
+  options.measures = prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const {
     stretch = 1.3,
     zoom = 100 / 6
   } = options.namedEffect;
-  const scale = (0, _utils.getScaleFromPerspectiveAndZ)(zoom, PERSPECTIVE);
+  const scale = (0, _utils2.getScaleFromPerspectiveAndZ)(zoom, PERSPECTIVE);
+  const custom = {
+    '--motion-scale-y': stretch,
+    '--motion-trans-z': `${(0, _utils.roundNumber)(zoom)}px`,
+    '--motion-trans-y-factor': (0, _utils.roundNumber)(-0.1 * (2 - scale))
+  };
+  const [bgFake3DParallax, bgFake3DStretch, bgFake3DZoom] = getNames(options);
+  const {
+    measures = {
+      '--motion-comp-height': '0px'
+    }
+  } = options;
   return [{
     ...options,
+    name: bgFake3DParallax,
     part: 'BG_IMG',
     easing: 'sineOut',
     startOffset: {
@@ -35,17 +61,18 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100svh + ${measures.compHeight}px)`;
+      return `calc(100svh + ${(0, _utils.toKeyframeValue)(measures, '--motion-comp-height', asWeb)})`;
     },
     get keyframes() {
       return [{
         transform: 'translateY(10svh)'
       }, {
-        transform: `translateY(calc(${parseFloat((-0.1 * (2 - scale)).toFixed(2))} * var(--motion-comp-height, ${measures.compHeight}px)))`
+        transform: `translateY(calc(${(0, _utils.toKeyframeValue)(custom, '--motion-trans-y-factor', asWeb)} * ${(0, _utils.toKeyframeValue)(measures, '--motion-comp-height', false, measures['--motion-comp-height'])}))`
       }];
     }
   }, {
     ...options,
+    name: bgFake3DStretch,
     part: 'BG_IMG',
     easing: 'linear',
     composite: 'add',
@@ -64,15 +91,16 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100svh + ${measures.compHeight}px)`;
+      return `calc(100svh + ${(0, _utils.toKeyframeValue)(measures, '--motion-comp-height', asWeb)})`;
     },
     keyframes: [{
-      transform: `scaleY(${stretch})`
+      transform: `scaleY(${(0, _utils.toKeyframeValue)(custom, '--motion-scale-y', asWeb)})`
     }, {
       transform: `scaleY(1)`
     }]
   }, {
     ...options,
+    name: bgFake3DZoom,
     part: 'BG_IMG',
     easing: 'sineIn',
     composite: 'add',
@@ -91,12 +119,12 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100svh + ${measures.compHeight}px)`;
+      return `calc(100svh + ${(0, _utils.toKeyframeValue)(measures, '--motion-comp-height', asWeb)})`;
     },
     keyframes: [{
       transform: `perspective(${PERSPECTIVE}px) translateZ(0px)`
     }, {
-      transform: `perspective(${PERSPECTIVE}px) translateZ(${parseFloat(zoom.toFixed(2))}px)`
+      transform: `perspective(${PERSPECTIVE}px) translateZ(${(0, _utils.toKeyframeValue)(custom, '--motion-trans-z', asWeb)})`
     }]
   }];
 }

package/dist/cjs/library/backgroundScroll/BgFake3D.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","PERSPECTIVE","create","options","dom","measures","compHeight","measureCompHeight","stretch","zoom","namedEffect","scale","getScaleFromPerspectiveAndZ","part","easing","startOffset","name","offset","type","value","endOffset","endOffsetAdd","keyframes","transform","parseFloat","toFixed","composite"],"sources":["../../../../src/library/backgroundScroll/BgFake3D.ts"],"sourcesContent":["import type {\n  BgFake3D,\n  RangeOffset,\n  ScrubAnimationOptions,\n  DomApi,\n} from '../../types';\nimport { measureCompHeight, getScaleFromPerspectiveAndZ } from './utils';\n\nconst PERSPECTIVE = 100;\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n\n  const { stretch = 1.3, zoom = 100 / 6 } = options.namedEffect as BgFake3D;\n  const scale = getScaleFromPerspectiveAndZ(zoom, PERSPECTIVE);\n\n  return [\n    {\n      ...options,\n      part: 'BG_IMG',\n      easing: 'sineOut',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${measures.compHeight}px)`;\n      },\n      get keyframes() {\n        return [\n          {\n            transform: 'translateY(10svh)',\n          },\n          {\n            transform: `translateY(calc(${parseFloat(\n              (-0.1 * (2 - scale)).toFixed(2),\n            )} * var(--motion-comp-height, ${measures.compHeight}px)))`,\n          },\n        ];\n      },\n    },\n    {\n      ...options,\n      part: 'BG_IMG',\n      easing: 'linear',\n      composite: 'add' as const,\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          transform: `scaleY(${stretch})`,\n        },\n        {\n          transform: `scaleY(1)`,\n        },\n      ],\n    },\n    {\n      ...options,\n      part: 'BG_IMG',\n      easing: 'sineIn',\n      composite: 'add' as const,\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          transform: `perspective(${PERSPECTIVE}px) translateZ(0px)`,\n        },\n        {\n          transform: `perspective(${PERSPECTIVE}px) translateZ(${parseFloat(\n            zoom.toFixed(2),\n          )}px)`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_utils","require","_utils2","PERSPECTIVE","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","stretch","zoom","namedEffect","scale","getScaleFromPerspectiveAndZ","custom","roundNumber","bgFake3DParallax","bgFake3DStretch","bgFake3DZoom","name","part","easing","startOffset","offset","type","value","endOffset","endOffsetAdd","toKeyframeValue","keyframes","transform","composite"],"sources":["../../../../src/library/backgroundScroll/BgFake3D.ts"],"sourcesContent":["import type {\n  BgFake3D,\n  RangeOffset,\n  AnimationExtraOptions,\n  ScrubAnimationOptions,\n  DomApi,\n} from '../../types';\nimport { roundNumber, toKeyframeValue } from '../../utils';\nimport { measureCompHeight, getScaleFromPerspectiveAndZ } from './utils';\n\nconst PERSPECTIVE = 100;\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return [\n    'motion-bgFake3DParallax',\n    'motion-bgFake3DStretch',\n    'motion-bgFake3DZoom',\n  ];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { '--motion-comp-height': '0px' };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n  return measures;\n}\n\nexport function web(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  options.measures = prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { stretch = 1.3, zoom = 100 / 6 } = options.namedEffect as BgFake3D;\n  const scale = getScaleFromPerspectiveAndZ(zoom, PERSPECTIVE);\n\n  const custom = {\n    '--motion-scale-y': stretch,\n    '--motion-trans-z': `${roundNumber(zoom)}px`,\n    '--motion-trans-y-factor': roundNumber(-0.1 * (2 - scale)),\n  };\n\n  const [bgFake3DParallax, bgFake3DStretch, bgFake3DZoom] = getNames(options);\n  const { measures = { '--motion-comp-height': '0px' } } = options;\n\n  return [\n    {\n      ...options,\n      name: bgFake3DParallax,\n      part: 'BG_IMG',\n      easing: 'sineOut',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${toKeyframeValue(\n          measures,\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      get keyframes() {\n        return [\n          {\n            transform: 'translateY(10svh)',\n          },\n          {\n            transform: `translateY(calc(${toKeyframeValue(\n              custom,\n              '--motion-trans-y-factor',\n              asWeb,\n            )} * ${toKeyframeValue(\n              measures,\n              '--motion-comp-height',\n              false,\n              measures!['--motion-comp-height'] as string,\n            )}))`,\n          },\n        ];\n      },\n    },\n    {\n      ...options,\n      name: bgFake3DStretch,\n      part: 'BG_IMG',\n      easing: 'linear',\n      composite: 'add' as const,\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${toKeyframeValue(\n          measures,\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          transform: `scaleY(${toKeyframeValue(\n            custom,\n            '--motion-scale-y',\n            asWeb,\n          )})`,\n        },\n        {\n          transform: `scaleY(1)`,\n        },\n      ],\n    },\n    {\n      ...options,\n      name: bgFake3DZoom,\n      part: 'BG_IMG',\n      easing: 'sineIn',\n      composite: 'add' as const,\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${toKeyframeValue(\n          measures,\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          transform: `perspective(${PERSPECTIVE}px) translateZ(0px)`,\n        },\n        {\n          transform: `perspective(${PERSPECTIVE}px) translateZ(${toKeyframeValue(\n            custom,\n            '--motion-trans-z',\n            asWeb,\n          )})`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/backgroundScroll/BgPan.js

@@ -1,27 +1,41 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
-var _utils = require("./utils");
-function create(options, dom) {
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+var _utils2 = require("./utils");
+function getNames(_) {
+  return ['motion-bgPan'];
+}
+function prepare(_, dom) {
   const measures = {
-    compHeight: 0
+    '--motion-comp-height': '0px'
   };
   if (dom) {
-    (0, _utils.measureCompHeight)(measures, dom);
+    (0, _utils2.measureCompHeight)(measures, dom, true);
   }
+  return measures;
+}
+function web(options, dom) {
+  options.measures = prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const {
     direction = 'left',
     speed = 0.2
   } = options.namedEffect;
   const offsetPercentage = 50 * speed / (1 + speed) | 0;
-  let fromValue = `${offsetPercentage}%`;
-  let toValue = `-${offsetPercentage}%`;
-  if (direction === 'right') {
-    [fromValue, toValue] = [toValue, fromValue];
-  }
+  const custom = {
+    '--motion-trans-x': direction === 'left' ? `${offsetPercentage}%` : `${-offsetPercentage}%`
+  };
+  const [bgPan] = getNames(options);
   return [{
     ...options,
+    name: bgPan,
     part: 'BG_MEDIA',
     startOffset: {
       name: 'cover',
@@ -38,12 +52,12 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100vh + ${measures.compHeight}px)`;
+      return `calc(100vh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-height', asWeb)})`;
     },
     keyframes: [{
-      transform: `translateX(${fromValue})`
+      transform: `translateX(${(0, _utils.toKeyframeValue)(custom, '--motion-trans-x', asWeb)})`
     }, {
-      transform: `translateX(${toValue})`
+      transform: `translateX(calc(-1 * ${(0, _utils.toKeyframeValue)(custom, '--motion-trans-x', asWeb)}))`
     }]
   }];
 }

package/dist/cjs/library/backgroundScroll/BgPan.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","create","options","dom","measures","compHeight","measureCompHeight","direction","speed","namedEffect","offsetPercentage","fromValue","toValue","part","startOffset","name","offset","type","value","endOffset","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/backgroundScroll/BgPan.ts"],"sourcesContent":["import type {\n  BgPan,\n  DomApi,\n  RangeOffset,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { measureCompHeight } from './utils';\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom);\n  }\n\n  const { direction = 'left', speed = 0.2 } = options.namedEffect as BgPan;\n  const offsetPercentage = ((50 * speed) / (1 + speed)) | 0;\n  let fromValue = `${offsetPercentage}%`;\n  let toValue = `-${offsetPercentage}%`;\n  if (direction === 'right') {\n    [fromValue, toValue] = [toValue, fromValue];\n  }\n\n  return [\n    {\n      ...options,\n      part: 'BG_MEDIA',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          transform: `translateX(${fromValue})`,\n        },\n        {\n          transform: `translateX(${toValue})`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;AAMA,IAAAA,MAAA,GAAAC,OAAA;AAEe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACP,IAAAG,wBAAiB,EAACF,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAM;IAAEI,SAAS,GAAG,MAAM;IAAEC,KAAK,GAAG;EAAI,CAAC,GAAGN,OAAO,CAACO,WAAoB;EACxE,MAAMC,gBAAgB,GAAK,EAAE,GAAGF,KAAK,IAAK,CAAC,GAAGA,KAAK,CAAC,GAAI,CAAC;EACzD,IAAIG,SAAS,GAAG,GAAGD,gBAAgB,GAAG;EACtC,IAAIE,OAAO,GAAG,IAAIF,gBAAgB,GAAG;EACrC,IAAIH,SAAS,KAAK,OAAO,EAAE;IACzB,CAACI,SAAS,EAAEC,OAAO,CAAC,GAAG,CAACA,OAAO,EAAED,SAAS,CAAC;EAC7C;EAEA,OAAO,CACL;IACE,GAAGT,OAAO;IACVW,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,SAAS,EAAE;MACTJ,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIE,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgBhB,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDgB,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,cAAcX,SAAS;IACpC,CAAC,EACD;MACEW,SAAS,EAAE,cAAcV,OAAO;IAClC,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["_utils","require","_utils2","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","direction","speed","namedEffect","offsetPercentage","custom","bgPan","name","part","startOffset","offset","type","value","endOffset","endOffsetAdd","toKeyframeValue","keyframes","transform"],"sources":["../../../../src/library/backgroundScroll/BgPan.ts"],"sourcesContent":["import type {\n  BgPan,\n  DomApi,\n  RangeOffset,\n  AnimationExtraOptions,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\nimport { measureCompHeight } from './utils';\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-bgPan'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { '--motion-comp-height': '0px' };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n  return measures;\n}\n\nexport function web(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  options.measures = prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { direction = 'left', speed = 0.2 } = options.namedEffect as BgPan;\n  const offsetPercentage = ((50 * speed) / (1 + speed)) | 0;\n\n  const custom = {\n    '--motion-trans-x':\n      direction === 'left' ? `${offsetPercentage}%` : `${-offsetPercentage}%`,\n  };\n\n  const [bgPan] = getNames(options);\n\n  return [\n    {\n      ...options,\n      name: bgPan,\n      part: 'BG_MEDIA',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${toKeyframeValue(\n          options.measures || {},\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          transform: `translateX(${toKeyframeValue(\n            custom,\n            '--motion-trans-x',\n            asWeb,\n          )})`,\n        },\n        {\n          transform: `translateX(calc(-1 * ${toKeyframeValue(\n            custom,\n            '--motion-trans-x',\n            asWeb,\n          )}))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;;AAOA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,SAASE,QAAQA,CAACC,CAAwB,EAAE;EACjD,OAAO,CAAC,cAAc,CAAC;AACzB;AAEO,SAASC,OAAOA,CAACD,CAAwB,EAAEE,GAAY,EAAE;EAC9D,MAAMC,QAAQ,GAAG;IAAE,sBAAsB,EAAE;EAAM,CAAC;EAClD,IAAID,GAAG,EAAE;IACP,IAAAE,yBAAiB,EAACD,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EACA,OAAOC,QAAQ;AACjB;AAEO,SAASE,GAAGA,CACjBC,OAAsD,EACtDJ,GAAY,EACZ;EACAI,OAAO,CAACH,QAAQ,GAAGF,OAAO,CAACK,OAAO,EAAEJ,GAAG,CAAC;EAExC,OAAOK,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CACnBD,OAAsD,EACtDE,KAAK,GAAG,KAAK,EACb;EACA,MAAM;IAAEC,SAAS,GAAG,MAAM;IAAEC,KAAK,GAAG;EAAI,CAAC,GAAGJ,OAAO,CAACK,WAAoB;EACxE,MAAMC,gBAAgB,GAAK,EAAE,GAAGF,KAAK,IAAK,CAAC,GAAGA,KAAK,CAAC,GAAI,CAAC;EAEzD,MAAMG,MAAM,GAAG;IACb,kBAAkB,EAChBJ,SAAS,KAAK,MAAM,GAAG,GAAGG,gBAAgB,GAAG,GAAG,GAAG,CAACA,gBAAgB;EACxE,CAAC;EAED,MAAM,CAACE,KAAK,CAAC,GAAGf,QAAQ,CAACO,OAAO,CAAC;EAEjC,OAAO,CACL;IACE,GAAGA,OAAO;IACVS,IAAI,EAAED,KAAK;IACXE,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXF,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,SAAS,EAAE;MACTN,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIE,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgB,IAAAC,sBAAe,EACpCjB,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,sBAAsB,EACtBK,KACF,CAAC,GAAG;IACN,CAAC;IACDgB,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,cAAc,IAAAF,sBAAe,EACtCV,MAAM,EACN,kBAAkB,EAClBL,KACF,CAAC;IACH,CAAC,EACD;MACEiB,SAAS,EAAE,wBAAwB,IAAAF,sBAAe,EAChDV,MAAM,EACN,kBAAkB,EAClBL,KACF,CAAC;IACH,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/cjs/library/backgroundScroll/BgParallax.js

@@ -1,20 +1,39 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = create;
-var _utils = require("./utils");
-function create(options, dom) {
+exports.getNames = getNames;
+exports.prepare = prepare;
+exports.style = style;
+exports.web = web;
+var _utils = require("../../utils");
+var _utils2 = require("./utils");
+function getNames(_) {
+  return ['motion-bgParallax'];
+}
+function prepare(_, dom) {
   const measures = {
-    compHeight: 0
+    '--motion-comp-height': '0px'
   };
   if (dom) {
-    (0, _utils.measureCompHeight)(measures, dom, true);
+    (0, _utils2.measureCompHeight)(measures, dom, true);
   }
+  return measures;
+}
+function web(options, dom) {
+  options.measures = prepare(options, dom);
+  return style(options, true);
+}
+function style(options, asWeb = false) {
   const {
     speed = 0.2
   } = options.namedEffect;
+  const custom = {
+    '--motion-parallax-speed': speed
+  };
+  const [bgParallax] = getNames(options);
   return [{
     ...options,
+    name: bgParallax,
     part: 'BG_MEDIA',
     startOffset: {
       name: 'cover',
@@ -31,12 +50,12 @@ function create(options, dom) {
       }
     },
     get endOffsetAdd() {
-      return `calc(100svh + ${measures.compHeight}px)`;
+      return `calc(100svh + ${(0, _utils.toKeyframeValue)(options.measures || {}, '--motion-comp-height', asWeb)})`;
     },
     keyframes: [{
-      transform: `translateY(${100 * speed}svh)`
+      transform: `translateY(calc(${(0, _utils.toKeyframeValue)(custom, '--motion-parallax-speed', asWeb)} * 100svh))`
     }, {
-      transform: `translateY(calc((100% - 200lvh) * ${-speed}))`
+      transform: `translateY(calc((200lvh - 100%) * ${(0, _utils.toKeyframeValue)(custom, '--motion-parallax-speed', asWeb)}))`
     }]
   }];
 }

package/dist/cjs/library/backgroundScroll/BgParallax.js.map

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","create","options","dom","measures","compHeight","measureCompHeight","speed","namedEffect","part","startOffset","name","offset","type","value","endOffset","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/backgroundScroll/BgParallax.ts"],"sourcesContent":["import type {\n  BgParallax,\n  RangeOffset,\n  ScrubAnimationOptions,\n  DomApi,\n} from '../../types';\nimport { measureCompHeight } from './utils';\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n\n  const { speed = 0.2 } = options.namedEffect as BgParallax;\n\n  return [\n    {\n      ...options,\n      part: 'BG_MEDIA',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          transform: `translateY(${100 * speed}svh)`,\n        },\n        {\n          transform: `translateY(calc((100% - 200lvh) * ${-speed}))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;AAMA,IAAAA,MAAA,GAAAC,OAAA;AAEe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACP,IAAAG,wBAAiB,EAACF,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EAEA,MAAM;IAAEI,KAAK,GAAG;EAAI,CAAC,GAAGL,OAAO,CAACM,WAAyB;EAEzD,OAAO,CACL;IACE,GAAGN,OAAO;IACVO,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,SAAS,EAAE;MACTJ,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIE,YAAYA,CAAA,EAAG;MACjB,OAAO,iBAAiBZ,QAAQ,CAACC,UAAU,KAAK;IAClD,CAAC;IACDY,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,cAAc,GAAG,GAAGX,KAAK;IACtC,CAAC,EACD;MACEW,SAAS,EAAE,qCAAqC,CAACX,KAAK;IACxD,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}
+{"version":3,"names":["_utils","require","_utils2","getNames","_","prepare","dom","measures","measureCompHeight","web","options","style","asWeb","speed","namedEffect","custom","bgParallax","name","part","startOffset","offset","type","value","endOffset","endOffsetAdd","toKeyframeValue","keyframes","transform"],"sources":["../../../../src/library/backgroundScroll/BgParallax.ts"],"sourcesContent":["import type {\n  BgParallax,\n  RangeOffset,\n  AnimationExtraOptions,\n  ScrubAnimationOptions,\n  DomApi,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\nimport { measureCompHeight } from './utils';\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-bgParallax'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { '--motion-comp-height': '0px' };\n  if (dom) {\n    measureCompHeight(measures, dom, true);\n  }\n  return measures;\n}\n\nexport function web(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  dom?: DomApi,\n) {\n  options.measures = prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(\n  options: ScrubAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { speed = 0.2 } = options.namedEffect as BgParallax;\n  const custom = {\n    '--motion-parallax-speed': speed,\n  };\n\n  const [bgParallax] = getNames(options);\n\n  return [\n    {\n      ...options,\n      name: bgParallax,\n      part: 'BG_MEDIA',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100svh + ${toKeyframeValue(\n          options.measures || {},\n          '--motion-comp-height',\n          asWeb,\n        )})`;\n      },\n      keyframes: [\n        {\n          transform: `translateY(calc(${toKeyframeValue(\n            custom,\n            '--motion-parallax-speed',\n            asWeb,\n          )} * 100svh))`,\n        },\n        {\n          transform: `translateY(calc((200lvh - 100%) * ${toKeyframeValue(\n            custom,\n            '--motion-parallax-speed',\n            asWeb,\n          )}))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":";;;;;;;AAOA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEO,SAASE,QAAQA,CAACC,CAAwB,EAAE;EACjD,OAAO,CAAC,mBAAmB,CAAC;AAC9B;AAEO,SAASC,OAAOA,CAACD,CAAwB,EAAEE,GAAY,EAAE;EAC9D,MAAMC,QAAQ,GAAG;IAAE,sBAAsB,EAAE;EAAM,CAAC;EAClD,IAAID,GAAG,EAAE;IACP,IAAAE,yBAAiB,EAACD,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EACA,OAAOC,QAAQ;AACjB;AAEO,SAASE,GAAGA,CACjBC,OAAsD,EACtDJ,GAAY,EACZ;EACAI,OAAO,CAACH,QAAQ,GAAGF,OAAO,CAACK,OAAO,EAAEJ,GAAG,CAAC;EAExC,OAAOK,KAAK,CAACD,OAAO,EAAE,IAAI,CAAC;AAC7B;AAEO,SAASC,KAAKA,CACnBD,OAAsD,EACtDE,KAAK,GAAG,KAAK,EACb;EACA,MAAM;IAAEC,KAAK,GAAG;EAAI,CAAC,GAAGH,OAAO,CAACI,WAAyB;EACzD,MAAMC,MAAM,GAAG;IACb,yBAAyB,EAAEF;EAC7B,CAAC;EAED,MAAM,CAACG,UAAU,CAAC,GAAGb,QAAQ,CAACO,OAAO,CAAC;EAEtC,OAAO,CACL;IACE,GAAGA,OAAO;IACVO,IAAI,EAAED,UAAU;IAChBE,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXF,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBC,SAAS,EAAE;MACTN,IAAI,EAAE,OAAO;MACbG,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIE,YAAYA,CAAA,EAAG;MACjB,OAAO,iBAAiB,IAAAC,sBAAe,EACrCf,OAAO,CAACH,QAAQ,IAAI,CAAC,CAAC,EACtB,sBAAsB,EACtBK,KACF,CAAC,GAAG;IACN,CAAC;IACDc,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,mBAAmB,IAAAF,sBAAe,EAC3CV,MAAM,EACN,yBAAyB,EACzBH,KACF,CAAC;IACH,CAAC,EACD;MACEe,SAAS,EAAE,qCAAqC,IAAAF,sBAAe,EAC7DV,MAAM,EACN,yBAAyB,EACzBH,KACF,CAAC;IACH,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}