@wix/motion 1.644.0 → 1.646.0

package/README.md

@@ -30,7 +30,6 @@ import { getWebAnimation } from '@wix/motion';
 const animation = getWebAnimation(
   document.getElementById('myElement'),
   {
-    type: 'TimeAnimationOptions',
     namedEffect: { type: 'FadeIn' },
     duration: 1000,
     easing: 'easeOut'
@@ -50,7 +49,6 @@ import { getScrubScene } from '@wix/motion';
 const scene = getScrubScene(
   document.getElementById('scrollElement'),
   {
-    type: 'ScrubAnimationOptions',
     namedEffect: { 
       type: 'ParallaxScroll',
       speed: 0.5

package/dist/cjs/api/common.js

@@ -9,6 +9,7 @@ exports.getElementMotionPart = getElementMotionPart;
 exports.getLength = getLength;
 exports.getNamedEffect = getNamedEffect;
 exports.getRanges = getRanges;
+exports.isNotAScrubTrigger = isNotAScrubTrigger;
 exports.measure = measure;
 exports.mutate = mutate;
 var _scroll = require("../library/scroll");
@@ -102,7 +103,7 @@ function getNamedEffect(animation) {
   }
   return null;
 }
-function getEffectsData(animations, effectId) {
+function getEffectsData(animations, trigger, effectId) {
   // process each AnimationData object into a KeyframeEffect object
   return animations.map((effect, index) => {
     // prepare the KeyframeEffectOptions object
@@ -114,8 +115,8 @@ function getEffectsData(animations, effectId) {
       direction: getDirection(effect)
     };
 
-    // if this is a TimeAnimation then set the duration and delay as time values
-    if (effect.type.startsWith('Time')) {
+    // if this is a time-based animation then set the duration and delay as time values
+    if (isNotAScrubTrigger(trigger)) {
       effectOptions.duration = effect.duration;
       effectOptions.delay = effect.delay || 0;
     } else {
@@ -138,4 +139,7 @@ function getEffectsData(animations, effectId) {
     };
   });
 }
+function isNotAScrubTrigger(trigger) {
+  return !trigger || trigger.trigger !== 'pointer-move' && trigger.trigger !== 'view-progress';
+}
 //# sourceMappingURL=common.js.map

package/dist/cjs/api/common.js.map

@@ -1 +1 @@
-{"version":3,"names":["_scroll","require","_entrance","_ongoing","_mouse","_backgroundScroll","_utils","_fastdom","_interopRequireDefault","getElement","id","ownerDocument","document","getElementById","getElementMotionPart","element","part","matches","querySelector","getDirection","effect","alternate","reversed","getLength","length","value","getCssUnits","type","getRange","range","add","isEnd","name","offset","getRanges","start","startOffset","startOffsetAdd","end","endOffset","endOffsetAdd","measure","target","fn","fastdom","mutate","getNamedEffect","animation","namedEffect","scrollAnimations","entranceAnimations","ongoingAnimations","mouseAnimations","backgroundScrollAnimations","keyframeEffect","animation_","keyframes","getNames","effectId","uid","web","style","customEffect","getEffectsData","animations","map","index","effectOptions","fill","easing","getEasing","iterations","Infinity","composite","direction","startsWith","duration","delay","window","ViewTimeline","options"],"sources":["../../../src/api/common.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationOptions,\n  BackgroundScrollAnimations,\n  EntranceAnimations,\n  MeasureCallback,\n  MouseAnimations,\n  OngoingAnimations,\n  RangeOffset,\n  ScrollAnimations,\n  TimeAnimationOptions,\n  UnitLengthPercentage,\n} from '../types';\nimport { scrollAnimations } from '../library/scroll';\nimport { entranceAnimations } from '../library/entrance';\nimport { ongoingAnimations } from '../library/ongoing';\nimport { mouseAnimations } from '../library/mouse';\nimport { backgroundScrollAnimations } from '../library/backgroundScroll';\nimport { getCssUnits, getEasing } from '../utils';\nimport fastdom from 'fastdom';\n\nfunction getElement(\n  id: string | null,\n  ownerDocument?: Document,\n): HTMLElement | null {\n  return id ? (ownerDocument || document).getElementById(id) : null;\n}\n\nfunction getElementMotionPart(element: Element | null, part: string) {\n  if (element?.matches(`[data-motion-part~=\"${part}\"]`)) {\n    return element;\n  }\n  return element?.querySelector(`[data-motion-part~=\"${part}\"]`);\n}\n\nfunction getDirection(\n  effect: AnimationData,\n): KeyframeEffectOptions['direction'] {\n  const alternate = effect.alternate ? 'alternate' : '';\n  return effect.reversed\n    ? (`${alternate ? `${alternate}-` : ''}reverse` as\n        | 'reverse'\n        | 'alternate-reverse')\n    : alternate || 'normal';\n}\n\nfunction getLength(length: UnitLengthPercentage): string {\n  return `${length.value}${getCssUnits(length.type)}`;\n}\n\nfunction getRange(\n  range: RangeOffset,\n  add: string | undefined,\n  isEnd?: boolean,\n) {\n  // according to the CSS spec if the end range is a <length> then it is calculated from the start of the named range\n  // our model assumes that <length> in end range is calculated from the end of the named range\n  return `${range.name || 'cover'} ${\n    isEnd && range.offset!.type !== 'percentage'\n      ? `calc(100% + ${getLength(range.offset!)}${add ? ` + ${add}` : ''})`\n      : add\n      ? `calc(${getLength(range.offset!)} + ${add})`\n      : getLength(range.offset!)\n  }`;\n}\n\nfunction getRanges(effect: AnimationDataForScrub) {\n  return {\n    start: getRange(effect.startOffset!, effect.startOffsetAdd),\n    end: getRange(effect.endOffset!, effect.endOffsetAdd, true),\n  };\n}\n\nfunction measure(target: HTMLElement | null): MeasureCallback {\n  return (fn) => fastdom.measure(() => fn(target));\n}\n\nfunction mutate(target: HTMLElement | null): MeasureCallback {\n  return (fn) => fastdom.mutate(() => fn(target));\n}\n\nfunction getNamedEffect(animation: AnimationOptions) {\n  if (animation.namedEffect) {\n    const name = animation.namedEffect.type;\n\n    // check each preset library for the named effect\n    if (name in scrollAnimations) {\n      return scrollAnimations[name as keyof ScrollAnimations];\n    } else if (name in entranceAnimations) {\n      return entranceAnimations[name as keyof EntranceAnimations];\n    } else if (name in ongoingAnimations) {\n      return ongoingAnimations[name as keyof OngoingAnimations];\n    } else if (name in mouseAnimations) {\n      return mouseAnimations[name as keyof MouseAnimations];\n    } else if (name in backgroundScrollAnimations) {\n      return backgroundScrollAnimations[\n        name as keyof BackgroundScrollAnimations\n      ];\n    }\n  } else if (animation.keyframeEffect) {\n    const effect = (animation_: AnimationOptions) => {\n      const { name, keyframes } = animation_.keyframeEffect!;\n\n      return [{ ...animation_, name, keyframes }];\n    };\n    const getNames = (animation_: AnimationOptions) => {\n      const { effectId } = animation_;\n      const { name } = animation_.keyframeEffect!;\n      const uid = name || effectId;\n\n      return uid ? [uid] : [];\n    };\n    return { web: effect, style: effect, getNames };\n  } else if (animation.customEffect) {\n    return (animation_: AnimationOptions) => [{ ...animation_, keyframes: [] }];\n  }\n  return null;\n}\n\nfunction getEffectsData(animations: AnimationData[], effectId?: string) {\n  // process each AnimationData object into a KeyframeEffect object\n  return animations.map((effect, index) => {\n    // prepare the KeyframeEffectOptions object\n    const effectOptions = {\n      fill: effect.fill,\n      easing: getEasing(effect.easing),\n      iterations: effect.iterations === 0 ? Infinity : effect.iterations || 1,\n      composite: effect.composite,\n      direction: getDirection(effect),\n    } as KeyframeEffectOptions & { rangeStart: string; rangeEnd: string };\n\n    // if this is a TimeAnimation then set the duration and delay as time values\n    if (effect.type.startsWith('Time')) {\n      effectOptions.duration = effect.duration as number;\n      effectOptions.delay = (effect as TimeAnimationOptions).delay || 0;\n    } else {\n      // if ViewTimeline is supported\n      if (window.ViewTimeline) {\n        // set duration to 'auto'\n        effectOptions.duration = 'auto';\n      } else {\n        // if ViewTimeline not supported then put a 100ms value in duration get a progress we can easily relate to\n        // we split the duration to 99.99ms and delay of 0.01ms to get the fill-mode effect working\n        effectOptions.duration = 99.99;\n        effectOptions.delay = 0.01;\n      }\n    }\n\n    return {\n      effect,\n      options: effectOptions,\n      id: effectId && `${effectId}-${index + 1}`,\n      part: effect.part,\n    };\n  });\n}\n\nexport {\n  getElement,\n  getElementMotionPart,\n  getNamedEffect,\n  getEffectsData,\n  measure,\n  mutate,\n  getDirection,\n  getLength,\n  getRanges,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_scroll","require","_entrance","_ongoing","_mouse","_backgroundScroll","_utils","_fastdom","_interopRequireDefault","getElement","id","ownerDocument","document","getElementById","getElementMotionPart","element","part","matches","querySelector","getDirection","effect","alternate","reversed","getLength","length","value","getCssUnits","type","getRange","range","add","isEnd","name","offset","getRanges","start","startOffset","startOffsetAdd","end","endOffset","endOffsetAdd","measure","target","fn","fastdom","mutate","getNamedEffect","animation","namedEffect","scrollAnimations","entranceAnimations","ongoingAnimations","mouseAnimations","backgroundScrollAnimations","keyframeEffect","animation_","keyframes","getNames","effectId","uid","web","style","customEffect","getEffectsData","animations","trigger","map","index","effectOptions","fill","easing","getEasing","iterations","Infinity","composite","direction","isNotAScrubTrigger","duration","delay","window","ViewTimeline","options"],"sources":["../../../src/api/common.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationOptions,\n  BackgroundScrollAnimations,\n  EntranceAnimations,\n  MeasureCallback,\n  MouseAnimations,\n  OngoingAnimations,\n  RangeOffset,\n  ScrollAnimations,\n  TimeAnimationOptions,\n  TriggerVariant,\n  UnitLengthPercentage,\n} from '../types';\nimport { scrollAnimations } from '../library/scroll';\nimport { entranceAnimations } from '../library/entrance';\nimport { ongoingAnimations } from '../library/ongoing';\nimport { mouseAnimations } from '../library/mouse';\nimport { backgroundScrollAnimations } from '../library/backgroundScroll';\nimport { getCssUnits, getEasing } from '../utils';\nimport fastdom from 'fastdom';\n\nfunction getElement(\n  id: string | null,\n  ownerDocument?: Document,\n): HTMLElement | null {\n  return id ? (ownerDocument || document).getElementById(id) : null;\n}\n\nfunction getElementMotionPart(element: Element | null, part: string) {\n  if (element?.matches(`[data-motion-part~=\"${part}\"]`)) {\n    return element;\n  }\n  return element?.querySelector(`[data-motion-part~=\"${part}\"]`);\n}\n\nfunction getDirection(\n  effect: AnimationData,\n): KeyframeEffectOptions['direction'] {\n  const alternate = effect.alternate ? 'alternate' : '';\n  return effect.reversed\n    ? (`${alternate ? `${alternate}-` : ''}reverse` as\n        | 'reverse'\n        | 'alternate-reverse')\n    : alternate || 'normal';\n}\n\nfunction getLength(length: UnitLengthPercentage): string {\n  return `${length.value}${getCssUnits(length.type)}`;\n}\n\nfunction getRange(\n  range: RangeOffset,\n  add: string | undefined,\n  isEnd?: boolean,\n) {\n  // according to the CSS spec if the end range is a <length> then it is calculated from the start of the named range\n  // our model assumes that <length> in end range is calculated from the end of the named range\n  return `${range.name || 'cover'} ${\n    isEnd && range.offset!.type !== 'percentage'\n      ? `calc(100% + ${getLength(range.offset!)}${add ? ` + ${add}` : ''})`\n      : add\n      ? `calc(${getLength(range.offset!)} + ${add})`\n      : getLength(range.offset!)\n  }`;\n}\n\nfunction getRanges(effect: AnimationDataForScrub) {\n  return {\n    start: getRange(effect.startOffset!, effect.startOffsetAdd),\n    end: getRange(effect.endOffset!, effect.endOffsetAdd, true),\n  };\n}\n\nfunction measure(target: HTMLElement | null): MeasureCallback {\n  return (fn) => fastdom.measure(() => fn(target));\n}\n\nfunction mutate(target: HTMLElement | null): MeasureCallback {\n  return (fn) => fastdom.mutate(() => fn(target));\n}\n\nfunction getNamedEffect(animation: AnimationOptions) {\n  if (animation.namedEffect) {\n    const name = animation.namedEffect.type;\n\n    // check each preset library for the named effect\n    if (name in scrollAnimations) {\n      return scrollAnimations[name as keyof ScrollAnimations];\n    } else if (name in entranceAnimations) {\n      return entranceAnimations[name as keyof EntranceAnimations];\n    } else if (name in ongoingAnimations) {\n      return ongoingAnimations[name as keyof OngoingAnimations];\n    } else if (name in mouseAnimations) {\n      return mouseAnimations[name as keyof MouseAnimations];\n    } else if (name in backgroundScrollAnimations) {\n      return backgroundScrollAnimations[\n        name as keyof BackgroundScrollAnimations\n      ];\n    }\n  } else if (animation.keyframeEffect) {\n    const effect = (animation_: AnimationOptions) => {\n      const { name, keyframes } = animation_.keyframeEffect!;\n\n      return [{ ...animation_, name, keyframes }];\n    };\n    const getNames = (animation_: AnimationOptions) => {\n      const { effectId } = animation_;\n      const { name } = animation_.keyframeEffect!;\n      const uid = name || effectId;\n\n      return uid ? [uid] : [];\n    };\n    return { web: effect, style: effect, getNames };\n  } else if (animation.customEffect) {\n    return (animation_: AnimationOptions) => [{ ...animation_, keyframes: [] }];\n  }\n  return null;\n}\n\nfunction getEffectsData(\n  animations: AnimationData[],\n  trigger?: Partial<TriggerVariant>,\n  effectId?: string,\n) {\n  // process each AnimationData object into a KeyframeEffect object\n  return animations.map((effect, index) => {\n    // prepare the KeyframeEffectOptions object\n    const effectOptions = {\n      fill: effect.fill,\n      easing: getEasing(effect.easing),\n      iterations: effect.iterations === 0 ? Infinity : effect.iterations || 1,\n      composite: effect.composite,\n      direction: getDirection(effect),\n    } as KeyframeEffectOptions & { rangeStart: string; rangeEnd: string };\n\n    // if this is a time-based animation then set the duration and delay as time values\n    if (isNotAScrubTrigger(trigger)) {\n      effectOptions.duration = effect.duration as number;\n      effectOptions.delay = (effect as TimeAnimationOptions).delay || 0;\n    } else {\n      // if ViewTimeline is supported\n      if (window.ViewTimeline) {\n        // set duration to 'auto'\n        effectOptions.duration = 'auto';\n      } else {\n        // if ViewTimeline not supported then put a 100ms value in duration get a progress we can easily relate to\n        // we split the duration to 99.99ms and delay of 0.01ms to get the fill-mode effect working\n        effectOptions.duration = 99.99;\n        effectOptions.delay = 0.01;\n      }\n    }\n\n    return {\n      effect,\n      options: effectOptions,\n      id: effectId && `${effectId}-${index + 1}`,\n      part: effect.part,\n    };\n  });\n}\n\nfunction isNotAScrubTrigger(trigger?: Partial<TriggerVariant>) {\n  return (\n    !trigger ||\n    (trigger.trigger !== 'pointer-move' && trigger.trigger !== 'view-progress')\n  );\n}\n\nexport {\n  isNotAScrubTrigger,\n  getElement,\n  getElementMotionPart,\n  getNamedEffect,\n  getEffectsData,\n  measure,\n  mutate,\n  getDirection,\n  getLength,\n  getRanges,\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/api/cssAnimations.js

@@ -21,10 +21,10 @@ function getAnimationAsCSS(data, isRunning) {
   const isAutoDuration = duration === 'auto';
   return `${animationName} ${isAutoDuration ? 'auto' : `${duration}ms`}${isAutoDuration ? ' ' : ` ${delay || 1}ms `}${easing}${fill && fill !== 'none' ? ` ${fill}` : ''} ${!iterations || iterations === Infinity ? 'infinite' : iterations}${direction === 'normal' ? '' : ` ${direction}`} ${isRunning ? '' : 'paused'}`;
 }
-function getCSSAnimationEffect(preset, animation) {
+function getCSSAnimationEffect(preset, animation, trigger) {
   if (preset != null && preset.style) {
     // validate duration is a number over 0
-    if (animation.type === 'TimeAnimationOptions') {
+    if ((0, _common.isNotAScrubTrigger)(trigger)) {
       animation.duration = animation.duration || 1;
     }
     return preset.style(animation);
@@ -35,7 +35,7 @@ function getCSSAnimation(target, animationOptions, trigger) {
   // get the preset for the given animation options
   const namedEffect = (0, _common.getNamedEffect)(animationOptions);
   const animationsData = getCSSAnimationEffect(namedEffect, animationOptions);
-  const data = (0, _common.getEffectsData)(animationsData, animationOptions.effectId);
+  const data = (0, _common.getEffectsData)(animationsData, trigger, animationOptions.effectId);
   const isViewProgress = (trigger == null ? void 0 : trigger.trigger) === 'view-progress';
   return data.map((item, index) => {
     const {

package/dist/cjs/api/cssAnimations.js.map

@@ -1 +1 @@
-{"version":3,"names":["_common","require","getAnimationTarget","target","part","getAnimationAsCSS","data","isRunning","duration","delay","iterations","fill","easing","direction","options","animationName","effect","name","isAutoDuration","Infinity","getCSSAnimationEffect","preset","animation","style","type","getCSSAnimation","animationOptions","trigger","namedEffect","getNamedEffect","animationsData","getEffectsData","effectId","isViewProgress","map","item","index","start","end","getRanges","composition","composite","custom","keyframes","id","animationTimeline","animationRange"],"sources":["../../../src/api/cssAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  TriggerVariant,\n} from '../types';\nimport { getEffectsData, getRanges, getNamedEffect } from './common';\n\nfunction getAnimationTarget(target: string | null, part: string | undefined) {\n  return target\n    ? `#${target}${part ? `[data-motion-part~=\"${part}\"]` : ''}`\n    : '';\n}\n\nfunction getAnimationAsCSS(\n  data: {\n    effect: AnimationData;\n    options: KeyframeEffectOptions;\n    id: string | undefined;\n    part: string | undefined;\n  },\n  isRunning?: boolean,\n) {\n  const {\n    duration,\n    delay,\n    iterations = 1,\n    fill,\n    easing = 'linear',\n    direction,\n  } = data.options;\n  const animationName = data.effect.name;\n  const isAutoDuration = duration === 'auto';\n\n  return `${animationName} ${isAutoDuration ? 'auto' : `${duration}ms`}${\n    isAutoDuration ? ' ' : ` ${delay || 1}ms `\n  }${easing}${fill && fill !== 'none' ? ` ${fill}` : ''} ${\n    !iterations || iterations === Infinity ? 'infinite' : iterations\n  }${direction === 'normal' ? '' : ` ${direction}`} ${\n    isRunning ? '' : 'paused'\n  }`;\n}\n\nfunction getCSSAnimationEffect(\n  preset: AnimationEffectAPI<any> | null,\n  animation: AnimationOptions,\n): AnimationData[] {\n  if (preset?.style) {\n    // validate duration is a number over 0\n    if (animation.type === 'TimeAnimationOptions') {\n      animation.duration = animation.duration || 1;\n    }\n\n    return preset.style(animation);\n  }\n\n  return [];\n}\n\nfunction getCSSAnimation(\n  target: string | null,\n  animationOptions: AnimationOptions,\n  trigger?: TriggerVariant,\n) {\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getCSSAnimationEffect(namedEffect, animationOptions);\n  const data = getEffectsData(animationsData, animationOptions.effectId);\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  return data.map((item, index) => {\n    const { start, end }: { start?: string; end?: string } = isViewProgress\n      ? getRanges(item.effect as AnimationDataForScrub)\n      : {};\n\n    return {\n      target: getAnimationTarget(target, item.part),\n      animation: getAnimationAsCSS(item, isViewProgress),\n      composition: item.options.composite,\n      custom: item.effect.custom,\n      name: item.effect.name,\n      keyframes: item.effect.keyframes,\n      id: item.id && `${item.id}-${index + 1}`,\n      animationTimeline: isViewProgress ? `--${trigger?.id}` : '',\n      animationRange: start || end ? `${start} ${end}` : '',\n    };\n  });\n}\n\nexport { getCSSAnimation, getCSSAnimationEffect, getAnimationAsCSS };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_common","require","getAnimationTarget","target","part","getAnimationAsCSS","data","isRunning","duration","delay","iterations","fill","easing","direction","options","animationName","effect","name","isAutoDuration","Infinity","getCSSAnimationEffect","preset","animation","trigger","style","isNotAScrubTrigger","getCSSAnimation","animationOptions","namedEffect","getNamedEffect","animationsData","getEffectsData","effectId","isViewProgress","map","item","index","start","end","getRanges","composition","composite","custom","keyframes","id","animationTimeline","animationRange"],"sources":["../../../src/api/cssAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  TriggerVariant,\n} from '../types';\nimport {\n  getEffectsData,\n  getRanges,\n  getNamedEffect,\n  isNotAScrubTrigger,\n} from './common';\n\nfunction getAnimationTarget(target: string | null, part: string | undefined) {\n  return target\n    ? `#${target}${part ? `[data-motion-part~=\"${part}\"]` : ''}`\n    : '';\n}\n\nfunction getAnimationAsCSS(\n  data: {\n    effect: AnimationData;\n    options: KeyframeEffectOptions;\n    id: string | undefined;\n    part: string | undefined;\n  },\n  isRunning?: boolean,\n) {\n  const {\n    duration,\n    delay,\n    iterations = 1,\n    fill,\n    easing = 'linear',\n    direction,\n  } = data.options;\n  const animationName = data.effect.name;\n  const isAutoDuration = duration === 'auto';\n\n  return `${animationName} ${isAutoDuration ? 'auto' : `${duration}ms`}${\n    isAutoDuration ? ' ' : ` ${delay || 1}ms `\n  }${easing}${fill && fill !== 'none' ? ` ${fill}` : ''} ${\n    !iterations || iterations === Infinity ? 'infinite' : iterations\n  }${direction === 'normal' ? '' : ` ${direction}`} ${\n    isRunning ? '' : 'paused'\n  }`;\n}\n\nfunction getCSSAnimationEffect(\n  preset: AnimationEffectAPI<any> | null,\n  animation: AnimationOptions,\n  trigger?: Partial<TriggerVariant>,\n): AnimationData[] {\n  if (preset?.style) {\n    // validate duration is a number over 0\n    if (isNotAScrubTrigger(trigger)) {\n      animation.duration = animation.duration || 1;\n    }\n\n    return preset.style(animation);\n  }\n\n  return [];\n}\n\nfunction getCSSAnimation(\n  target: string | null,\n  animationOptions: AnimationOptions,\n  trigger?: TriggerVariant,\n) {\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getCSSAnimationEffect(namedEffect, animationOptions);\n  const data = getEffectsData(\n    animationsData,\n    trigger,\n    animationOptions.effectId,\n  );\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  return data.map((item, index) => {\n    const { start, end }: { start?: string; end?: string } = isViewProgress\n      ? getRanges(item.effect as AnimationDataForScrub)\n      : {};\n\n    return {\n      target: getAnimationTarget(target, item.part),\n      animation: getAnimationAsCSS(item, isViewProgress),\n      composition: item.options.composite,\n      custom: item.effect.custom,\n      name: item.effect.name,\n      keyframes: item.effect.keyframes,\n      id: item.id && `${item.id}-${index + 1}`,\n      animationTimeline: isViewProgress ? `--${trigger?.id}` : '',\n      animationRange: start || end ? `${start} ${end}` : '',\n    };\n  });\n}\n\nexport { getCSSAnimation, getCSSAnimationEffect, getAnimationAsCSS };\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/api/webAnimations.js

@@ -7,10 +7,10 @@ var _CustomAnimation = require("../CustomAnimation");
 var _AnimationGroup = require("../AnimationGroup");
 var _common = require("./common");
 var _fastdom = _interopRequireDefault(require("fastdom"));
-function getWebAnimationEffect(preset, animation, target, options) {
+function getWebAnimationEffect(preset, animation, target, trigger, options) {
   if (preset) {
     // validate duration is a number over 0
-    if (animation.type === 'TimeAnimationOptions') {
+    if ((0, _common.isNotAScrubTrigger)(trigger)) {
       animation.duration = animation.duration || 1;
       if (options != null && options.reducedMotion) {
         if (animation.iterations === 1 || animation.iterations == undefined) {
@@ -50,14 +50,14 @@ function getWebAnimation(target, animationOptions, trigger, options, ownerDocume
 
     // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate
     const mouseAnimationPreset = (0, _common.getNamedEffect)(effectOptions);
-    const mouseAnimationFactory = getWebAnimationEffect(mouseAnimationPreset, animationOptions, element, options);
+    const mouseAnimationFactory = getWebAnimationEffect(mouseAnimationPreset, animationOptions, element, trigger, options);
     return mouseAnimationFactory(element);
   }
 
   // get the preset for the given animation options
   const namedEffect = (0, _common.getNamedEffect)(animationOptions);
-  const animationsData = getWebAnimationEffect(namedEffect, animationOptions, element, options);
-  const data = (0, _common.getEffectsData)(animationsData, animationOptions.effectId);
+  const animationsData = getWebAnimationEffect(namedEffect, animationOptions, element, trigger, options);
+  const data = (0, _common.getEffectsData)(animationsData, trigger, animationOptions.effectId);
   let timeline;
   const isViewProgress = (trigger == null ? void 0 : trigger.trigger) === 'view-progress';
 

package/dist/cjs/api/webAnimations.js.map

@@ -1 +1 @@
-{"version":3,"names":["_CustomAnimation","require","_AnimationGroup","_common","_fastdom","_interopRequireDefault","getWebAnimationEffect","preset","animation","target","options","type","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","measure","mutate","web","getWebAnimation","animationOptions","trigger","ownerDocument","element","getElement","effectOptions","customEffect","namedEffect","id","mouseAnimationPreset","getNamedEffect","mouseAnimationFactory","animationsData","data","getEffectsData","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","effect","part","effectTarget","getElementMotionPart","keyframeEffect","KeyframeEffect","fastdom","updateTiming","timing","setKeyframes","keyframes","timingOptions","CustomAnimation","Animation","start","end","getRanges","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","AnimationGroup","measured","Promise","resolve"],"sources":["../../../src/api/webAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  MouseAnimationFactory,\n  MouseAnimationInstance,\n  ScrubAnimationOptions,\n  TriggerVariant,\n  WebAnimationEffectFactory,\n} from '../types';\nimport { CustomAnimation } from '../CustomAnimation';\nimport { AnimationGroup } from '../AnimationGroup';\nimport {\n  getElement,\n  getElementMotionPart,\n  measure,\n  mutate,\n  getRanges,\n  getNamedEffect,\n  getEffectsData,\n} from './common';\nimport fastdom from 'fastdom';\n\nfunction getWebAnimationEffect(\n  preset: AnimationEffectAPI<any> | WebAnimationEffectFactory<any> | null,\n  animation: AnimationOptions,\n  target: HTMLElement | string | null,\n  options?: Record<string, any>,\n): AnimationData[] | MouseAnimationFactory {\n  if (preset) {\n    // validate duration is a number over 0\n    if (animation.type === 'TimeAnimationOptions') {\n      animation.duration = animation.duration || 1;\n\n      if (options?.reducedMotion) {\n        if (animation.iterations === 1 || animation.iterations == undefined) {\n          animation = { ...animation, duration: 1 };\n        } else {\n          return [];\n        }\n      }\n    }\n\n    let domApi;\n    if (target instanceof HTMLElement) {\n      domApi = { measure: measure(target), mutate: mutate(target) };\n    }\n\n    return (preset as AnimationEffectAPI<any>).web\n      ? (preset as AnimationEffectAPI<any>).web(animation, domApi, options)\n      : (preset as WebAnimationEffectFactory<any>)(animation, domApi, options);\n  }\n\n  return [];\n}\n\nfunction getWebAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n  options?: Record<string, any>,\n  ownerDocument?: Document,\n): AnimationGroup | MouseAnimationInstance {\n  const element =\n    target instanceof HTMLElement ? target : getElement(target, ownerDocument);\n\n  if (trigger?.trigger === 'pointer-move') {\n    let effectOptions = animationOptions;\n\n    if (animationOptions.customEffect) {\n      effectOptions = {\n        ...animationOptions,\n        namedEffect: { id: '', type: 'CustomMouse' },\n      };\n    }\n\n    // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate\n    const mouseAnimationPreset = getNamedEffect(\n      effectOptions,\n    ) as WebAnimationEffectFactory<'scrub'>;\n    const mouseAnimationFactory = getWebAnimationEffect(\n      mouseAnimationPreset,\n      animationOptions,\n      element,\n      options,\n    ) as MouseAnimationFactory;\n\n    return mouseAnimationFactory(element as HTMLElement);\n  }\n\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getWebAnimationEffect(\n    namedEffect,\n    animationOptions,\n    element,\n    options,\n  ) as AnimationData[];\n  const data = getEffectsData(animationsData, animationOptions.effectId);\n\n  let timeline: typeof window.ViewTimeline | undefined;\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n  if (isViewProgress && window.ViewTimeline) {\n    // generate the timeline object\n    // @ts-expect-error\n    timeline = new ViewTimeline({\n      subject: trigger.element || getElement(trigger.componentId!),\n    });\n  }\n\n  // generate an Animation object for each data object\n  const animations = data.map(\n    ({ effect, options: effectOptions, id, part }) => {\n      const effectTarget = part ? getElementMotionPart(element, part) : element;\n\n      const keyframeEffect = new KeyframeEffect(\n        effectTarget || null,\n        [],\n        effectOptions,\n      );\n\n      // set the keyframes for the KeyframeEffect after measurements and mutations\n      fastdom.mutate(() => {\n        if ('timing' in effect) {\n          keyframeEffect.updateTiming(effect.timing as OptionalEffectTiming);\n        }\n\n        keyframeEffect.setKeyframes(effect.keyframes);\n      });\n\n      const timingOptions =\n        isViewProgress && timeline\n          ? { timeline: timeline as AnimationTimeline }\n          : {};\n      const animation =\n        typeof effect.customEffect === 'function'\n          ? (new CustomAnimation(\n              effect.customEffect,\n              effectTarget || null,\n              effectOptions,\n              timingOptions,\n            ) as Animation)\n          : new Animation(keyframeEffect, timingOptions.timeline);\n\n      // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n      if (isViewProgress) {\n        if (timeline) {\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const { start, end } = getRanges(effect as AnimationDataForScrub);\n            // @ts-expect-error\n            animation.rangeStart = start;\n            // @ts-expect-error\n            animation.rangeEnd = end;\n\n            animation.play();\n          });\n        } else {\n          const { startOffset, endOffset } =\n            animationOptions as ScrubAnimationOptions;\n\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const startOffsetToWrite =\n              (effect as AnimationDataForScrub).startOffset || startOffset;\n            const endOffsetToWrite =\n              (effect as AnimationDataForScrub).endOffset || endOffset;\n\n            Object.assign(animation, {\n              start: {\n                name: startOffsetToWrite!.name,\n                offset: startOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.startOffsetAdd,\n              },\n              end: {\n                name: endOffsetToWrite!.name,\n                offset: endOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.endOffsetAdd,\n              },\n            });\n          });\n        }\n      }\n\n      if (id) {\n        animation.id = id;\n      }\n\n      return animation;\n    },\n  );\n\n  // create an AnimationGroup with the generate animations\n  return new AnimationGroup(animations, {\n    ...animationOptions,\n    trigger: { ...(trigger || ({} as Partial<TriggerVariant>)) },\n    // make sure the group is ready after all animation targets are measured and mutated\n    measured: new Promise((resolve) => fastdom.mutate(resolve)),\n  });\n}\n\nexport { getWebAnimation };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_CustomAnimation","require","_AnimationGroup","_common","_fastdom","_interopRequireDefault","getWebAnimationEffect","preset","animation","target","trigger","options","isNotAScrubTrigger","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","measure","mutate","web","getWebAnimation","animationOptions","ownerDocument","element","getElement","effectOptions","customEffect","namedEffect","id","type","mouseAnimationPreset","getNamedEffect","mouseAnimationFactory","animationsData","data","getEffectsData","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","effect","part","effectTarget","getElementMotionPart","keyframeEffect","KeyframeEffect","fastdom","updateTiming","timing","setKeyframes","keyframes","timingOptions","CustomAnimation","Animation","start","end","getRanges","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","AnimationGroup","measured","Promise","resolve"],"sources":["../../../src/api/webAnimations.ts"],"sourcesContent":["import type {\n  AnimationData,\n  AnimationDataForScrub,\n  AnimationEffectAPI,\n  AnimationOptions,\n  MouseAnimationFactory,\n  MouseAnimationInstance,\n  ScrubAnimationOptions,\n  TriggerVariant,\n  WebAnimationEffectFactory,\n} from '../types';\nimport { CustomAnimation } from '../CustomAnimation';\nimport { AnimationGroup } from '../AnimationGroup';\nimport {\n  getElement,\n  getElementMotionPart,\n  measure,\n  mutate,\n  getRanges,\n  getNamedEffect,\n  getEffectsData,\n  isNotAScrubTrigger,\n} from './common';\nimport fastdom from 'fastdom';\n\nfunction getWebAnimationEffect(\n  preset: AnimationEffectAPI<any> | WebAnimationEffectFactory<any> | null,\n  animation: AnimationOptions,\n  target: HTMLElement | string | null,\n  trigger?: Partial<TriggerVariant>,\n  options?: Record<string, any>,\n): AnimationData[] | MouseAnimationFactory {\n  if (preset) {\n    // validate duration is a number over 0\n    if (isNotAScrubTrigger(trigger)) {\n      animation.duration = animation.duration || 1;\n\n      if (options?.reducedMotion) {\n        if (animation.iterations === 1 || animation.iterations == undefined) {\n          animation = { ...animation, duration: 1 };\n        } else {\n          return [];\n        }\n      }\n    }\n\n    let domApi;\n    if (target instanceof HTMLElement) {\n      domApi = { measure: measure(target), mutate: mutate(target) };\n    }\n\n    return (preset as AnimationEffectAPI<any>).web\n      ? (preset as AnimationEffectAPI<any>).web(animation, domApi, options)\n      : (preset as WebAnimationEffectFactory<any>)(animation, domApi, options);\n  }\n\n  return [];\n}\n\nfunction getWebAnimation(\n  target: HTMLElement | string | null,\n  animationOptions: AnimationOptions,\n  trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n  options?: Record<string, any>,\n  ownerDocument?: Document,\n): AnimationGroup | MouseAnimationInstance {\n  const element =\n    target instanceof HTMLElement ? target : getElement(target, ownerDocument);\n\n  if (trigger?.trigger === 'pointer-move') {\n    let effectOptions = animationOptions;\n\n    if (animationOptions.customEffect) {\n      effectOptions = {\n        ...animationOptions,\n        namedEffect: { id: '', type: 'CustomMouse' },\n      };\n    }\n\n    // TODO: need to fix the type here, currently lying about the returned type to be WebAnimationEffectFactory instead of MouseAnimationFactoryCreate\n    const mouseAnimationPreset = getNamedEffect(\n      effectOptions,\n    ) as WebAnimationEffectFactory<'scrub'>;\n    const mouseAnimationFactory = getWebAnimationEffect(\n      mouseAnimationPreset,\n      animationOptions,\n      element,\n      trigger,\n      options,\n    ) as MouseAnimationFactory;\n\n    return mouseAnimationFactory(element as HTMLElement);\n  }\n\n  // get the preset for the given animation options\n  const namedEffect = getNamedEffect(\n    animationOptions,\n  ) as AnimationEffectAPI<any> | null;\n\n  const animationsData = getWebAnimationEffect(\n    namedEffect,\n    animationOptions,\n    element,\n    trigger,\n    options,\n  ) as AnimationData[];\n  const data = getEffectsData(\n    animationsData,\n    trigger,\n    animationOptions.effectId,\n  );\n\n  let timeline: typeof window.ViewTimeline | undefined;\n  const isViewProgress = trigger?.trigger === 'view-progress';\n\n  // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n  if (isViewProgress && window.ViewTimeline) {\n    // generate the timeline object\n    // @ts-expect-error\n    timeline = new ViewTimeline({\n      subject: trigger.element || getElement(trigger.componentId!),\n    });\n  }\n\n  // generate an Animation object for each data object\n  const animations = data.map(\n    ({ effect, options: effectOptions, id, part }) => {\n      const effectTarget = part ? getElementMotionPart(element, part) : element;\n\n      const keyframeEffect = new KeyframeEffect(\n        effectTarget || null,\n        [],\n        effectOptions,\n      );\n\n      // set the keyframes for the KeyframeEffect after measurements and mutations\n      fastdom.mutate(() => {\n        if ('timing' in effect) {\n          keyframeEffect.updateTiming(effect.timing as OptionalEffectTiming);\n        }\n\n        keyframeEffect.setKeyframes(effect.keyframes);\n      });\n\n      const timingOptions =\n        isViewProgress && timeline\n          ? { timeline: timeline as AnimationTimeline }\n          : {};\n      const animation: Animation | CustomAnimation =\n        typeof effect.customEffect === 'function'\n          ? (new CustomAnimation(\n              effect.customEffect,\n              effectTarget || null,\n              effectOptions,\n              timingOptions,\n            ) as Animation)\n          : new Animation(keyframeEffect, timingOptions.timeline);\n\n      // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API\n      if (isViewProgress) {\n        if (timeline) {\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const { start, end } = getRanges(effect as AnimationDataForScrub);\n            // @ts-expect-error\n            animation.rangeStart = start;\n            // @ts-expect-error\n            animation.rangeEnd = end;\n\n            animation.play();\n          });\n        } else {\n          const { startOffset, endOffset } =\n            animationOptions as ScrubAnimationOptions;\n\n          // set the ranges for the animation after measurements and mutations\n          fastdom.mutate(() => {\n            const startOffsetToWrite =\n              (effect as AnimationDataForScrub).startOffset || startOffset;\n            const endOffsetToWrite =\n              (effect as AnimationDataForScrub).endOffset || endOffset;\n\n            Object.assign(animation, {\n              start: {\n                name: startOffsetToWrite!.name,\n                offset: startOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.startOffsetAdd,\n              },\n              end: {\n                name: endOffsetToWrite!.name,\n                offset: endOffsetToWrite!.offset?.value,\n                add: (effect as AnimationDataForScrub)!.endOffsetAdd,\n              },\n            });\n          });\n        }\n      }\n\n      if (id) {\n        animation.id = id;\n      }\n\n      return animation;\n    },\n  );\n\n  // create an AnimationGroup with the generate animations\n  return new AnimationGroup(animations, {\n    ...animationOptions,\n    trigger: { ...(trigger || ({} as Partial<TriggerVariant>)) },\n    // make sure the group is ready after all animation targets are measured and mutated\n    measured: new Promise((resolve) => fastdom.mutate(resolve)),\n  });\n}\n\nexport { getWebAnimation };\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,7 +3,6 @@
 exports.__esModule = true;
 exports.baseMockOptions = void 0;
 const baseMockOptions = exports.baseMockOptions = {
-  id: '1',
-  type: 'ScrubAnimationOptions'
+  id: '1'
 };
 //# sourceMappingURL=testUtils.js.map

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

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

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

@@ -3,7 +3,6 @@
 exports.__esModule = true;
 exports.baseMockOptions = void 0;
 const baseMockOptions = exports.baseMockOptions = {
-  id: '1',
-  type: 'TimeAnimationOptions'
+  id: '1'
 };
 //# sourceMappingURL=testUtils.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["baseMockOptions","exports","id","type"],"sources":["../../../../../src/library/entrance/test/testUtils.ts"],"sourcesContent":["import type { TimeAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: TimeAnimationOptions = {\n  id: '1',\n  type: 'TimeAnimationOptions',\n};\n"],"mappings":";;;;AAEO,MAAMA,eAAqC,GAAAC,OAAA,CAAAD,eAAA,GAAG;EACnDE,EAAE,EAAE,GAAG;EACPC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}
+{"version":3,"names":["baseMockOptions","exports","id"],"sources":["../../../../../src/library/entrance/test/testUtils.ts"],"sourcesContent":["import type { TimeAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: TimeAnimationOptions = {\n  id: '1',\n};\n"],"mappings":";;;;AAEO,MAAMA,eAAqC,GAAAC,OAAA,CAAAD,eAAA,GAAG;EACnDE,EAAE,EAAE;AACN,CAAC","ignoreList":[]}

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

@@ -3,7 +3,6 @@
 exports.__esModule = true;
 exports.baseMockOptions = void 0;
 const baseMockOptions = exports.baseMockOptions = {
-  id: 'test-id',
-  type: 'TimeAnimationOptions'
+  id: 'test-id'
 };
 //# sourceMappingURL=testUtils.js.map

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

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

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

@@ -3,7 +3,6 @@
 exports.__esModule = true;
 exports.baseMockOptions = void 0;
 const baseMockOptions = exports.baseMockOptions = {
-  id: 'test-id',
-  type: 'ScrubAnimationOptions'
+  id: 'test-id'
 };
 //# sourceMappingURL=testUtils.js.map

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

@@ -1 +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":[]}
+{"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

@@ -125,7 +125,6 @@ const BackgroundScroll = () => {
       (_animationGroup = animationGroup) == null || _animationGroup.cancel();
       animationGroup = (0, _index.getWebAnimation)(el.id, {
         id: '',
-        type: 'ScrubAnimationOptions',
         namedEffect: {
           id: '',
           type: name,
@@ -146,7 +145,6 @@ const BackgroundScroll = () => {
       var _scroll;
       animationScene = (0, _index.getScrubScene)(el.id, {
         id: '',
-        type: 'ScrubAnimationOptions',
         namedEffect: {
           id: '',
           type: name,
@@ -209,7 +207,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 314,
+      lineNumber: 312,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -221,7 +219,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 318,
+      lineNumber: 316,
       columnNumber: 7
     }
   }, [0, 1].map((_, i) => /*#__PURE__*/_react.default.createElement("div", {
@@ -232,7 +230,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 328,
+      lineNumber: 326,
       columnNumber: 11
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -242,7 +240,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 336,
+      lineNumber: 334,
       columnNumber: 13
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -253,7 +251,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 341,
+      lineNumber: 339,
       columnNumber: 15
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -263,7 +261,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 354,
+      lineNumber: 352,
       columnNumber: 17
     }
   }))), /*#__PURE__*/_react.default.createElement("div", {
@@ -272,7 +270,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 368,
+      lineNumber: 366,
       columnNumber: 13
     }
   }, "Background Scrub")))), /*#__PURE__*/_react.default.createElement("div", {
@@ -280,7 +278,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 374,
+      lineNumber: 372,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -288,7 +286,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 375,
+      lineNumber: 373,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -302,7 +300,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 376,
+      lineNumber: 374,
       columnNumber: 11
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -316,7 +314,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 385,
+      lineNumber: 383,
       columnNumber: 11
     }
   }), /*#__PURE__*/_react.default.createElement(_controls.SelectInput, {
@@ -334,7 +332,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 397,
+      lineNumber: 395,
       columnNumber: 11
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
@@ -342,7 +340,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 428,
+      lineNumber: 426,
       columnNumber: 9
     }
   }, Object.entries(schema[selectedRange]).sort(([a], [b]) => {
@@ -362,7 +360,7 @@ const BackgroundScroll = () => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 440,
+      lineNumber: 438,
       columnNumber: 15
     }
   }))))));

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

@@ -1 +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":[]}
+{"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","namedEffect","type","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          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          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":[]}