@wix/motion 1.637.0 → 1.639.0

package/dist/cjs/api/common.js

@@ -5,6 +5,7 @@ exports.__esModule = true;
 exports.getDirection = getDirection;
 exports.getEffectsData = getEffectsData;
 exports.getElement = getElement;
+exports.getElementMotionPart = getElementMotionPart;
 exports.getLength = getLength;
 exports.getNamedEffect = getNamedEffect;
 exports.getRanges = getRanges;
@@ -20,6 +21,12 @@ var _fastdom = _interopRequireDefault(require("fastdom"));
 function getElement(id, ownerDocument) {
   return id ? (ownerDocument || document).getElementById(id) : null;
 }
+function getElementMotionPart(element, part) {
+  if (element != null && element.matches(`[data-motion-part~="${part}"]`)) {
+    return element;
+  }
+  return element == null ? void 0 : element.querySelector(`[data-motion-part~="${part}"]`);
+}
 function getDirection(effect) {
   const alternate = effect.alternate ? 'alternate' : '';
   return effect.reversed ? `${alternate ? `${alternate}-` : ''}reverse` : alternate || 'normal';

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","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","part"],"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 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  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","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":[]}

package/dist/cjs/api/webAnimations.js

@@ -77,8 +77,7 @@ function getWebAnimation(target, animationOptions, trigger, options, ownerDocume
     id,
     part
   }) => {
-    const effectTarget = part ? element == null ? void 0 : element.querySelector(`[data-motion-part~="${part}"]`) // maybe add ~ here as well
-    : element;
+    const effectTarget = part ? (0, _common.getElementMotionPart)(element, part) : element;
     const keyframeEffect = new KeyframeEffect(effectTarget || null, [], effectOptions);
 
     // set the keyframes for the KeyframeEffect after measurements and mutations

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","querySelector","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  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\n        ? element?.querySelector(`[data-motion-part~=\"${part}\"]`) // maybe add ~ here as well\n        : 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","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":[]}

package/dist/esm/api/common.js

@@ -8,6 +8,12 @@ import fastdom from 'fastdom';
 function getElement(id, ownerDocument) {
   return id ? (ownerDocument || document).getElementById(id) : null;
 }
+function getElementMotionPart(element, part) {
+  if (element != null && element.matches(`[data-motion-part~="${part}"]`)) {
+    return element;
+  }
+  return element == null ? void 0 : element.querySelector(`[data-motion-part~="${part}"]`);
+}
 function getDirection(effect) {
   const alternate = effect.alternate ? 'alternate' : '';
   return effect.reversed ? `${alternate ? `${alternate}-` : ''}reverse` : alternate || 'normal';
@@ -119,5 +125,5 @@ function getEffectsData(animations, effectId) {
     };
   });
 }
-export { getElement, getNamedEffect, getEffectsData, measure, mutate, getDirection, getLength, getRanges };
+export { getElement, getElementMotionPart, getNamedEffect, getEffectsData, measure, mutate, getDirection, getLength, getRanges };
 //# sourceMappingURL=common.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["scrollAnimations","entranceAnimations","ongoingAnimations","mouseAnimations","backgroundScrollAnimations","getCssUnits","getEasing","fastdom","getElement","id","ownerDocument","document","getElementById","getDirection","effect","alternate","reversed","getLength","length","value","type","getRange","range","add","isEnd","name","offset","getRanges","start","startOffset","startOffsetAdd","end","endOffset","endOffsetAdd","measure","target","fn","mutate","getNamedEffect","animation","namedEffect","keyframeEffect","animation_","keyframes","getNames","effectId","uid","web","style","customEffect","getEffectsData","animations","map","index","effectOptions","fill","easing","iterations","Infinity","composite","direction","startsWith","duration","delay","window","ViewTimeline","options","part"],"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 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  getNamedEffect,\n  getEffectsData,\n  measure,\n  mutate,\n  getDirection,\n  getLength,\n  getRanges,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["scrollAnimations","entranceAnimations","ongoingAnimations","mouseAnimations","backgroundScrollAnimations","getCssUnits","getEasing","fastdom","getElement","id","ownerDocument","document","getElementById","getElementMotionPart","element","part","matches","querySelector","getDirection","effect","alternate","reversed","getLength","length","value","type","getRange","range","add","isEnd","name","offset","getRanges","start","startOffset","startOffsetAdd","end","endOffset","endOffsetAdd","measure","target","fn","mutate","getNamedEffect","animation","namedEffect","keyframeEffect","animation_","keyframes","getNames","effectId","uid","web","style","customEffect","getEffectsData","animations","map","index","effectOptions","fill","easing","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":[]}

