@wix/motion 1.0.72 → 1.571.0

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

@@ -0,0 +1,47 @@
+import { measureCompHeight } from './utils';
+const EASE_IN = 'sineIn';
+const EASE_OUT = 'sineOut';
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom);
+  }
+  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;
+  return [{
+    ...options,
+    part: 'BG_LAYER',
+    easing,
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    startOffsetAdd: isOut ? '100vh' : '0px',
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return isOut ? `calc(100vh + ${measures.compHeight}px)` : `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+    },
+    keyframes: [{
+      opacity: fromValue
+    }, {
+      opacity: toValue
+    }]
+  }];
+}
+//# sourceMappingURL=BgFade.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","EASE_IN","EASE_OUT","create","options","dom","measures","compHeight","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,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,MAAMC,OAAO,GAAG,QAAQ;AACxB,MAAMC,QAAQ,GAAG,SAAS;AAE1B,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACPL,iBAAiB,CAACM,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAM;IAAEG,KAAK,GAAG;EAAK,CAAC,GAAGJ,OAAO,CAACK,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,GAAGR,QAAQ,GAAGD,OAAO;EAEzC,OAAO,CACL;IACE,GAAGG,OAAO;IACVU,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,gBAAgBJ,QAAQ,CAACC,UAAU,KAAK,GACxC,eAAegB,IAAI,CAACC,KAAK,CAAC,GAAG,GAAGlB,QAAQ,CAACC,UAAU,CAAC,KAAK;IAC/D,CAAC;IACDkB,SAAS,EAAE,CACT;MACEC,OAAO,EAAEf;IACX,CAAC,EACD;MACEe,OAAO,EAAEd;IACX,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,69 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom);
+  }
+  const easing = 'sineOut';
+  const {
+    scale = 0.7
+  } = options.namedEffect;
+  return [{
+    ...options,
+    easing: 'linear',
+    part: 'BG_LAYER',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    startOffsetAdd: '100vh',
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100vh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      opacity: 1
+    }, {
+      opacity: 0
+    }]
+  }, {
+    ...options,
+    easing,
+    part: 'BG_LAYER',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    startOffsetAdd: '100vh',
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+    },
+    keyframes: [{
+      scale: 1
+    }, {
+      scale
+    }]
+  }];
+}
+//# sourceMappingURL=BgFadeBack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","create","options","dom","measures","compHeight","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,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACPH,iBAAiB,CAACI,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAMG,MAAM,GAAG,SAAS;EACxB,MAAM;IAAEC,KAAK,GAAG;EAAI,CAAC,GAAGL,OAAO,CAACM,WAAyB;EAEzD,OAAO,CACL;IACE,GAAGN,OAAO;IACVI,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,gBAAgBb,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDa,SAAS,EAAE,CACT;MACEC,OAAO,EAAE;IACX,CAAC,EACD;MACEA,OAAO,EAAE;IACX,CAAC;EAEL,CAAC,EACD;IACE,GAAGjB,OAAO;IACVI,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,GAAGjB,QAAQ,CAACC,UAAU,CAAC,KAAK;IACnE,CAAC;IACDa,SAAS,EAAE,CACT;MACEX,KAAK,EAAE;IACT,CAAC,EACD;MACEA;IACF,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,99 @@
+import { measureCompHeight, getScaleFromPerspectiveAndZ } from './utils';
+const PERSPECTIVE = 100;
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom, true);
+  }
+  const {
+    stretch = 1.3,
+    zoom = 100 / 6
+  } = options.namedEffect;
+  const scale = getScaleFromPerspectiveAndZ(zoom, PERSPECTIVE);
+  return [{
+    ...options,
+    part: 'BG_IMG',
+    easing: 'sineOut',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100svh + ${measures.compHeight}px)`;
+    },
+    get keyframes() {
+      return [{
+        transform: 'translateY(10svh)'
+      }, {
+        transform: `translateY(calc(${parseFloat((-0.1 * (2 - scale)).toFixed(2))} * var(--motion-comp-height, ${measures.compHeight}px)))`
+      }];
+    }
+  }, {
+    ...options,
+    part: 'BG_IMG',
+    easing: 'linear',
+    composite: 'add',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100svh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      transform: `scaleY(${stretch})`
+    }, {
+      transform: `scaleY(1)`
+    }]
+  }, {
+    ...options,
+    part: 'BG_IMG',
+    easing: 'sineIn',
+    composite: 'add',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100svh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      transform: `perspective(${PERSPECTIVE}px) translateZ(0px)`
+    }, {
+      transform: `perspective(${PERSPECTIVE}px) translateZ(${parseFloat(zoom.toFixed(2))}px)`
+    }]
+  }];
+}
+//# sourceMappingURL=BgFake3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","getScaleFromPerspectiveAndZ","PERSPECTIVE","create","options","dom","measures","compHeight","stretch","zoom","namedEffect","scale","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":[]}

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

