@wix/motion 1.665.0 → 2.0.0-rc.3

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

@@ -1,94 +0,0 @@
-import { toKeyframeValue } from '../../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
-  }
-};
-export function getNames(_) {
-  return ['motion-turnScroll'];
-}
-export 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`);
-    });
-  }
-}
-export function web(options, dom) {
-  prepare(options, dom);
-  return style(options, true);
-}
-export function style(options, asWeb) {
-  if (asWeb === void 0) {
-    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 * ${toKeyframeValue({}, '--motion-left', false, 'calc(100vw - 100%)')} - 100%)`;
-  const endXLeft = `calc(100vw - ${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(${toKeyframeValue(custom, '--motion-turn-translate-from', asWeb)}) scale(${toKeyframeValue(custom, '--motion-turn-scale-from', asWeb)}) rotate(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-turn-rotation-from', asWeb)}))`
-    }, {
-      transform: `translateX(${toKeyframeValue(custom, '--motion-turn-translate-to', asWeb)}) scale(${toKeyframeValue(custom, '--motion-turn-scale-to', asWeb)}) rotate(calc(${toKeyframeValue({}, '--comp-rotate-z', false, '0deg')} + ${toKeyframeValue(custom, '--motion-turn-rotation-to', asWeb)}))`
-    }]
-  }];
-}
-//# sourceMappingURL=TurnScroll.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["toKeyframeValue","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","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/esm/library/scroll/index.js

@@ -1,41 +0,0 @@
-import * as ArcScroll from './ArcScroll';
-import * as BlurScroll from './BlurScroll';
-import * as FadeScroll from './FadeScroll';
-import * as FlipScroll from './FlipScroll';
-import * as GrowScroll from './GrowScroll';
-import * as MoveScroll from './MoveScroll';
-import * as PanScroll from './PanScroll';
-import * as ParallaxScroll from './ParallaxScroll';
-import * as RevealScroll from './RevealScroll';
-import * as ShapeScroll from './ShapeScroll';
-import * as ShuttersScroll from './ShuttersScroll';
-import * as ShrinkScroll from './ShrinkScroll';
-import * as SkewPanScroll from './SkewPanScroll';
-import * as SlideScroll from './SlideScroll';
-import * as Spin3dScroll from './Spin3dScroll';
-import * as SpinScroll from './SpinScroll';
-import * as StretchScroll from './StretchScroll';
-import * as TiltScroll from './TiltScroll';
-import * as TurnScroll from './TurnScroll';
-export const 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/esm/library/scroll/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ArcScroll","BlurScroll","FadeScroll","FlipScroll","GrowScroll","MoveScroll","PanScroll","ParallaxScroll","RevealScroll","ShapeScroll","ShuttersScroll","ShrinkScroll","SkewPanScroll","SlideScroll","Spin3dScroll","SpinScroll","StretchScroll","TiltScroll","TurnScroll","scrollAnimations"],"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,OAAO,KAAKA,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,SAAS,MAAM,aAAa;AACxC,OAAO,KAAKC,cAAc,MAAM,kBAAkB;AAClD,OAAO,KAAKC,YAAY,MAAM,gBAAgB;AAC9C,OAAO,KAAKC,WAAW,MAAM,eAAe;AAC5C,OAAO,KAAKC,cAAc,MAAM,kBAAkB;AAClD,OAAO,KAAKC,YAAY,MAAM,gBAAgB;AAC9C,OAAO,KAAKC,aAAa,MAAM,iBAAiB;AAChD,OAAO,KAAKC,WAAW,MAAM,eAAe;AAC5C,OAAO,KAAKC,YAAY,MAAM,gBAAgB;AAC9C,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,aAAa,MAAM,iBAAiB;AAChD,OAAO,KAAKC,UAAU,MAAM,cAAc;AAC1C,OAAO,KAAKC,UAAU,MAAM,cAAc;AAG1C,OAAO,MAAMC,gBAAkC,GAAG;EAChDnB,SAAS;EACTC,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/esm/library/scroll/test/testUtils.js

@@ -1,4 +0,0 @@
-export const baseMockOptions = {
-  id: 'test-id'
-};
-//# sourceMappingURL=testUtils.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["baseMockOptions","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":"AAEA,OAAO,MAAMA,eAAsC,GAAG;EACpDC,EAAE,EAAE;AACN,CAAC","ignoreList":[]}

package/dist/esm/motion.js

