@wix/motion 1.0.72 → 1.571.0

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

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

package/dist/cjs/motion.js

@@ -0,0 +1,130 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getElementAnimation = getElementAnimation;
+exports.getElementCSSAnimation = getElementCSSAnimation;
+exports.getScrubScene = getScrubScene;
+var _AnimationGroup = require("./AnimationGroup");
+var _utils = require("./utils");
+exports.getEasing = _utils.getEasing;
+var _webAnimations = require("./api/webAnimations");
+exports.getWebAnimation = _webAnimations.getWebAnimation;
+var _cssAnimations = require("./api/cssAnimations");
+exports.getCSSAnimation = _cssAnimations.getCSSAnimation;
+var _prepare = require("./api/prepare");
+exports.prepareAnimation = _prepare.prepareAnimation;
+var _common = require("./api/common");
+function getElementCSSAnimation(target, animationOptions) {
+  const namedEffect = (0, _common.getNamedEffect)(animationOptions);
+  if (!namedEffect) {
+    return null;
+  }
+  if (!namedEffect.style) {
+    // if this named effect does not have a style method, attempt to get group of Web Animations
+    if (animationOptions.effectId && target) {
+      return getElementAnimation(target, animationOptions.effectId);
+    }
+    return null;
+  }
+  const effectNames = namedEffect.getNames(animationOptions);
+  const element = typeof target === 'string' ? (0, _common.getElement)(target) : target;
+  const animations = element == null ? void 0 : element.getAnimations();
+  const animationNames = (animations == null ? void 0 : animations.map(anim => anim.animationName)) || [];
+  const filteredAnimations = [];
+  effectNames.forEach(name => {
+    if (animationNames.includes(name)) {
+      filteredAnimations.push(animations == null ? void 0 : animations.find(anim => anim.animationName === name));
+    }
+  });
+  return filteredAnimations != null && filteredAnimations.length ? new _AnimationGroup.AnimationGroup(filteredAnimations) : null;
+}
+function getElementAnimation(target, effectId) {
+  const element = typeof target === 'string' ? (0, _common.getElement)(target) : target;
+  // somehow get the right animations
+  const animations = element == null ? void 0 : element.getAnimations().filter(anim => {
+    const id = anim.id || anim.animationName;
+    // if no id/name just return all animations
+    return id ? id.startsWith(effectId) : true;
+  });
+  return animations != null && animations.length ? new _AnimationGroup.AnimationGroup(animations) : null;
+}
+function getScrubScene(target, animationOptions, trigger, sceneOptions = {}) {
+  const {
+    disabled,
+    allowActiveEvent,
+    ...rest
+  } = sceneOptions;
+  const animation = (0, _webAnimations.getWebAnimation)(target, animationOptions, trigger, rest);
+  let typeSpecificOptions = {};
+  if (trigger.trigger === 'view-progress' && !window.ViewTimeline) {
+    // TODO(ameerf): consider doing this only for bgscrub to not affect the other scroll effects
+    const viewSource = trigger.element || (0, _common.getElement)(trigger.componentId);
+    const {
+      ready
+    } = animation;
+    return animation.animations.map(partialAnimation => {
+      return {
+        /* we use getters for start and end in order to access the animation's start and end
+           only when initializing the scrub scene rather than immediately */
+        get start() {
+          return partialAnimation.start;
+        },
+        get end() {
+          return partialAnimation.end;
+        },
+        viewSource,
+        ready,
+        getProgress() {
+          return animation.getProgress();
+        },
+        effect(__, p) {
+          const {
+            activeDuration
+          } = partialAnimation.effect.getComputedTiming();
+          const {
+            delay
+          } = partialAnimation.effect.getTiming();
+          partialAnimation.currentTime = ((delay || 0) + (activeDuration || 0)) * p;
+        },
+        disabled,
+        destroy() {
+          partialAnimation.cancel();
+        }
+      };
+    });
+  } else if (trigger.trigger === 'pointer-move') {
+    const {
+      centeredToTarget,
+      transitionDuration,
+      transitionEasing
+    } = animationOptions;
+    typeSpecificOptions = {
+      target: animation.target,
+      centeredToTarget,
+      allowActiveEvent
+    };
+    if (animationOptions.customEffect && transitionDuration) {
+      typeSpecificOptions.transitionDuration = transitionDuration;
+      typeSpecificOptions.transitionEasing = (0, _utils.getJsEasing)(transitionEasing);
+    }
+  }
+  return {
+    ...typeSpecificOptions,
+    getProgress() {
+      return animation.getProgress();
+    },
+    effect(__, p, v, active) {
+      animation.progress(v ? {
+        // @ts-expect-error spread error on p
+        ...p,
+        v,
+        active
+      } : p);
+    },
+    disabled,
+    destroy() {
+      animation.cancel();
+    }
+  };
+}
+//# sourceMappingURL=motion.js.map