@@ -0,0 +1,46 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom);
+  }
+  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];
+  }
+  return [{
+    ...options,
+    part: 'BG_MEDIA',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100vh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      transform: `translateX(${fromValue})`
+    }, {
+      transform: `translateX(${toValue})`
+    }]
+  }];
+}
+//# sourceMappingURL=BgPan.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","create","options","dom","measures","compHeight","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,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACPH,iBAAiB,CAACI,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAM;IAAEG,SAAS,GAAG,MAAM;IAAEC,KAAK,GAAG;EAAI,CAAC,GAAGL,OAAO,CAACM,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,GAAGR,OAAO;IACVU,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,gBAAgBf,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDe,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,cAAcX,SAAS;IACpC,CAAC,EACD;MACEW,SAAS,EAAE,cAAcV,OAAO;IAClC,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

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

@@ -0,0 +1,39 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom, true);
+  }
+  const {
+    speed = 0.2
+  } = options.namedEffect;
+  return [{
+    ...options,
+    part: 'BG_MEDIA',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100svh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      transform: `translateY(${100 * speed}svh)`
+    }, {
+      transform: `translateY(calc((100% - 200lvh) * ${-speed}))`
+    }]
+  }];
+}
+//# sourceMappingURL=BgParallax.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","create","options","dom","measures","compHeight","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,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACPH,iBAAiB,CAACI,QAAQ,EAAED,GAAG,EAAE,IAAI,CAAC;EACxC;EAEA,MAAM;IAAEG,KAAK,GAAG;EAAI,CAAC,GAAGJ,OAAO,CAACK,WAAyB;EAEzD,OAAO,CACL;IACE,GAAGL,OAAO;IACVM,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,iBAAiBX,QAAQ,CAACC,UAAU,KAAK;IAClD,CAAC;IACDW,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":[]}

package/dist/esm/library/backgroundScroll/BgPullBack.js

@@ -0,0 +1,41 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom);
+  }
+  const easing = 'linear';
+  const {
+    scale = 50
+  } = options.namedEffect;
+  return [{
+    ...options,
+    easing,
+    part: 'BG_MEDIA',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `${measures.compHeight}px`;
+    },
+    keyframes: [{
+      transform: `perspective(100px) translate3d(0px, -${scale / 3 | 0}%, ${scale}px)`
+    }, {
+      transform: 'perspective(100px) translate3d(0px, 0px, 0px)'
+    }]
+  }];
+}
+//# sourceMappingURL=BgPullBack.js.map