@@ -1,142 +0,0 @@
-import { AnimationGroup } from './AnimationGroup';
-import { getEasing, getJsEasing } from './utils';
-import { getWebAnimation } from './api/webAnimations';
-import { getCSSAnimation } from './api/cssAnimations';
-import { prepareAnimation } from './api/prepare';
-import { getElement, getNamedEffect } from './api/common';
-function getElementCSSAnimation(target, animationOptions) {
-  const namedEffect = 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' ? 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(filteredAnimations) : null;
-}
-function getElementAnimation(target, effectId) {
-  const element = typeof target === 'string' ? 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(animations) : null;
-}
-function getScrubScene(target, animationOptions, trigger, sceneOptions) {
-  if (sceneOptions === void 0) {
-    sceneOptions = {};
-  }
-  const {
-    disabled,
-    allowActiveEvent,
-    ...rest
-  } = sceneOptions;
-  const animation = getWebAnimation(target, animationOptions, trigger, rest);
-  if (!animation) {
-    return null;
-  }
-  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 || 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 = 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();
-    }
-  };
-}
-function getAnimation(target, animationOptions, trigger, reducedMotion) {
-  if (reducedMotion === void 0) {
-    reducedMotion = false;
-  }
-  const animation = getElementCSSAnimation(target, animationOptions);
-  if (animation) {
-    animation.ready = new Promise(resolve => {
-      prepareAnimation(target, animationOptions, resolve);
-    });
-    return animation;
-  }
-  return getWebAnimation(target, animationOptions, trigger, {
-    reducedMotion
-  });
-}
-export { getCSSAnimation, getWebAnimation, getElementCSSAnimation, getElementAnimation, getScrubScene, prepareAnimation, getAnimation, getEasing };
-//# sourceMappingURL=motion.js.map

