@wix/motion 1.665.0 → 2.0.0-rc.3

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

@@ -1,88 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.style = style;
-exports.web = web;
-var _easings = require("../../easings");
-var _utils = require("../../utils");
-const MAX_Y_TRAVEL = 40;
-const [ROTATION_X, ROTATION_Y, ROTATION_Z] = [10, 25, 25];
-const TRANSLATE_Y_POWER_MAP = {
-  soft: 0,
-  medium: 0.5,
-  hard: 1
-};
-function getNames(_) {
-  return ['motion-tiltScrollTranslate', 'motion-tiltScrollRotate'];
-}
-function web(options, _dom) {
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    power,
-    distance = 0,
-    range = 'in',
-    direction = 'right'
-  } = options.namedEffect;
-  const easing = 'linear';
-  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
-  const travelY = MAX_Y_TRAVEL * (power && power in TRANSLATE_Y_POWER_MAP ? TRANSLATE_Y_POWER_MAP[power] : distance);
-  const dir = direction === 'left' ? -1 : 1;
-  const from = {
-    x: ROTATION_X * (range === 'out' ? 0 : -1),
-    y: ROTATION_Y * (range === 'out' ? 0 : -1),
-    z: ROTATION_Z * dir * (range === 'out' ? 0 : range === 'in' ? 1 : -1),
-    transY: range === 'out' ? 0 : travelY
-  };
-  const to = {
-    x: ROTATION_X * (range === 'in' ? 0 : range === 'out' ? -1 : 1),
-    y: ROTATION_Y * (range === 'in' ? 0 : range === 'out' ? -1 : 0.5),
-    z: ROTATION_Z * dir * (range === 'in' ? 0 : range === 'out' ? 1 : 1.25),
-    transY: range === 'in' ? 0 : -1 * travelY
-  };
-  const startOffsetAdd = range === 'out' ? '0px' : `${-1 * Math.abs(travelY)}vh`;
-  const endOffsetAdd = range === 'in' ? '0px' : `${Math.abs(travelY)}vh`;
-  const [tiltScrollTranslate, tiltScrollRotate] = getNames(options);
-  const custom = {
-    '--motion-tilt-y-from': `${from.transY}vh`,
-    '--motion-tilt-y-to': `${to.transY}vh`,
-    '--motion-tilt-x-from': `${from.x}deg`,
-    '--motion-tilt-x-to': `${to.x}deg`,
-    '--motion-tilt-y-rot-from': `${from.y}deg`,
-    '--motion-tilt-y-rot-to': `${to.y}deg`,
-    '--motion-tilt-z-from': `${from.z}deg`,
-    '--motion-tilt-z-to': `${to.z}deg`
-  };
-  return [{
-    ...options,
-    name: tiltScrollTranslate,
-    fill,
-    easing,
-    startOffsetAdd,
-    endOffsetAdd,
-    custom,
-    keyframes: [{
-      transform: `perspective(400px) translateY(${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-y-from', asWeb)}) rotateX(${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-x-from', asWeb)}) rotateY(${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-y-rot-from', asWeb)})`
-    }, {
-      transform: `perspective(400px) translateY(${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-y-to', asWeb)}) rotateX(${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-x-to', asWeb)}) rotateY(${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-y-rot-to', asWeb)})`
-    }]
-  }, {
-    ...options,
-    name: tiltScrollRotate,
-    fill,
-    easing: _easings.cssEasings.sineInOut,
-    startOffsetAdd,
-    endOffsetAdd,
-    composite: 'add',
-    // add this animation on top of the previous one
-    custom,
-    keyframes: [{
-      transform: `rotate(calc(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0deg')} + ${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-z-from', asWeb)}))`
-    }, {
-      transform: `rotate(calc(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0deg')} + ${(0, _utils.toKeyframeValue)(custom, '--motion-tilt-z-to', asWeb)}))`
-    }]
-  }];
-}
-//# sourceMappingURL=TiltScroll.js.map

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

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

package/dist/cjs/library/scroll/TurnScroll.js