package/dist/esm/library/backgroundScroll/BgPullBack.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","create","options","dom","measures","compHeight","easing","scale","namedEffect","part","startOffset","name","offset","type","value","endOffset","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/backgroundScroll/BgPullBack.ts"],"sourcesContent":["import type {\n  BgPullBack,\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 = 50 } = options.namedEffect as BgPullBack;\n\n  return [\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 `${measures.compHeight}px`;\n      },\n      keyframes: [\n        {\n          transform: `perspective(100px) translate3d(0px, -${\n            (scale / 3) | 0\n          }%, ${scale}px)`,\n        },\n        {\n          transform: 'perspective(100px) translate3d(0px, 0px, 0px)',\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AAMA,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACPH,iBAAiB,CAACI,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAMG,MAAM,GAAG,QAAQ;EACvB,MAAM;IAAEC,KAAK,GAAG;EAAG,CAAC,GAAGL,OAAO,CAACM,WAAyB;EAExD,OAAO,CACL;IACE,GAAGN,OAAO;IACVI,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,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,GAAGZ,QAAQ,CAACC,UAAU,IAAI;IACnC,CAAC;IACDY,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,wCACRX,KAAK,GAAG,CAAC,GAAI,CAAC,MACXA,KAAK;IACb,CAAC,EACD;MACEW,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/esm/library/backgroundScroll/BgReveal.js

@@ -0,0 +1,10 @@
+import { measureCompHeight } from './utils';
+export default function create(_options, dom) {
+  if (dom) {
+    measureCompHeight({
+      compHeight: 0
+    }, dom, true);
+  }
+  return [];
+}
+//# sourceMappingURL=BgReveal.js.map

package/dist/esm/library/backgroundScroll/BgReveal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","create","_options","dom","compHeight"],"sources":["../../../../src/library/backgroundScroll/BgReveal.ts"],"sourcesContent":["import type { ScrubAnimationOptions, DomApi } from '../../types';\nimport { measureCompHeight } from './utils';\n\nexport default function create(_options: ScrubAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    measureCompHeight({ compHeight: 0 }, dom, true);\n  }\n  return [];\n}\n"],"mappings":"AACA,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,eAAe,SAASC,MAAMA,CAACC,QAA+B,EAAEC,GAAY,EAAE;EAC5E,IAAIA,GAAG,EAAE;IACPH,iBAAiB,CAAC;MAAEI,UAAU,EAAE;IAAE,CAAC,EAAED,GAAG,EAAE,IAAI,CAAC;EACjD;EACA,OAAO,EAAE;AACX","ignoreList":[]}

package/dist/esm/library/backgroundScroll/BgRotate.js

@@ -0,0 +1,33 @@
+export default function create(options) {
+  const easing = 'sineOut';
+  const {
+    angle = 22,
+    direction = 'counter-clockwise'
+  } = options.namedEffect;
+  return [{
+    ...options,
+    easing,
+    part: 'BG_MEDIA',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffsetAdd: '100vh',
+    keyframes: [{
+      transform: `rotate(${direction === 'counter-clockwise' ? angle : -angle}deg)`
+    }, {
+      transform: 'rotate(0deg)'
+    }]
+  }];
+}
+//# sourceMappingURL=BgRotate.js.map

package/dist/esm/library/backgroundScroll/BgRotate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["create","options","easing","angle","direction","namedEffect","part","startOffset","name","offset","type","value","endOffset","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/backgroundScroll/BgRotate.ts"],"sourcesContent":["import type { BgRotate, RangeOffset, ScrubAnimationOptions } from '../../types';\n\nexport default function create(options: ScrubAnimationOptions) {\n  const easing = 'sineOut';\n  const { angle = 22, direction = 'counter-clockwise' } =\n    options.namedEffect as BgRotate;\n\n  return [\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      endOffsetAdd: '100vh',\n      keyframes: [\n        {\n          transform: `rotate(${\n            direction === 'counter-clockwise' ? angle : -angle\n          }deg)`,\n        },\n        {\n          transform: 'rotate(0deg)',\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AAEA,eAAe,SAASA,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAMC,MAAM,GAAG,SAAS;EACxB,MAAM;IAAEC,KAAK,GAAG,EAAE;IAAEC,SAAS,GAAG;EAAoB,CAAC,GACnDH,OAAO,CAACI,WAAuB;EAEjC,OAAO,CACL;IACE,GAAGJ,OAAO;IACVC,MAAM;IACNI,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;IAChBE,YAAY,EAAE,OAAO;IACrBC,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,UACTX,SAAS,KAAK,mBAAmB,GAAGD,KAAK,GAAG,CAACA,KAAK;IAEtD,CAAC,EACD;MACEY,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/esm/library/backgroundScroll/BgSkew.js

@@ -0,0 +1,40 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom);
+  }
+  const {
+    angle = 20,
+    direction = 'counter-clockwise'
+  } = options.namedEffect;
+  return [{
+    ...options,
+    part: 'BG_MEDIA',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100vh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      transform: `skewY(${direction === 'counter-clockwise' ? angle : -angle}deg)`
+    }, {
+      transform: `skewY(${direction === 'counter-clockwise' ? -angle : angle}deg)`
+    }]
+  }];
+}
+//# sourceMappingURL=BgSkew.js.map