package/dist/esm/api/webAnimations.js

@@ -1,6 +1,6 @@
 import { CustomAnimation } from '../CustomAnimation';
 import { AnimationGroup } from '../AnimationGroup';
-import { getElement, measure, mutate, getRanges, getNamedEffect, getEffectsData } from './common';
+import { getElement, getElementMotionPart, measure, mutate, getRanges, getNamedEffect, getEffectsData } from './common';
 import fastdom from 'fastdom';
 function getWebAnimationEffect(preset, animation, target, options) {
   if (preset) {
@@ -73,8 +73,7 @@ function getWebAnimation(target, animationOptions, trigger, options, ownerDocume
       id,
       part
     } = _ref;
-    const effectTarget = part ? element == null ? void 0 : element.querySelector(`[data-motion-part~="${part}"]`) // maybe add ~ here as well
-    : element;
+    const effectTarget = part ? getElementMotionPart(element, part) : element;
     const keyframeEffect = new KeyframeEffect(effectTarget || null, [], effectOptions);
 
     // set the keyframes for the KeyframeEffect after measurements and mutations

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

@@ -1 +1 @@
-{"version":3,"names":["CustomAnimation","AnimationGroup","getElement","measure","mutate","getRanges","getNamedEffect","getEffectsData","fastdom","getWebAnimationEffect","preset","animation","target","options","type","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","web","getWebAnimation","animationOptions","trigger","ownerDocument","element","effectOptions","customEffect","namedEffect","id","mouseAnimationPreset","mouseAnimationFactory","animationsData","data","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","_ref","effect","part","effectTarget","querySelector","keyframeEffect","KeyframeEffect","updateTiming","timing","setKeyframes","keyframes","timingOptions","Animation","start","end","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","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  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\n        ? element?.querySelector(`[data-motion-part~=\"${part}\"]`) // maybe add ~ here as well\n        : 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","AnimationGroup","getElement","getElementMotionPart","measure","mutate","getRanges","getNamedEffect","getEffectsData","fastdom","getWebAnimationEffect","preset","animation","target","options","type","duration","reducedMotion","iterations","undefined","domApi","HTMLElement","web","getWebAnimation","animationOptions","trigger","ownerDocument","element","effectOptions","customEffect","namedEffect","id","mouseAnimationPreset","mouseAnimationFactory","animationsData","data","effectId","timeline","isViewProgress","window","ViewTimeline","subject","componentId","animations","map","_ref","effect","part","effectTarget","keyframeEffect","KeyframeEffect","updateTiming","timing","setKeyframes","keyframes","timingOptions","Animation","start","end","rangeStart","rangeEnd","play","startOffset","endOffset","_offset","_offset2","startOffsetToWrite","endOffsetToWrite","Object","assign","name","offset","value","add","startOffsetAdd","endOffsetAdd","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":[]}

package/dist/types/api/common.d.ts

@@ -1,5 +1,6 @@
 import type { AnimationData, AnimationDataForScrub, AnimationOptions, MeasureCallback, RangeOffset, UnitLengthPercentage } from '../types';
 declare function getElement(id: string | null, ownerDocument?: Document): HTMLElement | null;
+declare function getElementMotionPart(element: Element | null, part: string): Element | null | undefined;
 declare function getDirection(effect: AnimationData): KeyframeEffectOptions['direction'];
 declare function getLength(length: UnitLengthPercentage): string;
 declare function getRanges(effect: AnimationDataForScrub): {
@@ -161,5 +162,5 @@ declare function getEffectsData(animations: AnimationData[], effectId?: string):
     id: string | undefined;
     part: string | undefined;
 }[];
-export { getElement, getNamedEffect, getEffectsData, measure, mutate, getDirection, getLength, getRanges, };
+export { getElement, getElementMotionPart, getNamedEffect, getEffectsData, measure, mutate, getDirection, getLength, getRanges, };
 //# sourceMappingURL=common.d.ts.map

package/dist/types/api/common.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/api/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAGhB,eAAe,EAGf,WAAW,EAGX,oBAAoB,EACrB,MAAM,UAAU,CAAC;AASlB,iBAAS,UAAU,CACjB,EAAE,EAAE,MAAM,GAAG,IAAI,EACjB,aAAa,CAAC,EAAE,QAAQ,GACvB,WAAW,GAAG,IAAI,CAEpB;AAED,iBAAS,YAAY,CACnB,MAAM,EAAE,aAAa,GACpB,qBAAqB,CAAC,WAAW,CAAC,CAOpC;AAED,iBAAS,SAAS,CAAC,MAAM,EAAE,oBAAoB,GAAG,MAAM,CAEvD;AAkBD,iBAAS,SAAS,CAAC,MAAM,EAAE,qBAAqB;;;EAK/C;AAED,iBAAS,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,eAAe,CAE5D;AAED,iBAAS,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,eAAe,CAE3D;AAED,iBAAS,cAAc,CAAC,SAAS,EAAE,gBAAgB,0KAiC3B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAdR,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAAhB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAKd,gBAAgB;qBAYjD;AAED,iBAAS,cAAc,CAAC,UAAU,EAAE,aAAa,EAAE,EAAE,QAAQ,CAAC,EAAE,MAAM;;;oBAUvB,MAAM;kBAAY,MAAM;;;;IA0BtE;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,YAAY,EACZ,SAAS,EACT,SAAS,GACV,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/api/common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAGhB,eAAe,EAGf,WAAW,EAGX,oBAAoB,EACrB,MAAM,UAAU,CAAC;AASlB,iBAAS,UAAU,CACjB,EAAE,EAAE,MAAM,GAAG,IAAI,EACjB,aAAa,CAAC,EAAE,QAAQ,GACvB,WAAW,GAAG,IAAI,CAEpB;AAED,iBAAS,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,EAAE,MAAM,8BAKlE;AAED,iBAAS,YAAY,CACnB,MAAM,EAAE,aAAa,GACpB,qBAAqB,CAAC,WAAW,CAAC,CAOpC;AAED,iBAAS,SAAS,CAAC,MAAM,EAAE,oBAAoB,GAAG,MAAM,CAEvD;AAkBD,iBAAS,SAAS,CAAC,MAAM,EAAE,qBAAqB;;;EAK/C;AAED,iBAAS,OAAO,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,eAAe,CAE5D;AAED,iBAAS,MAAM,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,eAAe,CAE3D;AAED,iBAAS,cAAc,CAAC,SAAS,EAAE,gBAAgB,0KAiC3B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBAdR,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAAhB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAKd,gBAAgB;qBAYjD;AAED,iBAAS,cAAc,CAAC,UAAU,EAAE,aAAa,EAAE,EAAE,QAAQ,CAAC,EAAE,MAAM;;;oBAUvB,MAAM;kBAAY,MAAM;;;;IA0BtE;AAED,OAAO,EACL,UAAU,EACV,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,OAAO,EACP,MAAM,EACN,YAAY,EACZ,SAAS,EACT,SAAS,GACV,CAAC"}

package/dist/types/api/webAnimations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webAnimations.d.ts","sourceRoot":"","sources":["../../../src/api/webAnimations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,gBAAgB,EAEhB,sBAAsB,EAEtB,cAAc,EAEf,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA4CnD,iBAAS,eAAe,CACtB,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,WAAW,CAAA;CAAE,EAC7D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,aAAa,CAAC,EAAE,QAAQ,GACvB,cAAc,GAAG,sBAAsB,CAgJzC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"webAnimations.d.ts","sourceRoot":"","sources":["../../../src/api/webAnimations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,gBAAgB,EAEhB,sBAAsB,EAEtB,cAAc,EAEf,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AA6CnD,iBAAS,eAAe,CACtB,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,WAAW,CAAA;CAAE,EAC7D,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,aAAa,CAAC,EAAE,QAAQ,GACvB,cAAc,GAAG,sBAAsB,CA8IzC;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/motion",
-  "version": "1.637.0",
+  "version": "1.639.0",
   "license": "UNLICENSED",
   "author": {
     "name": "wow!Team",
@@ -83,5 +83,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "8650937207b6a6b03bb80f0a6e561791d9b6c491ecfbad6c6fbefe57"
+  "falconPackageHash": "f29ef2c5e2e1438eef8ed2991eb62b5b8ffad8eb8842fc9f1d5578f7"
 }