package/dist/cjs/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_AnimationGroup","require","_utils","exports","getEasing","_webAnimations","getWebAnimation","_cssAnimations","getCSSAnimation","_prepare","prepareAnimation","_common","getElementCSSAnimation","target","animationOptions","namedEffect","getNamedEffect","style","effectId","getElementAnimation","effectNames","getNames","element","getElement","animations","getAnimations","animationNames","map","anim","animationName","filteredAnimations","forEach","name","includes","push","find","length","AnimationGroup","filter","id","startsWith","getScrubScene","trigger","sceneOptions","disabled","allowActiveEvent","rest","animation","typeSpecificOptions","window","ViewTimeline","viewSource","componentId","ready","partialAnimation","start","end","getProgress","effect","__","p","activeDuration","getComputedTiming","delay","getTiming","currentTime","destroy","cancel","centeredToTarget","transitionDuration","transitionEasing","customEffect","getJsEasing","v","active","progress"],"sources":["../../src/motion.ts"],"sourcesContent":["import type {\n  AnimationOptions,\n  ScrubAnimationOptions,\n  TriggerVariant,\n  MouseAnimationInstance,\n  AnimationEffectAPI,\n  CustomMouseAnimationInstance,\n  ScrubScrollScene,\n  ScrubPointerScene,\n} from './types';\nimport { AnimationGroup } from './AnimationGroup';\nimport { getEasing, getJsEasing } from './utils';\nimport { getWebAnimation } from './api/webAnimations';\nimport { getCSSAnimation } from './api/cssAnimations';\nimport { prepareAnimation } from './api/prepare';\nimport { getElement, getNamedEffect } from './api/common';\n\nfunction getElementCSSAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n): AnimationGroup | null {\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  if (!namedEffect) {\n    return null;\n  }\n\n  if (!namedEffect.style) {\n    // if this named effect does not have a style method, attempt to get group of Web Animations\n    if (animationOptions.effectId && target) {\n      return getElementAnimation(target, animationOptions.effectId);\n    }\n\n    return null;\n  }\n\n  const effectNames = namedEffect.getNames(animationOptions);\n  const element = typeof target === 'string' ? getElement(target) : target;\n  const animations = element?.getAnimations();\n  const animationNames =\n    animations?.map((anim) => (anim as CSSAnimation).animationName) ||\n    ([] as string[]);\n  const filteredAnimations: CSSAnimation[] = [];\n\n  effectNames.forEach((name) => {\n    if (animationNames.includes(name)) {\n      filteredAnimations.push(\n        animations?.find(\n          (anim) => (anim as CSSAnimation).animationName === name,\n        ) as CSSAnimation,\n      );\n    }\n  });\n\n  return filteredAnimations?.length\n    ? new AnimationGroup(filteredAnimations)\n    : null;\n}\n\nfunction getElementAnimation(\n  target: HTMLElement | string,\n  effectId: string,\n): AnimationGroup | null {\n  const element = typeof target === 'string' ? getElement(target) : target;\n  // somehow get the right animations\n  const animations = element\n    ?.getAnimations()\n    .filter((anim: Animation | CSSAnimation) => {\n      const id = anim.id || (anim as CSSAnimation).animationName;\n      // if no id/name just return all animations\n      return id ? id.startsWith(effectId) : true;\n    });\n\n  return animations?.length ? new AnimationGroup(animations) : null;\n}\n\nfunction getScrubScene(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger: Partial<TriggerVariant> & { element?: HTMLElement },\n  sceneOptions: Record<string, any> = {},\n): ScrubScrollScene[] | ScrubPointerScene {\n  const { disabled, allowActiveEvent, ...rest } = sceneOptions;\n  const animation = getWebAnimation(target, animationOptions, trigger, rest);\n\n  let typeSpecificOptions = {} as Record<string, any>;\n\n  if (trigger.trigger === 'view-progress' && !window.ViewTimeline) {\n    // TODO(ameerf): consider doing this only for bgscrub to not affect the other scroll effects\n    const viewSource = trigger.element || getElement(trigger.componentId!);\n    const { ready } = animation as AnimationGroup;\n\n    return (animation as AnimationGroup).animations.map((partialAnimation) => {\n      return {\n        /* we use getters for start and end in order to access the animation's start and end\n           only when initializing the scrub scene rather than immediately */\n        get start() {\n          return partialAnimation.start;\n        },\n        get end() {\n          return partialAnimation.end;\n        },\n        viewSource,\n        ready,\n        getProgress() {\n          return (animation as AnimationGroup).getProgress();\n        },\n        effect(__: any, p: number) {\n          const { activeDuration } =\n            partialAnimation.effect!.getComputedTiming();\n          const { delay } = partialAnimation.effect!.getTiming();\n\n          partialAnimation.currentTime =\n            ((delay || 0) + ((activeDuration as number) || 0)) * p;\n        },\n        disabled,\n        destroy() {\n          partialAnimation.cancel();\n        },\n      } as ScrubScrollScene;\n    });\n  } else if (trigger.trigger === 'pointer-move') {\n    const { centeredToTarget, transitionDuration, transitionEasing } =\n      animationOptions as ScrubAnimationOptions;\n\n    typeSpecificOptions = {\n      target: (animation as MouseAnimationInstance).target,\n      centeredToTarget,\n      allowActiveEvent,\n    };\n\n    if (animationOptions.customEffect && transitionDuration) {\n      typeSpecificOptions.transitionDuration = transitionDuration;\n      typeSpecificOptions.transitionEasing = getJsEasing(transitionEasing);\n    }\n  }\n\n  return {\n    ...typeSpecificOptions,\n    getProgress() {\n      return (\n        animation as AnimationGroup | CustomMouseAnimationInstance\n      ).getProgress();\n    },\n    effect(\n      __: any,\n      p: number | { x: number; y: number },\n      v?: { x: number; y: number },\n      active?: boolean,\n    ) {\n      animation.progress(\n        v\n          ? {\n              // @ts-expect-error spread error on p\n              ...p,\n              v,\n              active,\n            }\n          : p,\n      );\n    },\n    disabled,\n    destroy() {\n      animation.cancel();\n    },\n  } as ScrubPointerScene;\n}\n\nexport {\n  getCSSAnimation,\n  getWebAnimation,\n  getElementCSSAnimation,\n  getElementAnimation,\n  getScrubScene,\n  prepareAnimation,\n  getEasing,\n};\n\nexport type { AnimationGroup };\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,371 @@
+"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/4b7de8925f0e24d7/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: '',
+        type: 'ScrubAnimationOptions',
+        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: '',
+        type: 'ScrubAnimationOptions',
+        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: 314,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _playgroundModule.default.components,
+    ref: siteRef,
+    style: {
+      '--attachment': attachment
+    },
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 318,
+      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: 328,
+      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: 336,
+      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: 341,
+      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: 354,
+      columnNumber: 17
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "content",
+    className: _playgroundModule.default.content,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 368,
+      columnNumber: 13
+    }
+  }, "Background Scrub")))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _playgroundModule.default.panels,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 374,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _playgroundModule.default.globalControls,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 375,
+      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: 376,
+      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: 385,
+      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: 397,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _playgroundModule.default.controls,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 428,
+      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: 440,
+      columnNumber: 15
+    }
+  }))))));
+};
+exports.BackgroundScroll = BackgroundScroll;
+//# sourceMappingURL=animationMotionBgScroll.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_fizban","_index","_controls","_playgroundModule","_backgroundScroll","_playgroundCommon","_effectsKit","_jsxFileName","_default","exports","default","title","effectToClassMap","BgParallax","styles","bgParallax","BgReveal","bgReveal","BgFake3D","bgFakeThreeD","BgSkew","bgSkew","BgRotate","bgRotate","BgPan","bgPan","ImageParallax","imageParallax","BgZoomIn","bgZoomIn","BgZoomOut","bgZoomOut","effectToCssVars","params","Math","tan","Number","angle","PI","cos","sin","speed","getCssVars","name","styleMapper","_","getEffectFullName","direction","BackgroundScroll","_bgAnimations","siteRef","React","useRef","compRefs","stageRef","animationGroupRefs","animationSceneRefs","scrollRefs","attachment","useState","schemaEditor","setSchemaEditor","selectedRange","setSelectedRange","bgAnimations","Object","fromEntries","getPresets","CONFIG","schemaMapper","bgScrub","map","preset","schema","range","useEffect","setData","mapSchemaToDefaultData","animName","implementedAnimations","keys","defs","filter","animationName","setAnimName","data","handleControlChange","value","currentData","cleanContainerRules","styleSheet","document","styleSheets","cssRules","i","length","cssText","startsWith","deleteRule","insertBgRotateContainerRules","insertRule","sqrt","pow","animateBg","el","animationScene","animationGroup","scroll","easing","window","ViewTimeline","_animationGroup","cancel","getWebAnimation","id","type","namedEffect","fill","iterations","componentId","element","trigger","play","_scroll","getScrubScene","startOffset","offset","endOffset","destroy","ScrollLib","root","current","observeViewportEntry","scenes","start","forEach","elId","_document$getElementB","getElementById","getAnimations","a","createElement","className","stage","scrollStage","ref","__self","__source","fileName","lineNumber","columnNumber","components","style","bgComponent","bgComponentTwo","imageComponent","key","bgLayer","bgMedia","bgImage","content","panels","globalControls","SelectInput","onChange","event","target","options","mainSelect","enum","includes","controls","entries","sort","b","controlProps","Control","_extends2","label","_e"],"sources":["../../../src/playground/animationMotionBgScroll.stories.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Scroll as ScrollLib } from 'fizban';\n\nimport {\n  AnimationGroup,\n  BackgroundScrollAnimation,\n  getWebAnimation,\n  getScrubScene,\n} from '../index';\nimport { Control, SelectInput } from './controls';\nimport styles from './playground.module.scss';\nimport { backgroundScrollAnimations as defs } from '../library/backgroundScroll';\n\nimport {\n  mapSchemaToDefaultData,\n  SchemaEditor,\n  schemaMapper,\n} from './playground-common';\n\nimport {\n  getPresets,\n  CONFIG,\n  AllEffectsNames,\n  OneOfBgScrubEffects,\n  SchemaValues,\n  ScrollEffectConfig,\n} from '@wix/effects-kit';\n\nimport type { Meta } from '@wix/yoshi-storybook-dependencies';\nimport type { EffectScrollRange } from '../index';\n\nexport default {\n  title: 'Animation Playground/Background Scroll',\n} as Meta;\n\nconst effectToClassMap = {\n  BgParallax: styles.bgParallax,\n  BgReveal: styles.bgReveal,\n  BgFake3D: styles.bgFakeThreeD,\n  BgSkew: styles.bgSkew,\n  BgRotate: styles.bgRotate,\n  BgPan: styles.bgPan,\n  ImageParallax: styles.imageParallax,\n  BgZoomIn: styles.bgZoomIn,\n  BgZoomOut: styles.bgZoomOut,\n};\n\nconst effectToCssVars = {\n  BgSkew: (params: any) => ({\n    '--tan-angle': `${Math.tan((Number(params.angle || 20) * Math.PI) / 180)}`,\n  }),\n  BgRotate: (params: any) => ({\n    '--cos-angle': `${Math.cos((Number(params.angle || 22) * Math.PI) / 180)}`,\n    '--sin-angle': `${Math.sin((Number(params.angle || 22) * Math.PI) / 180)}`,\n  }),\n  BgPan: (params: any) => ({\n    '--speed': `${Number(params.speed || 0.2)}`,\n  }),\n  ImageParallax: (params: any) => ({\n    '--speed': `${Number(params.speed || 1.5)}`,\n  }),\n};\n\nfunction getCssVars(\n  name: BackgroundScrollAnimation['type'],\n  params: any,\n): CSSProperties {\n  const styleMapper =\n    effectToCssVars[name as keyof typeof effectToCssVars] || ((_) => {});\n  return styleMapper(params) as CSSProperties;\n}\n\nfunction getEffectFullName(\n  name: BackgroundScrollAnimation['type'],\n  params: any,\n): string {\n  return name !== 'BgZoom'\n    ? name\n    : params.direction === 'in'\n    ? 'BgZoomIn'\n    : 'BgZoomOut';\n}\nexport const BackgroundScroll: React.FC<any> = () => {\n  const siteRef = React.useRef<HTMLDivElement>(null);\n\n  const compRefs = React.useRef<HTMLDivElement[]>([]);\n\n  const stageRef = React.useRef<HTMLDivElement>(null);\n\n  const animationGroupRefs = React.useRef<AnimationGroup[]>([]);\n  const animationSceneRefs = React.useRef<ReturnType<typeof getScrubScene>[]>(\n    [],\n  );\n  const scrollRefs = React.useRef<(typeof ScrollLib)[]>([]);\n\n  const [attachment] = React.useState<string>('scroll');\n\n  const [schemaEditor, setSchemaEditor] =\n    React.useState<SchemaEditor>('responsive');\n\n  const [selectedRange, setSelectedRange] =\n    React.useState<EffectScrollRange>('continuous');\n\n  const bgAnimations = Object.fromEntries(\n    getPresets(\n      CONFIG[schemaMapper[schemaEditor]].bgScrub,\n      ['background', 'image'],\n      true,\n    ).map((preset) => [\n      preset.name,\n      {\n        schema: preset.schema,\n        range: (preset as ScrollEffectConfig<OneOfBgScrubEffects>).range,\n      },\n    ]),\n  ) as Record<AllEffectsNames, ScrollEffectConfig<OneOfBgScrubEffects>>;\n\n  React.useEffect(() => {\n    setData(\n      mapSchemaToDefaultData(\n        bgAnimations[animName].schema[\n          selectedRange\n        ] as ScrollEffectConfig<OneOfBgScrubEffects>['schema'][EffectScrollRange],\n        schemaEditor,\n      ),\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schemaEditor, selectedRange]);\n\n  const implementedAnimations = Object.keys(defs).filter(\n    (animationName) => bgAnimations[animationName as keyof typeof defs],\n  ) as AllEffectsNames[];\n\n  const [animName, setAnimName] = React.useState<keyof typeof defs>(\n    implementedAnimations[0] as keyof typeof defs,\n  );\n\n  const schema = (bgAnimations[animName].schema ||\n    {}) as ScrollEffectConfig<OneOfBgScrubEffects>['schema'];\n\n  const [data, setData] = React.useState<Record<string, any>>(\n    mapSchemaToDefaultData(schema[selectedRange], schemaEditor),\n  );\n\n  function handleControlChange(name: string, value: any) {\n    setData((currentData) => ({\n      ...currentData,\n      [name]: value,\n    }));\n  }\n\n  function cleanContainerRules() {\n    const styleSheet = document.styleSheets[0];\n    const { cssRules } = styleSheet;\n    for (let i = 0; i < cssRules.length; i++) {\n      if (cssRules[i].cssText.startsWith('@container')) {\n        styleSheet.deleteRule(i);\n        i--;\n      }\n    }\n  }\n\n  function insertBgRotateContainerRules(angle: number) {\n    const styleSheet = document.styleSheets[0];\n\n    /*\n    @container (max-aspect-ratio: tan(angle)) {\n        #bgMedia-0, #bgMedia-1 {\n            height: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqw * sin(angle)));\n        }\n    }\n    */\n    styleSheet.insertRule(\n      `@container (max-aspect-ratio: ${Math.tan(\n        (angle * Math.PI) / 180,\n      )}) { #bgMedia-0, #bgMedia-1 { height: calc(100% + min(${\n        100 *\n        (Math.sqrt(1 + Math.pow(Math.tan((angle * Math.PI) / 180), 2)) - 1)\n      }%, ${100 * Math.sin((angle * Math.PI) / 180)}cqw)) } }`,\n      0,\n    );\n\n    /*\n    @container (max-aspect-ratio: tan(90 - angle)) {\n        #bgMedia-0, #bgMedia-1 {\n            width: calc(100% + min(100% * (sqrt(1 + tan(angle)^2) - 1), 100cqh * sin(angle)));\n        }\n    }\n    */\n    styleSheet.insertRule(\n      `@container (min-aspect-ratio: ${Math.tan(\n        ((90 - angle) * Math.PI) / 180,\n      )}) { #bgMedia-0, #bgMedia-1 { width: calc(100% + min(${\n        100 *\n        (Math.sqrt(1 + Math.pow(Math.tan((angle * Math.PI) / 180), 2)) - 1)\n      }%, ${100 * Math.sin((angle * Math.PI) / 180)}cqh)) } }`,\n      0,\n    );\n  }\n\n  function animateBg(\n    el: HTMLElement,\n    name: string,\n    animationScene: ReturnType<typeof getScrubScene>,\n    animationGroup: AnimationGroup,\n    scroll: typeof ScrollLib,\n    { easing = '', range = selectedRange, ...params },\n  ) {\n    cleanContainerRules();\n    if (name === 'BgRotate') {\n      insertBgRotateContainerRules(params.angle || 22);\n    }\n    if (window.ViewTimeline) {\n      animationGroup?.cancel();\n\n      animationGroup = getWebAnimation(\n        el.id,\n        {\n          id: '',\n          type: 'ScrubAnimationOptions',\n          namedEffect: {\n            id: '',\n            type: name,\n            range,\n            ...params,\n          } as BackgroundScrollAnimation,\n          fill: 'both',\n          iterations: 1,\n          easing,\n        },\n        { componentId: el.id, element: el, trigger: 'view-progress', id: '' },\n      ) as AnimationGroup;\n      animationGroup!.play();\n    } else {\n      animationScene = getScrubScene(\n        el.id,\n        {\n          id: '',\n          type: 'ScrubAnimationOptions',\n          namedEffect: {\n            id: '',\n            type: name,\n            range,\n            ...params,\n          } as BackgroundScrollAnimation,\n          fill: 'both',\n          iterations: 1,\n          startOffset: {\n            name: 'cover',\n            offset: {\n              value: 0,\n              type: 'percentage',\n            },\n          },\n          endOffset: {\n            name: 'cover',\n            offset: {\n              value: 100,\n              type: 'percentage',\n            },\n          },\n          easing,\n        },\n        { componentId: el.id, element: el, trigger: 'view-progress', id: '' },\n      );\n\n      scroll?.destroy();\n\n      scroll = new ScrollLib({\n        root: stageRef.current,\n        observeViewportEntry: false,\n        scenes: [animationScene],\n      });\n      scroll.start();\n    }\n  }\n\n  React.useEffect(() => {\n    for (let i = 0; i < 2; ++i) {\n      animateBg(\n        compRefs.current[i]!,\n        animName,\n        animationSceneRefs.current[i],\n        animationGroupRefs.current[i],\n        scrollRefs.current[i],\n        {\n          ...data,\n        },\n      );\n    }\n    return () => {\n      if (window.ViewTimeline) {\n        [\n          'bgLayer-0',\n          'bgLayer-1',\n          'bgMedia-0',\n          'bgMedia-1',\n          'bgImage-0',\n          'bgImage-1',\n        ].forEach((elId) => {\n          document\n            .getElementById(elId)\n            ?.getAnimations()\n            .forEach((a) => {\n              a.cancel();\n            });\n        });\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [animName, data]);\n\n  return (\n    <div\n      className={`${styles.stage} ${styles.scrollStage} ${styles.bgScrub}`}\n      ref={stageRef}\n    >\n      <div\n        className={styles.components}\n        ref={siteRef}\n        style={\n          {\n            '--attachment': attachment,\n          } as CSSProperties\n        }\n      >\n        {[0, 1].map((_, i) => (\n          <div\n            id={`comp-${i}`}\n            className={`${styles.bgComponent} ${\n              i ? styles.bgComponentTwo : ''\n            } ${animName === 'ImageParallax' ? styles.imageComponent : ''}`}\n            ref={(ref: HTMLDivElement | null) => (compRefs.current[i] = ref!)}\n            key={`comp-${i}`}\n          >\n            <div\n              id={`bgLayer-${i}`}\n              className={styles.bgLayer}\n              data-motion-part={`BG_LAYER comp-${i}`}\n            >\n              <div\n                id={`bgMedia-${i}`}\n                className={`${styles.bgMedia} ${\n                  effectToClassMap[\n                    getEffectFullName(\n                      animName,\n                      data,\n                    ) as keyof typeof effectToClassMap\n                  ] || ''\n                }`}\n                data-motion-part={`BG_MEDIA comp-${i}`}\n                style={getCssVars(animName || 'BgCloseUp', data)}\n              >\n                <div\n                  id={`bgImage-${i}`}\n                  className={`${styles.bgImage} ${\n                    effectToClassMap[\n                      getEffectFullName(\n                        animName,\n                        data,\n                      ) as keyof typeof effectToClassMap\n                    ] || ''\n                  }`}\n                  data-motion-part={`BG_IMG comp-${i}`}\n                ></div>\n              </div>\n            </div>\n            <div id=\"content\" className={styles.content}>\n              Background Scrub\n            </div>\n          </div>\n        ))}\n      </div>\n      <div className={styles.panels}>\n        <div className={styles.globalControls}>\n          <SelectInput\n            onChange={(event) => {\n              const value: SchemaEditor = event.target.value;\n              setSchemaEditor(value);\n            }}\n            value={schemaEditor}\n            options={['desktop', 'mobile', 'responsive']}\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value: EffectScrollRange = event.target.value;\n              setSelectedRange(value);\n            }}\n            value={selectedRange}\n            options={\n              bgAnimations[animName as AllEffectsNames]?.range\n                ?.enum as EffectScrollRange[]\n            }\n            className={styles.mainSelect}\n          />\n          <SelectInput\n            onChange={(event) => {\n              const value = event.target.value;\n              setAnimName(value);\n              if (\n                !bgAnimations[value as typeof animName].schema[selectedRange]\n              ) {\n                setSelectedRange(\n                  bgAnimations[value as typeof animName].range.enum![0],\n                );\n              }\n              setData(\n                mapSchemaToDefaultData(\n                  (bgAnimations[value as typeof animName].schema[\n                    selectedRange\n                  ] ||\n                    {}) as ScrollEffectConfig<OneOfBgScrubEffects>['schema'][EffectScrollRange],\n                  schemaEditor,\n                ),\n              );\n            }}\n            value={animName}\n            options={\n              Object.keys(bgAnimations).map((name) => [\n                name,\n                implementedAnimations.includes(name as AllEffectsNames),\n              ]) as [string, boolean][]\n            }\n            className={styles.mainSelect}\n          />\n        </div>\n        <div className={styles.controls}>\n          {Object.entries(schema[selectedRange]!)\n            .sort(([a], [b]) => {\n              if (a === 'duration' || (b !== 'duration' && a === 'delay')) {\n                return -1;\n              }\n              if (b === 'allowReplay') {\n                return -1;\n              }\n              return 0;\n            })\n            .map(([name, controlProps], i) => (\n              <Control\n                key={`key-control-${i}`}\n                {...(controlProps as SchemaValues)}\n                value={data[name]}\n                label={name}\n                onChange={(_e, value) => handleControlChange(name, value)}\n              />\n            ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","ignoreList":[]}