package/dist/esm/library/backgroundScroll/BgSkew.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","create","options","dom","measures","compHeight","angle","direction","namedEffect","part","startOffset","name","offset","type","value","endOffset","endOffsetAdd","keyframes","transform"],"sources":["../../../../src/library/backgroundScroll/BgSkew.ts"],"sourcesContent":["import type {\n  BgSkew,\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 { angle = 20, direction = 'counter-clockwise' } =\n    options.namedEffect as BgSkew;\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: `skewY(${\n            direction === 'counter-clockwise' ? angle : -angle\n          }deg)`,\n        },\n        {\n          transform: `skewY(${\n            direction === 'counter-clockwise' ? -angle : angle\n          }deg)`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AAMA,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACPH,iBAAiB,CAACI,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAM;IAAEG,KAAK,GAAG,EAAE;IAAEC,SAAS,GAAG;EAAoB,CAAC,GACnDL,OAAO,CAACM,WAAqB;EAE/B,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,gBAAgBZ,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDY,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,SACTX,SAAS,KAAK,mBAAmB,GAAGD,KAAK,GAAG,CAACA,KAAK;IAEtD,CAAC,EACD;MACEY,SAAS,EAAE,SACTX,SAAS,KAAK,mBAAmB,GAAG,CAACD,KAAK,GAAGA,KAAK;IAEtD,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}

package/dist/esm/library/backgroundScroll/BgZoom.js