@@ -1,98 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.getNames = getNames;
-exports.prepare = prepare;
-exports.style = style;
-exports.web = web;
-var _utils = require("../../utils");
-const ELEMENT_ROTATION = 45;
-const POWER_MAP = {
-  soft: {
-    scaleFrom: 1,
-    scaleTo: 1
-  },
-  medium: {
-    scaleFrom: 0.7,
-    scaleTo: 1.3
-  },
-  hard: {
-    scaleFrom: 0.4,
-    scaleTo: 1.6
-  }
-};
-function getNames(_) {
-  return ['motion-turnScroll'];
-}
-function prepare(_, dom) {
-  if (dom) {
-    let left = 0;
-    dom.measure(target => {
-      if (!target) {
-        return;
-      }
-      left = target.getBoundingClientRect().left;
-    });
-    dom.mutate(target => {
-      target == null || target.style.setProperty('--motion-left', `${left}px`);
-    });
-  }
-}
-function web(options, dom) {
-  prepare(options, dom);
-  return style(options, true);
-}
-function style(options, asWeb = false) {
-  const {
-    power,
-    spin = 'clockwise',
-    direction = 'right',
-    scale = 1,
-    range = 'in'
-  } = options.namedEffect;
-  const easing = 'linear';
-  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
-  const startXLeft = `calc(-1 * ${(0, _utils.toKeyframeValue)({}, '--motion-left', false, 'calc(100vw - 100%)')} - 100%)`;
-  const endXLeft = `calc(100vw - ${(0, _utils.toKeyframeValue)({}, '--motion-left', false, '0px')})`;
-  const [startX, endX] = direction === 'left' ? [startXLeft, endXLeft] : [endXLeft, startXLeft];
-  const rotate = spin === 'clockwise' ? ELEMENT_ROTATION : -1 * ELEMENT_ROTATION;
-  const {
-    scaleFrom,
-    scaleTo
-  } = power && POWER_MAP[power] ? POWER_MAP[power] : {
-    scaleFrom: scale,
-    scaleTo: scale
-  };
-  const fromValues = {
-    rotation: range === 'out' ? 0 : -rotate,
-    scale: range === 'out' ? 1 : scaleFrom,
-    translate: range === 'out' ? '0px' : startX
-  };
-  const toValues = {
-    rotation: range === 'in' ? 0 : rotate,
-    scale: range === 'in' ? 1 : range === 'continuous' ? scaleTo : scaleFrom,
-    translate: range === 'in' ? '0px' : endX
-  };
-  const [turnScroll] = getNames(options);
-  const custom = {
-    '--motion-turn-translate-from': fromValues.translate,
-    '--motion-turn-translate-to': toValues.translate,
-    '--motion-turn-scale-from': fromValues.scale,
-    '--motion-turn-scale-to': toValues.scale,
-    '--motion-turn-rotation-from': `${fromValues.rotation}deg`,
-    '--motion-turn-rotation-to': `${toValues.rotation}deg`
-  };
-  return [{
-    ...options,
-    name: turnScroll,
-    fill,
-    easing,
-    custom,
-    keyframes: [{
-      transform: `translateX(${(0, _utils.toKeyframeValue)(custom, '--motion-turn-translate-from', asWeb)}) scale(${(0, _utils.toKeyframeValue)(custom, '--motion-turn-scale-from', asWeb)}) rotate(calc(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0deg')} + ${(0, _utils.toKeyframeValue)(custom, '--motion-turn-rotation-from', asWeb)}))`
-    }, {
-      transform: `translateX(${(0, _utils.toKeyframeValue)(custom, '--motion-turn-translate-to', asWeb)}) scale(${(0, _utils.toKeyframeValue)(custom, '--motion-turn-scale-to', asWeb)}) rotate(calc(${(0, _utils.toKeyframeValue)({}, '--comp-rotate-z', false, '0deg')} + ${(0, _utils.toKeyframeValue)(custom, '--motion-turn-rotation-to', asWeb)}))`
-    }]
-  }];
-}
-//# sourceMappingURL=TurnScroll.js.map