package/dist/esm/motion.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["AnimationGroup","getEasing","getJsEasing","getWebAnimation","getCSSAnimation","prepareAnimation","getElement","getNamedEffect","getElementCSSAnimation","target","animationOptions","namedEffect","style","effectId","getElementAnimation","effectNames","getNames","element","animations","getAnimations","animationNames","map","anim","animationName","filteredAnimations","forEach","name","includes","push","find","length","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","v","active","progress","getAnimation","reducedMotion","Promise","resolve"],"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 | null {\n  const { disabled, allowActiveEvent, ...rest } = sceneOptions;\n  const animation = getWebAnimation(target, animationOptions, trigger, rest);\n\n  if (!animation) {\n    return null;\n  }\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\nfunction getAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n  reducedMotion: boolean = false,\n): AnimationGroup | MouseAnimationInstance | null {\n  const animation = getElementCSSAnimation(target, animationOptions);\n\n  if (animation) {\n    animation.ready = new Promise((resolve) => {\n      prepareAnimation(target, animationOptions, resolve);\n    });\n\n    return animation;\n  }\n\n  return getWebAnimation(target, animationOptions, trigger, { reducedMotion });\n}\n\nexport {\n  getCSSAnimation,\n  getWebAnimation,\n  getElementCSSAnimation,\n  getElementAnimation,\n  getScrubScene,\n  prepareAnimation,\n  getAnimation,\n  getEasing,\n};\n\nexport type { AnimationGroup };\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,284 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Scroll as ScrollLib } from 'fizban';
-import { getWebAnimation, getScrubScene } from '../index';
-import { Control, SelectInput } from './controls';
-import styles from './playground.module.scss';
-import { backgroundScrollAnimations as defs } from '../library/backgroundScroll';
-import { mapSchemaToDefaultData, schemaMapper } from './playground-common';
-import { getPresets, CONFIG } from '@wix/effects-kit';
-export default {
-  title: 'Animation Playground/Background Scroll'
-};
-const effectToClassMap = {
-  BgParallax: styles.bgParallax,
-  BgReveal: styles.bgReveal,
-  BgFake3D: styles.bgFakeThreeD,
-  BgSkew: styles.bgSkew,
-  BgRotate: styles.bgRotate,
-  BgPan: styles.bgPan,
-  ImageParallax: styles.imageParallax,
-  BgZoomIn: styles.bgZoomIn,
-  BgZoomOut: styles.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';
-}
-export const BackgroundScroll = () => {
-  var _bgAnimations;
-  const siteRef = React.useRef(null);
-  const compRefs = React.useRef([]);
-  const stageRef = React.useRef(null);
-  const animationGroupRefs = React.useRef([]);
-  const animationSceneRefs = React.useRef([]);
-  const scrollRefs = React.useRef([]);
-  const [attachment] = React.useState('scroll');
-  const [schemaEditor, setSchemaEditor] = React.useState('responsive');
-  const [selectedRange, setSelectedRange] = React.useState('continuous');
-  const bgAnimations = Object.fromEntries(getPresets(CONFIG[schemaMapper[schemaEditor]].bgScrub, ['background', 'image'], true).map(preset => [preset.name, {
-    schema: preset.schema,
-    range: preset.range
-  }]));
-  React.useEffect(() => {
-    setData(mapSchemaToDefaultData(bgAnimations[animName].schema[selectedRange], schemaEditor));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [schemaEditor, selectedRange]);
-  const implementedAnimations = Object.keys(defs).filter(animationName => bgAnimations[animationName]);
-  const [animName, setAnimName] = React.useState(implementedAnimations[0]);
-  const schema = bgAnimations[animName].schema || {};
-  const [data, setData] = React.useState(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, _ref) {
-    let {
-      easing = '',
-      range = selectedRange,
-      ...params
-    } = _ref;
-    cleanContainerRules();
-    if (name === 'BgRotate') {
-      insertBgRotateContainerRules(params.angle || 22);
-    }
-    if (window.ViewTimeline) {
-      var _animationGroup;
-      (_animationGroup = animationGroup) == null || _animationGroup.cancel();
-      animationGroup = 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 = 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 ScrollLib({
-        root: stageRef.current,
-        observeViewportEntry: false,
-        scenes: [animationScene]
-      });
-      scroll.start();
-    }
-  }
-  React.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.createElement("div", {
-    className: `${styles.stage} ${styles.scrollStage} ${styles.bgScrub}`,
-    ref: stageRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.components,
-    ref: siteRef,
-    style: {
-      '--attachment': attachment
-    }
-  }, [0, 1].map((_, i) => /*#__PURE__*/React.createElement("div", {
-    id: `comp-${i}`,
-    className: `${styles.bgComponent} ${i ? styles.bgComponentTwo : ''} ${animName === 'ImageParallax' ? styles.imageComponent : ''}`,
-    ref: ref => compRefs.current[i] = ref,
-    key: `comp-${i}`
-  }, /*#__PURE__*/React.createElement("div", {
-    id: `bgLayer-${i}`,
-    className: styles.bgLayer,
-    "data-motion-part": `BG_LAYER comp-${i}`
-  }, /*#__PURE__*/React.createElement("div", {
-    id: `bgMedia-${i}`,
-    className: `${styles.bgMedia} ${effectToClassMap[getEffectFullName(animName, data)] || ''}`,
-    "data-motion-part": `BG_MEDIA comp-${i}`,
-    style: getCssVars(animName || 'BgCloseUp', data)
-  }, /*#__PURE__*/React.createElement("div", {
-    id: `bgImage-${i}`,
-    className: `${styles.bgImage} ${effectToClassMap[getEffectFullName(animName, data)] || ''}`,
-    "data-motion-part": `BG_IMG comp-${i}`
-  }))), /*#__PURE__*/React.createElement("div", {
-    id: "content",
-    className: styles.content
-  }, "Background Scrub")))), /*#__PURE__*/React.createElement("div", {
-    className: styles.panels
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.globalControls
-  }, /*#__PURE__*/React.createElement(SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setSchemaEditor(value);
-    },
-    value: schemaEditor,
-    options: ['desktop', 'mobile', 'responsive'],
-    className: styles.mainSelect
-  }), /*#__PURE__*/React.createElement(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: styles.mainSelect
-  }), /*#__PURE__*/React.createElement(SelectInput, {
-    onChange: event => {
-      const value = event.target.value;
-      setAnimName(value);
-      if (!bgAnimations[value].schema[selectedRange]) {
-        setSelectedRange(bgAnimations[value].range.enum[0]);
-      }
-      setData(mapSchemaToDefaultData(bgAnimations[value].schema[selectedRange] || {}, schemaEditor));
-    },
-    value: animName,
-    options: Object.keys(bgAnimations).map(name => [name, implementedAnimations.includes(name)]),
-    className: styles.mainSelect
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles.controls
-  }, Object.entries(schema[selectedRange]).sort((_ref2, _ref3) => {
-    let [a] = _ref2;
-    let [b] = _ref3;
-    if (a === 'duration' || b !== 'duration' && a === 'delay') {
-      return -1;
-    }
-    if (b === 'allowReplay') {
-      return -1;
-    }
-    return 0;
-  }).map((_ref4, i) => {
-    let [name, controlProps] = _ref4;
-    return /*#__PURE__*/React.createElement(Control, _extends({
-      key: `key-control-${i}`
-    }, controlProps, {
-      value: data[name],
-      label: name,
-      onChange: (_e, value) => handleControlChange(name, value)
-    }));
-  }))));
-};
-//# sourceMappingURL=animationMotionBgScroll.stories.js.map