@@ -0,0 +1,121 @@
+import { roundNumber } from '../../utils';
+import { measureCompHeight, getScaleFromPerspectiveAndZ } from './utils';
+const PERSPECTIVE = 100;
+const DEFAULT_ZOOM = 40;
+const ZOOM_OUT_FACTOR = 0.375; // 15/40 - this for using the same scale of values in the data
+const DIRECTION_TO_PARAMS = {
+  in: {
+    easing: 'sineIn',
+    fromY: '20svh'
+  },
+  out: {
+    easing: 'sineInOut',
+    fromY: '0px'
+  }
+};
+export default function create(options, dom) {
+  const {
+    direction = 'in'
+  } = options.namedEffect;
+  const isIn = direction === 'in';
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom, isIn);
+  }
+  const {
+    easing,
+    fromY
+  } = DIRECTION_TO_PARAMS[direction];
+  let {
+    zoom = DEFAULT_ZOOM
+  } = options.namedEffect;
+  if (!isIn) {
+    zoom *= ZOOM_OUT_FACTOR;
+  }
+  const fromZ = roundNumber(isIn ? 0 : zoom / 1.3);
+  const toZ = roundNumber(isIn ? zoom : -zoom);
+  const toScale = roundNumber(getScaleFromPerspectiveAndZ(toZ, PERSPECTIVE));
+  return [{
+    ...options,
+    part: 'BG_MEDIA',
+    easing: 'linear',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    keyframes: [{
+      transform: 'translate3d(0, 0, 0)'
+    }, {
+      transform: 'translate3d(0, 0, 0)'
+    }]
+  }, {
+    ...options,
+    part: 'BG_IMG',
+    easing: 'linear',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100svh + ${measures.compHeight}px)`;
+    },
+    get keyframes() {
+      const toY = isIn ? `calc(-0.2 * var(--motion-comp-height, ${measures.compHeight}px) + 0.5 * ${zoom / PERSPECTIVE} * max(0px, 100lvh - var(--motion-comp-height, ${measures.compHeight}px)))` : '0px';
+      return [{
+        transform: `translateY(${fromY})`
+      }, {
+        transform: `translateY(calc(${toY} * ${toScale}))`
+      }];
+    }
+  }, {
+    ...options,
+    easing,
+    part: 'BG_IMG',
+    composite: isIn ? 'add' : 'replace',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100svh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      transform: `perspective(${PERSPECTIVE}px) translateZ(${fromZ}px)`
+    }, {
+      transform: `perspective(${PERSPECTIVE}px) translateZ(${toZ}px)`
+    }]
+  }];
+}
+//# sourceMappingURL=BgZoom.js.map

package/dist/esm/library/backgroundScroll/BgZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["roundNumber","measureCompHeight","getScaleFromPerspectiveAndZ","PERSPECTIVE","DEFAULT_ZOOM","ZOOM_OUT_FACTOR","DIRECTION_TO_PARAMS","in","easing","fromY","out","create","options","dom","direction","namedEffect","isIn","measures","compHeight","zoom","fromZ","toZ","toScale","part","startOffset","name","offset","type","value","endOffset","keyframes","transform","endOffsetAdd","toY","composite"],"sources":["../../../../src/library/backgroundScroll/BgZoom.ts"],"sourcesContent":["import type {\n  BgZoom,\n  RangeOffset,\n  ScrubAnimationOptions,\n  DomApi,\n} from '../../types';\nimport { roundNumber } from '../../utils';\nimport { measureCompHeight, getScaleFromPerspectiveAndZ } from './utils';\n\nconst PERSPECTIVE = 100;\nconst DEFAULT_ZOOM = 40;\nconst ZOOM_OUT_FACTOR = 0.375; // 15/40 - this for using the same scale of values in the data\nconst DIRECTION_TO_PARAMS = {\n  in: {\n    easing: 'sineIn',\n    fromY: '20svh',\n  },\n  out: {\n    easing: 'sineInOut',\n    fromY: '0px',\n  },\n};\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const { direction = 'in' } = options.namedEffect as BgZoom;\n  const isIn = direction === 'in';\n\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom, isIn);\n  }\n\n  const { easing, fromY } = DIRECTION_TO_PARAMS[direction];\n  let { zoom = DEFAULT_ZOOM } = options.namedEffect as BgZoom;\n  if (!isIn) {\n    zoom *= ZOOM_OUT_FACTOR;\n  }\n  const fromZ = roundNumber(isIn ? 0 : zoom / 1.3);\n  const toZ = roundNumber(isIn ? zoom : -zoom);\n  const toScale = roundNumber(getScaleFromPerspectiveAndZ(toZ, PERSPECTIVE));\n\n  return [\n    {\n      ...options,\n      part: 'BG_MEDIA',\n      easing: 'linear',\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      keyframes: [\n        {\n          transform: 'translate3d(0, 0, 0)',\n        },\n        {\n          transform: 'translate3d(0, 0, 0)',\n        },\n      ],\n    },\n    {\n      ...options,\n      part: 'BG_IMG',\n      easing: 'linear',\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        const toY = isIn\n          ? `calc(-0.2 * var(--motion-comp-height, ${\n              measures.compHeight\n            }px) + 0.5 * ${\n              zoom / PERSPECTIVE\n            } * max(0px, 100lvh - var(--motion-comp-height, ${\n              measures.compHeight\n            }px)))`\n          : '0px';\n        return [\n          {\n            transform: `translateY(${fromY})`,\n          },\n          {\n            transform: `translateY(calc(${toY} * ${toScale}))`,\n          },\n        ];\n      },\n    },\n    {\n      ...options,\n      easing,\n      part: 'BG_IMG',\n      composite: isIn ? ('add' as const) : ('replace' 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(${fromZ}px)`,\n        },\n        {\n          transform: `perspective(${PERSPECTIVE}px) translateZ(${toZ}px)`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}