package/dist/cjs/library/scroll/TurnScroll.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_utils","require","ELEMENT_ROTATION","POWER_MAP","soft","scaleFrom","scaleTo","medium","hard","getNames","_","prepare","dom","left","measure","target","getBoundingClientRect","mutate","style","setProperty","web","options","asWeb","power","spin","direction","scale","range","namedEffect","easing","fill","startXLeft","toKeyframeValue","endXLeft","startX","endX","rotate","fromValues","rotation","translate","toValues","turnScroll","custom","name","keyframes","transform"],"sources":["../../../../src/library/scroll/TurnScroll.ts"],"sourcesContent":["import type {\n  TurnScroll,\n  ScrubAnimationOptions,\n  DomApi,\n  AnimationFillMode,\n} from '../../types';\nimport { toKeyframeValue } from '../../utils';\n\nconst ELEMENT_ROTATION = 45;\n\nconst POWER_MAP = {\n  soft: { scaleFrom: 1, scaleTo: 1 },\n  medium: { scaleFrom: 0.7, scaleTo: 1.3 },\n  hard: { scaleFrom: 0.4, scaleTo: 1.6 },\n};\n\nexport function getNames(_: ScrubAnimationOptions) {\n  return ['motion-turnScroll'];\n}\n\nexport function prepare(_: ScrubAnimationOptions, dom?: DomApi) {\n  if (dom) {\n    let left = 0;\n    dom.measure((target) => {\n      if (!target) {\n        return;\n      }\n      left = target.getBoundingClientRect().left;\n    });\n    dom.mutate((target) => {\n      target?.style.setProperty('--motion-left', `${left}px`);\n    });\n  }\n}\n\nexport function web(options: ScrubAnimationOptions, dom?: DomApi) {\n  prepare(options, dom);\n\n  return style(options, true);\n}\n\nexport function style(options: ScrubAnimationOptions, asWeb = false) {\n  const {\n    power,\n    spin = 'clockwise',\n    direction = 'right',\n    scale = 1,\n    range = 'in',\n  } = options.namedEffect as TurnScroll;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const startXLeft = `calc(-1 * ${toKeyframeValue(\n    {},\n    '--motion-left',\n    false,\n    'calc(100vw - 100%)',\n  )} - 100%)`;\n  const endXLeft = `calc(100vw - ${toKeyframeValue(\n    {},\n    '--motion-left',\n    false,\n    '0px',\n  )})`;\n  const [startX, endX] =\n    direction === 'left' ? [startXLeft, endXLeft] : [endXLeft, startXLeft];\n\n  const rotate =\n    spin === 'clockwise' ? ELEMENT_ROTATION : -1 * ELEMENT_ROTATION;\n\n  const { scaleFrom, scaleTo } =\n    power && POWER_MAP[power]\n      ? POWER_MAP[power]\n      : { scaleFrom: scale, scaleTo: scale };\n\n  const fromValues = {\n    rotation: range === 'out' ? 0 : -rotate,\n    scale: range === 'out' ? 1 : scaleFrom,\n    translate: range === 'out' ? '0px' : startX,\n  };\n  const toValues = {\n    rotation: range === 'in' ? 0 : rotate,\n    scale: range === 'in' ? 1 : range === 'continuous' ? scaleTo : scaleFrom,\n    translate: range === 'in' ? '0px' : endX,\n  };\n\n  const [turnScroll] = getNames(options);\n\n  const custom = {\n    '--motion-turn-translate-from': fromValues.translate,\n    '--motion-turn-translate-to': toValues.translate,\n    '--motion-turn-scale-from': fromValues.scale,\n    '--motion-turn-scale-to': toValues.scale,\n    '--motion-turn-rotation-from': `${fromValues.rotation}deg`,\n    '--motion-turn-rotation-to': `${toValues.rotation}deg`,\n  };\n\n  return [\n    {\n      ...options,\n      name: turnScroll,\n      fill,\n      easing,\n      custom,\n      keyframes: [\n        {\n          transform: `translateX(${toKeyframeValue(\n            custom,\n            '--motion-turn-translate-from',\n            asWeb,\n          )}) scale(${toKeyframeValue(\n            custom,\n            '--motion-turn-scale-from',\n            asWeb,\n          )}) rotate(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(\n            custom,\n            '--motion-turn-rotation-from',\n            asWeb,\n          )}))`,\n        },\n        {\n          transform: `translateX(${toKeyframeValue(\n            custom,\n            '--motion-turn-translate-to',\n            asWeb,\n          )}) scale(${toKeyframeValue(\n            custom,\n            '--motion-turn-scale-to',\n            asWeb,\n          )}) rotate(calc(${toKeyframeValue(\n            {},\n            '--comp-rotate-z',\n            false,\n            '0deg',\n          )} + ${toKeyframeValue(\n            custom,\n            '--motion-turn-rotation-to',\n            asWeb,\n          )}))`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/library/scroll/index.js

@@ -1,46 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.scrollAnimations = void 0;
-var ArcScroll = _interopRequireWildcard(require("./ArcScroll"));
-var BlurScroll = _interopRequireWildcard(require("./BlurScroll"));
-var FadeScroll = _interopRequireWildcard(require("./FadeScroll"));
-var FlipScroll = _interopRequireWildcard(require("./FlipScroll"));
-var GrowScroll = _interopRequireWildcard(require("./GrowScroll"));
-var MoveScroll = _interopRequireWildcard(require("./MoveScroll"));
-var PanScroll = _interopRequireWildcard(require("./PanScroll"));
-var ParallaxScroll = _interopRequireWildcard(require("./ParallaxScroll"));
-var RevealScroll = _interopRequireWildcard(require("./RevealScroll"));
-var ShapeScroll = _interopRequireWildcard(require("./ShapeScroll"));
-var ShuttersScroll = _interopRequireWildcard(require("./ShuttersScroll"));
-var ShrinkScroll = _interopRequireWildcard(require("./ShrinkScroll"));
-var SkewPanScroll = _interopRequireWildcard(require("./SkewPanScroll"));
-var SlideScroll = _interopRequireWildcard(require("./SlideScroll"));
-var Spin3dScroll = _interopRequireWildcard(require("./Spin3dScroll"));
-var SpinScroll = _interopRequireWildcard(require("./SpinScroll"));
-var StretchScroll = _interopRequireWildcard(require("./StretchScroll"));
-var TiltScroll = _interopRequireWildcard(require("./TiltScroll"));
-var TurnScroll = _interopRequireWildcard(require("./TurnScroll"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const scrollAnimations = exports.scrollAnimations = {
-  ArcScroll,
-  BlurScroll,
-  FadeScroll,
-  FlipScroll,
-  GrowScroll,
-  MoveScroll,
-  PanScroll,
-  ParallaxScroll,
-  RevealScroll,
-  ShapeScroll,
-  ShuttersScroll,
-  ShrinkScroll,
-  SkewPanScroll,
-  SlideScroll,
-  Spin3dScroll,
-  SpinScroll,
-  StretchScroll,
-  TiltScroll,
-  TurnScroll
-};
-//# sourceMappingURL=index.js.map

package/dist/cjs/library/scroll/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ArcScroll","_interopRequireWildcard","require","BlurScroll","FadeScroll","FlipScroll","GrowScroll","MoveScroll","PanScroll","ParallaxScroll","RevealScroll","ShapeScroll","ShuttersScroll","ShrinkScroll","SkewPanScroll","SlideScroll","Spin3dScroll","SpinScroll","StretchScroll","TiltScroll","TurnScroll","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","scrollAnimations","exports"],"sources":["../../../../src/library/scroll/index.ts"],"sourcesContent":["import * as ArcScroll from './ArcScroll';\nimport * as BlurScroll from './BlurScroll';\nimport * as FadeScroll from './FadeScroll';\nimport * as FlipScroll from './FlipScroll';\nimport * as GrowScroll from './GrowScroll';\nimport * as MoveScroll from './MoveScroll';\nimport * as PanScroll from './PanScroll';\nimport * as ParallaxScroll from './ParallaxScroll';\nimport * as RevealScroll from './RevealScroll';\nimport * as ShapeScroll from './ShapeScroll';\nimport * as ShuttersScroll from './ShuttersScroll';\nimport * as ShrinkScroll from './ShrinkScroll';\nimport * as SkewPanScroll from './SkewPanScroll';\nimport * as SlideScroll from './SlideScroll';\nimport * as Spin3dScroll from './Spin3dScroll';\nimport * as SpinScroll from './SpinScroll';\nimport * as StretchScroll from './StretchScroll';\nimport * as TiltScroll from './TiltScroll';\nimport * as TurnScroll from './TurnScroll';\nimport type { ScrollAnimations } from '../../types';\n\nexport const scrollAnimations: ScrollAnimations = {\n  ArcScroll,\n  BlurScroll,\n  FadeScroll,\n  FlipScroll,\n  GrowScroll,\n  MoveScroll,\n  PanScroll,\n  ParallaxScroll,\n  RevealScroll,\n  ShapeScroll,\n  ShuttersScroll,\n  ShrinkScroll,\n  SkewPanScroll,\n  SlideScroll,\n  Spin3dScroll,\n  SpinScroll,\n  StretchScroll,\n  TiltScroll,\n  TurnScroll,\n};\n"],"mappings":";;;;AAAA,IAAAA,SAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,uBAAA,CAAAC,OAAA;AACA,IAAAG,UAAA,GAAAJ,uBAAA,CAAAC,OAAA;AACA,IAAAI,UAAA,GAAAL,uBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAN,uBAAA,CAAAC,OAAA;AACA,IAAAM,SAAA,GAAAP,uBAAA,CAAAC,OAAA;AACA,IAAAO,cAAA,GAAAR,uBAAA,CAAAC,OAAA;AACA,IAAAQ,YAAA,GAAAT,uBAAA,CAAAC,OAAA;AACA,IAAAS,WAAA,GAAAV,uBAAA,CAAAC,OAAA;AACA,IAAAU,cAAA,GAAAX,uBAAA,CAAAC,OAAA;AACA,IAAAW,YAAA,GAAAZ,uBAAA,CAAAC,OAAA;AACA,IAAAY,aAAA,GAAAb,uBAAA,CAAAC,OAAA;AACA,IAAAa,WAAA,GAAAd,uBAAA,CAAAC,OAAA;AACA,IAAAc,YAAA,GAAAf,uBAAA,CAAAC,OAAA;AACA,IAAAe,UAAA,GAAAhB,uBAAA,CAAAC,OAAA;AACA,IAAAgB,aAAA,GAAAjB,uBAAA,CAAAC,OAAA;AACA,IAAAiB,UAAA,GAAAlB,uBAAA,CAAAC,OAAA;AACA,IAAAkB,UAAA,GAAAnB,uBAAA,CAAAC,OAAA;AAA2C,SAAAD,wBAAAoB,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAtB,uBAAA,YAAAA,CAAAoB,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGpC,MAAMkB,gBAAkC,GAAAC,OAAA,CAAAD,gBAAA,GAAG;EAChDxC,SAAS;EACTG,UAAU;EACVC,UAAU;EACVC,UAAU;EACVC,UAAU;EACVC,UAAU;EACVC,SAAS;EACTC,cAAc;EACdC,YAAY;EACZC,WAAW;EACXC,cAAc;EACdC,YAAY;EACZC,aAAa;EACbC,WAAW;EACXC,YAAY;EACZC,UAAU;EACVC,aAAa;EACbC,UAAU;EACVC;AACF,CAAC","ignoreList":[]}

package/dist/cjs/library/scroll/test/testUtils.js

@@ -1,8 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.baseMockOptions = void 0;
-const baseMockOptions = exports.baseMockOptions = {
-  id: 'test-id'
-};
-//# sourceMappingURL=testUtils.js.map

package/dist/cjs/library/scroll/test/testUtils.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["baseMockOptions","exports","id"],"sources":["../../../../../src/library/scroll/test/testUtils.ts"],"sourcesContent":["import { ScrubAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: ScrubAnimationOptions = {\n  id: 'test-id',\n};\n"],"mappings":";;;;AAEO,MAAMA,eAAsC,GAAAC,OAAA,CAAAD,eAAA,GAAG;EACpDE,EAAE,EAAE;AACN,CAAC","ignoreList":[]}

package/dist/cjs/playground/animationMotionBgScroll.stories.js

@@ -1,369 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-exports.__esModule = true;
-exports.default = exports.BackgroundScroll = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _fizban = require("fizban");
-var _index = require("../index");
-var _controls = require("./controls");
-var _playgroundModule = _interopRequireDefault(require("./playground.module.scss"));
-var _backgroundScroll = require("../library/backgroundScroll");
-var _playgroundCommon = require("./playground-common");
-var _effectsKit = require("@wix/effects-kit");
-var _jsxFileName = "/home/builduser/work/5a10c7a05f300a84/packages/motion/dist/cjs/playground/animationMotionBgScroll.stories.tsx";
-var _default = exports.default = {
-  title: 'Animation Playground/Background Scroll'
-};
-const effectToClassMap = {
-  BgParallax: _playgroundModule.default.bgParallax,
-  BgReveal: _playgroundModule.default.bgReveal,
-  BgFake3D: _playgroundModule.default.bgFakeThreeD,
-  BgSkew: _playgroundModule.default.bgSkew,
-  BgRotate: _playgroundModule.default.bgRotate,
-  BgPan: _playgroundModule.default.bgPan,
-  ImageParallax: _playgroundModule.default.imageParallax,
-  BgZoomIn: _playgroundModule.default.bgZoomIn,
-  BgZoomOut: _playgroundModule.default.bgZoomOut
-};
-const effectToCssVars = {
-  BgSkew: params => ({
-    '--tan-angle': `${Math.tan(Number(params.angle || 20) * Math.PI / 180)}`
-  }),
-  BgRotate: params => ({
-    '--cos-angle': `${Math.cos(Number(params.angle || 22) * Math.PI / 180)}`,
-    '--sin-angle': `${Math.sin(Number(params.angle || 22) * Math.PI / 180)}`
-  }),
-  BgPan: params => ({
-    '--speed': `${Number(params.speed || 0.2)}`
-  }),
-  ImageParallax: params => ({
-    '--speed': `${Number(params.speed || 1.5)}`
-  })
-};
-function getCssVars(name, params) {
-  const styleMapper = effectToCssVars[name] || (_ => {});
-  return styleMapper(params);
-}
-function getEffectFullName(name, params) {
-  return name !== 'BgZoom' ? name : params.direction === 'in' ? 'BgZoomIn' : 'BgZoomOut';
-}
-const BackgroundScroll = () => {
-  var _bgAnimations;
-  const siteRef = _react.default.useRef(null);
-  const compRefs = _react.default.useRef([]);
-  const stageRef = _react.default.useRef(null);
-  const animationGroupRefs = _react.default.useRef([]);
-  const animationSceneRefs = _react.default.useRef([]);
-  const scrollRefs = _react.default.useRef([]);
-  const [attachment] = _react.default.useState('scroll');
-  const [schemaEditor, setSchemaEditor] = _react.default.useState('responsive');
-  const [selectedRange, setSelectedRange] = _react.default.useState('continuous');
-  const bgAnimations = Object.fromEntries((0, _effectsKit.getPresets)(_effectsKit.CONFIG[_playgroundCommon.schemaMapper[schemaEditor]].bgScrub, ['background', 'image'], true).map(preset => [preset.name, {
-    schema: preset.schema,
-    range: preset.range
-  }]));
-  _react.default.useEffect(() => {
-    setData((0, _playgroundCommon.mapSchemaToDefaultData)(bgAnimations[animName].schema[selectedRange], schemaEditor));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schemaEditor, selectedRange]);
-  const implementedAnimations = Object.keys(_backgroundScroll.backgroundScrollAnimations).filter(animationName => bgAnimations[animationName]);
-  const [animName, setAnimName] = _react.default.useState(implementedAnimations[0]);
-  const schema = bgAnimations[animName].schema || {};
-  const [data, setData] = _react.default.useState((0, _playgroundCommon.mapSchemaToDefaultData)(schema[selectedRange], schemaEditor));
-  function handleControlChange(name, value) {
-    setData(currentData => ({
-      ...currentData,
-      [name]: value
-    }));
-  }
-  function cleanContainerRules() {
-    const styleSheet = document.styleSheets[0];
-    const {
-      cssRules
-    } = styleSheet;
-    for (let i = 0; i < cssRules.length; i++) {
-      if (cssRules[i].cssText.startsWith('@container')) {
-        styleSheet.deleteRule(i);
-        i--;
-      }
-    }
-  }
-  function insertBgRotateContainerRules(angle) {
-    const styleSheet = document.styleSheets[0];
-
-    /*
-    @container (max-aspect-ratio: tan(angle)) {
-        #bgMedia-0, #bgMedia-1 {
-            height: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqw * sin(angle)));
-        }
-    }
-    */
-    styleSheet.insertRule(`@container (max-aspect-ratio: ${Math.tan(angle * Math.PI / 180)}) { #bgMedia-0, #bgMedia-1 { height: calc(100% + min(${100 * (Math.sqrt(1 + Math.pow(Math.tan(angle * Math.PI / 180), 2)) - 1)}%, ${100 * Math.sin(angle * Math.PI / 180)}cqw)) } }`, 0);
-
-    /*
-    @container (max-aspect-ratio: tan(90 - angle)) {
-        #bgMedia-0, #bgMedia-1 {
-            width: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqh * sin(angle)));
-        }
-    }
-    */
-    styleSheet.insertRule(`@container (min-aspect-ratio: ${Math.tan((90 - angle) * Math.PI / 180)}) { #bgMedia-0, #bgMedia-1 { width: calc(100% + min(${100 * (Math.sqrt(1 + Math.pow(Math.tan(angle * Math.PI / 180), 2)) - 1)}%, ${100 * Math.sin(angle * Math.PI / 180)}cqh)) } }`, 0);
-  }
-  function animateBg(el, name, animationScene, animationGroup, scroll, {
-    easing = '',
-    range = selectedRange,
-    ...params
-  }) {
-    cleanContainerRules();
-    if (name === 'BgRotate') {
-      insertBgRotateContainerRules(params.angle || 22);
-    }
-    if (window.ViewTimeline) {
-      var _animationGroup;
-      (_animationGroup = animationGroup) == null || _animationGroup.cancel();
-      animationGroup = (0, _index.getWebAnimation)(el.id, {
-        id: '',
-        namedEffect: {
-          id: '',
-          type: name,
-          range,
-          ...params
-        },
-        fill: 'both',
-        iterations: 1,
-        easing
-      }, {
-        componentId: el.id,
-        element: el,
-        trigger: 'view-progress',
-        id: ''
-      });
-      animationGroup.play();
-    } else {
-      var _scroll;
-      animationScene = (0, _index.getScrubScene)(el.id, {
-        id: '',
-        namedEffect: {
-          id: '',
-          type: name,
-          range,
-          ...params
-        },
-        fill: 'both',
-        iterations: 1,
-        startOffset: {
-          name: 'cover',
-          offset: {
-            value: 0,
-            type: 'percentage'
-          }
-        },
-        endOffset: {
-          name: 'cover',
-          offset: {
-            value: 100,
-            type: 'percentage'
-          }
-        },
-        easing
-      }, {
-        componentId: el.id,
-        element: el,
-        trigger: 'view-progress',
-        id: ''
-      });
-      (_scroll = scroll) == null || _scroll.destroy();
-      scroll = new _fizban.Scroll({
-        root: stageRef.current,
-        observeViewportEntry: false,
-        scenes: [animationScene]
-      });
-      scroll.start();
-    }
-  }
-  _react.default.useEffect(() => {
-    for (let i = 0; i < 2; ++i) {
-      animateBg(compRefs.current[i], animName, animationSceneRefs.current[i], animationGroupRefs.current[i], scrollRefs.current[i], {
-        ...data
-      });
-    }
-    return () => {
-      if (window.ViewTimeline) {
-        ['bgLayer-0', 'bgLayer-1', 'bgMedia-0', 'bgMedia-1', 'bgImage-0', 'bgImage-1'].forEach(elId => {
-          var _document$getElementB;
-          (_document$getElementB = document.getElementById(elId)) == null || _document$getElementB.getAnimations().forEach(a => {
-            a.cancel();
-          });
-        });
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animName, data]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_playgroundModule.default.stage} ${_playgroundModule.default.scrollStage} ${_playgroundModule.default.bgScrub}`,
-    ref: stageRef,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 312,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.components,
-    ref: siteRef,
-    style: {
-      '--attachment': attachment
-    },
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 316,
-      columnNumber: 7
-    }
-  }, [0, 1].map((_, i) => /*#__PURE__*/_react.default.createElement("div", {
-    id: `comp-${i}`,
-    className: `${_playgroundModule.default.bgComponent} ${i ? _playgroundModule.default.bgComponentTwo : ''} ${animName === 'ImageParallax' ? _playgroundModule.default.imageComponent : ''}`,
-    ref: ref => compRefs.current[i] = ref,
-    key: `comp-${i}`,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 326,
-      columnNumber: 11
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: `bgLayer-${i}`,
-    className: _playgroundModule.default.bgLayer,
-    "data-motion-part": `BG_LAYER comp-${i}`,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 334,
-      columnNumber: 13
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: `bgMedia-${i}`,
-    className: `${_playgroundModule.default.bgMedia} ${effectToClassMap[getEffectFullName(animName, data)] || ''}`,
-    "data-motion-part": `BG_MEDIA comp-${i}`,
-    style: getCssVars(animName || 'BgCloseUp', data),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 339,
-      columnNumber: 15
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    id: `bgImage-${i}`,
-    className: `${_playgroundModule.default.bgImage} ${effectToClassMap[getEffectFullName(animName, data)] || ''}`,
-    "data-motion-part": `BG_IMG comp-${i}`,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 352,
-      columnNumber: 17
-    }
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    id: "content",
-    className: _playgroundModule.default.content,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 366,
-      columnNumber: 13
-    }
-  }, "Background Scrub")))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.panels,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 372,
-      columnNumber: 7
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.globalControls,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 373,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setSchemaEditor(value);
-    },
-    value: schemaEditor,
-    options: ['desktop', 'mobile', 'responsive'],
-    className: _playgroundModule.default.mainSelect,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 374,
-      columnNumber: 11
-    }
-  }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setSelectedRange(value);
-    },
-    value: selectedRange,
-    options: (_bgAnimations = bgAnimations[animName]) == null || (_bgAnimations = _bgAnimations.range) == null ? void 0 : _bgAnimations.enum,
-    className: _playgroundModule.default.mainSelect,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 383,
-      columnNumber: 11
-    }
-  }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setAnimName(value);
-      if (!bgAnimations[value].schema[selectedRange]) {
-        setSelectedRange(bgAnimations[value].range.enum[0]);
-      }
-      setData((0, _playgroundCommon.mapSchemaToDefaultData)(bgAnimations[value].schema[selectedRange] || {}, schemaEditor));
-    },
-    value: animName,
-    options: Object.keys(bgAnimations).map(name => [name, implementedAnimations.includes(name)]),
-    className: _playgroundModule.default.mainSelect,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 395,
-      columnNumber: 11
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _playgroundModule.default.controls,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 426,
-      columnNumber: 9
-    }
-  }, Object.entries(schema[selectedRange]).sort(([a], [b]) => {
-    if (a === 'duration' || b !== 'duration' && a === 'delay') {
-      return -1;
-    }
-    if (b === 'allowReplay') {
-      return -1;
-    }
-    return 0;
-  }).map(([name, controlProps], i) => /*#__PURE__*/_react.default.createElement(_controls.Control, (0, _extends2.default)({
-    key: `key-control-${i}`
-  }, controlProps, {
-    value: data[name],
-    label: name,
-    onChange: (_e, value) => handleControlChange(name, value),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 438,
-      columnNumber: 15
-    }
-  }))))));
-};
-exports.BackgroundScroll = BackgroundScroll;
-//# sourceMappingURL=animationMotionBgScroll.stories.js.map