@wix/motion 1.0.73 → 1.571.0

package/README.md

@@ -0,0 +1,3 @@
+# Wix Motion
+
+> npm i @wix/motion

package/dist/cjs/AnimationGroup.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AnimationGroup = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+/**
+ * @class AnimationGroup
+ *
+ * A wrapper object for simulating a GroupEffect and managing multiple animations.
+ * See: https://www.w3.org/TR/web-animations-2/#grouping-and-synchronization
+ */
+class AnimationGroup {
+  constructor(animations, options) {
+    (0, _defineProperty2.default)(this, "animations", void 0);
+    (0, _defineProperty2.default)(this, "options", void 0);
+    (0, _defineProperty2.default)(this, "ready", void 0);
+    this.animations = animations;
+    this.options = options;
+    this.ready = (options == null ? void 0 : options.measured) || Promise.resolve();
+  }
+  getProgress() {
+    var _this$animations$;
+    return ((_this$animations$ = this.animations[0]) == null || (_this$animations$ = _this$animations$.effect) == null ? void 0 : _this$animations$.getComputedTiming().progress) || 0;
+  }
+  async play(callback) {
+    await this.ready;
+    for (const animation of this.animations) {
+      animation.play();
+    }
+
+    // TODO: Wait for all animations to be ready, using allSettled to handle rejections gracefully
+    // await Promise.allSettled(
+    await Promise.all(this.animations.map(animation => animation.ready));
+    if (callback) {
+      callback();
+    }
+  }
+  pause() {
+    for (const animation of this.animations) {
+      animation.pause();
+    }
+  }
+  async reverse(callback) {
+    await this.ready;
+    for (const animation of this.animations) {
+      animation.reverse();
+    }
+
+    // TODO: Wait for all animations to be ready, using allSettled to handle rejections gracefully
+    // await Promise.allSettled(
+    await Promise.all(this.animations.map(animation => animation.ready));
+    if (callback) {
+      callback();
+    }
+  }
+  progress(p) {
+    for (const animation of this.animations) {
+      const {
+        activeDuration
+      } = animation.effect.getComputedTiming();
+      const {
+        delay
+      } = animation.effect.getTiming();
+      animation.currentTime = ((delay || 0) + (activeDuration || 0)) * p;
+    }
+  }
+  cancel() {
+    for (const animation of this.animations) {
+      animation.cancel();
+    }
+  }
+  setPlaybackRate(rate) {
+    for (const animation of this.animations) {
+      animation.playbackRate = rate;
+    }
+  }
+  async onFinish(callback) {
+    try {
+      await Promise.all(this.animations.map(animation => animation.finished));
+      callback();
+    } catch (_error) {
+      console.warn('animation was interrupted - aborting onFinish callback - ', _error);
+    }
+  }
+  get playState() {
+    var _this$animations$2;
+    return (_this$animations$2 = this.animations[0]) == null ? void 0 : _this$animations$2.playState;
+  }
+}
+exports.AnimationGroup = AnimationGroup;
+//# sourceMappingURL=AnimationGroup.js.map

package/dist/cjs/AnimationGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AnimationGroup","constructor","animations","options","_defineProperty2","default","ready","measured","Promise","resolve","getProgress","_this$animations$","effect","getComputedTiming","progress","play","callback","animation","all","map","pause","reverse","p","activeDuration","delay","getTiming","currentTime","cancel","setPlaybackRate","rate","playbackRate","onFinish","finished","_error","console","warn","playState","_this$animations$2","exports"],"sources":["../../src/AnimationGroup.ts"],"sourcesContent":["import { AnimationGroupOptions, RangeOffset } from './types';\n\n/**\n * @class AnimationGroup\n *\n * A wrapper object for simulating a GroupEffect and managing multiple animations.\n * See: https://www.w3.org/TR/web-animations-2/#grouping-and-synchronization\n */\nexport class AnimationGroup {\n  animations: (Animation & {\n    start?: RangeOffset;\n    end?: RangeOffset;\n  })[];\n  options?: AnimationGroupOptions;\n  ready: Promise<void>;\n\n  constructor(animations: Animation[], options?: AnimationGroupOptions) {\n    this.animations = animations;\n    this.options = options;\n    this.ready = options?.measured || Promise.resolve();\n  }\n\n  getProgress() {\n    return this.animations[0]?.effect?.getComputedTiming().progress || 0;\n  }\n\n  async play(callback?: () => void): Promise<void> {\n    await this.ready;\n\n    for (const animation of this.animations) {\n      animation.play();\n    }\n\n    // TODO: Wait for all animations to be ready, using allSettled to handle rejections gracefully\n    // await Promise.allSettled(\n    await Promise.all(this.animations.map((animation) => animation.ready));\n\n    if (callback) {\n      callback();\n    }\n  }\n\n  pause() {\n    for (const animation of this.animations) {\n      animation.pause();\n    }\n  }\n\n  async reverse(callback?: () => void): Promise<void> {\n    await this.ready;\n\n    for (const animation of this.animations) {\n      animation.reverse();\n    }\n\n    // TODO: Wait for all animations to be ready, using allSettled to handle rejections gracefully\n    // await Promise.allSettled(\n    await Promise.all(this.animations.map((animation) => animation.ready));\n\n    if (callback) {\n      callback();\n    }\n  }\n\n  progress(p: number) {\n    for (const animation of this.animations) {\n      const { activeDuration } = animation.effect!.getComputedTiming();\n      const { delay } = animation.effect!.getTiming();\n      animation.currentTime =\n        ((delay || 0) + ((activeDuration as number) || 0)) * p;\n    }\n  }\n\n  cancel() {\n    for (const animation of this.animations) {\n      animation.cancel();\n    }\n  }\n\n  setPlaybackRate(rate: number) {\n    for (const animation of this.animations) {\n      animation.playbackRate = rate;\n    }\n  }\n\n  async onFinish(callback: () => void): Promise<void> {\n    try {\n      await Promise.all(this.animations.map((animation) => animation.finished));\n      callback();\n    } catch (_error) {\n      console.warn(\n        'animation was interrupted - aborting onFinish callback - ',\n        _error,\n      );\n    }\n  }\n\n  get playState() {\n    return this.animations[0]?.playState;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/api/common.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.getDirection = getDirection;
+exports.getEffectsData = getEffectsData;
+exports.getElement = getElement;
+exports.getLength = getLength;
+exports.getNamedEffect = getNamedEffect;
+exports.getRanges = getRanges;
+exports.measure = measure;
+exports.mutate = mutate;
+var _scroll = require("../library/scroll");
+var _entrance = require("../library/entrance");
+var _ongoing = require("../library/ongoing");
+var _mouse = require("../library/mouse");
+var _backgroundScroll = require("../library/backgroundScroll");
+var _utils = require("../utils");
+var _fastdom = _interopRequireDefault(require("fastdom"));
+function getElement(id, ownerDocument) {
+  return id ? (ownerDocument || document).getElementById(id) : null;
+}
+function getDirection(effect) {
+  const alternate = effect.alternate ? 'alternate' : '';
+  return effect.reversed ? `${alternate ? `${alternate}-` : ''}reverse` : alternate || 'normal';
+}
+function getLength(length) {
+  return `${length.value}${(0, _utils.getCssUnits)(length.type)}`;
+}
+function getRange(range, add, isEnd) {
+  // according to the CSS spec if the end range is a <length> then it is calculated from the start of the named range
+  // our model assumes that <length> in end range is calculated from the end of the named range
+  return `${range.name || 'cover'} ${isEnd && range.offset.type !== 'percentage' ? `calc(100% + ${getLength(range.offset)}${add ? ` + ${add}` : ''})` : add ? `calc(${getLength(range.offset)} + ${add})` : getLength(range.offset)}`;
+}
+function getRanges(effect) {
+  return {
+    start: getRange(effect.startOffset, effect.startOffsetAdd),
+    end: getRange(effect.endOffset, effect.endOffsetAdd, true)
+  };
+}
+function measure(target) {
+  return fn => _fastdom.default.measure(() => fn(target));
+}
+function mutate(target) {
+  return fn => _fastdom.default.mutate(() => fn(target));
+}
+function getNamedEffect(animation) {
+  if (animation.namedEffect) {
+    const name = animation.namedEffect.type;
+
+    // check each preset library for the named effect
+    if (name in _scroll.scrollAnimations) {
+      return _scroll.scrollAnimations[name];
+    } else if (name in _entrance.entranceAnimations) {
+      return _entrance.entranceAnimations[name];
+    } else if (name in _ongoing.ongoingAnimations) {
+      return _ongoing.ongoingAnimations[name];
+    } else if (name in _mouse.mouseAnimations) {
+      return _mouse.mouseAnimations[name];
+    } else if (name in _backgroundScroll.backgroundScrollAnimations) {
+      return _backgroundScroll.backgroundScrollAnimations[name];
+    }
+  } else if (animation.keyframeEffect) {
+    const effect = animation_ => {
+      const {
+        name,
+        keyframes
+      } = animation_.keyframeEffect;
+      return [{
+        ...animation_,
+        name,
+        keyframes
+      }];
+    };
+    return {
+      web: effect,
+      style: effect
+    };
+  } else if (animation.customEffect) {
+    return animation_ => [{
+      ...animation_,
+      keyframes: []
+    }];
+  }
+  return null;
+}
+function getEffectsData(animations, effectId) {
+  // process each AnimationData object into a KeyframeEffect object
+  return animations.map((effect, index) => {
+    // prepare the KeyframeEffectOptions object
+    const effectOptions = {
+      fill: effect.fill,
+      easing: (0, _utils.getEasing)(effect.easing),
+      iterations: effect.iterations === 0 ? Infinity : effect.iterations || 1,
+      composite: effect.composite,
+      direction: getDirection(effect)
+    };
+
+    // if this is a TimeAnimation then set the duration and delay as time values
+    if (effect.type.startsWith('Time')) {
+      effectOptions.duration = effect.duration;
+      effectOptions.delay = effect.delay || 0;
+    } else {
+      // if ViewTimeline is supported
+      if (window.ViewTimeline) {
+        // set duration to 'auto'
+        effectOptions.duration = 'auto';
+      } else {
+        // if ViewTimeline not supported then put a 100ms value in duration get a progress we can easily relate to
+        // we split the duration to 99.99ms and delay of 0.01ms to get the fill-mode effect working
+        effectOptions.duration = 99.99;
+        effectOptions.delay = 0.01;
+      }
+    }
+    return {
+      effect,
+      options: effectOptions,
+      id: effectId && `${effectId}-${index + 1}`,
+      part: effect.part
+    };
+  });
+}
+//# sourceMappingURL=common.js.map

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

@@ -0,0 +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","web","style","customEffect","getEffectsData","animations","effectId","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    return { web: effect, style: effect };\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":[]}

package/dist/cjs/api/cssAnimations.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getAnimationAsCSS = getAnimationAsCSS;
+exports.getCSSAnimation = getCSSAnimation;
+exports.getCSSAnimationEffect = getCSSAnimationEffect;
+var _common = require("./common");
+function getAnimationTarget(target, part) {
+  return target ? `#${target}${part ? `[data-motion-part~="${part}"]` : ''}` : '';
+}
+function getAnimationAsCSS(data, isRunning) {
+  const {
+    duration,
+    delay,
+    iterations = 1,
+    fill,
+    easing = 'linear',
+    direction
+  } = data.options;
+  const animationName = data.effect.name;
+  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) {
+  if (preset != null && preset.style) {
+    // validate duration is a number over 0
+    if (animation.type === 'TimeAnimationOptions') {
+      animation.duration = animation.duration || 1;
+    }
+    return preset.style(animation);
+  }
+  return [];
+}
+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 isViewProgress = (trigger == null ? void 0 : trigger.trigger) === 'view-progress';
+  return data.map((item, index) => {
+    const {
+      start,
+      end
+    } = isViewProgress ? (0, _common.getRanges)(item.effect) : {};
+    return {
+      target: getAnimationTarget(target, item.part),
+      animation: getAnimationAsCSS(item, isViewProgress),
+      composition: item.options.composite,
+      custom: item.effect.custom,
+      name: item.effect.name,
+      keyframes: item.effect.keyframes,
+      id: item.id && `${item.id}-${index + 1}`,
+      animationTimeline: isViewProgress ? `--${trigger == null ? void 0 : trigger.id}` : '',
+      animationRange: start || end ? `${start} ${end}` : ''
+    };
+  });
+}
+//# sourceMappingURL=cssAnimations.js.map

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

@@ -0,0 +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":[]}

package/dist/cjs/api/prepare.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.prepareAnimation = prepareAnimation;
+var _common = require("./common");
+var _fastdom = _interopRequireDefault(require("fastdom"));
+function prepareAnimation(target, animation, callback) {
+  const preset = (0, _common.getNamedEffect)(animation);
+  const element = target instanceof HTMLElement ? target : (0, _common.getElement)(target);
+  if (preset && preset.prepare && element) {
+    const domApi = {
+      measure: (0, _common.measure)(element),
+      mutate: (0, _common.mutate)(element)
+    };
+    preset.prepare(animation, domApi);
+  }
+  callback && _fastdom.default.mutate(callback);
+}
+//# sourceMappingURL=prepare.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_common","require","_fastdom","_interopRequireDefault","prepareAnimation","target","animation","callback","preset","getNamedEffect","element","HTMLElement","getElement","prepare","domApi","measure","mutate","fastdom"],"sources":["../../../src/api/prepare.ts"],"sourcesContent":["import type {\n  AnimationEffectAPI,\n  AnimationOptions,\n  TimeAnimationOptions,\n} from '../types';\nimport { getElement, getNamedEffect, measure, mutate } from './common';\nimport fastdom from 'fastdom';\n\nfunction prepareAnimation(\n  target: HTMLElement | string | null,\n  animation: AnimationOptions,\n  callback?: () => void,\n) {\n  const preset = getNamedEffect(animation);\n  const element = target instanceof HTMLElement ? target : getElement(target);\n\n  if (preset && (preset as AnimationEffectAPI<'time'>).prepare && element) {\n    const domApi = { measure: measure(element), mutate: mutate(element) };\n\n    (preset as AnimationEffectAPI<'time'>).prepare!(\n      animation as TimeAnimationOptions,\n      domApi,\n    );\n  }\n\n  callback && fastdom.mutate(callback);\n}\n\nexport { prepareAnimation };\n"],"mappings":";;;;;AAKA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,SAASG,gBAAgBA,CACvBC,MAAmC,EACnCC,SAA2B,EAC3BC,QAAqB,EACrB;EACA,MAAMC,MAAM,GAAG,IAAAC,sBAAc,EAACH,SAAS,CAAC;EACxC,MAAMI,OAAO,GAAGL,MAAM,YAAYM,WAAW,GAAGN,MAAM,GAAG,IAAAO,kBAAU,EAACP,MAAM,CAAC;EAE3E,IAAIG,MAAM,IAAKA,MAAM,CAAgCK,OAAO,IAAIH,OAAO,EAAE;IACvE,MAAMI,MAAM,GAAG;MAAEC,OAAO,EAAE,IAAAA,eAAO,EAACL,OAAO,CAAC;MAAEM,MAAM,EAAE,IAAAA,cAAM,EAACN,OAAO;IAAE,CAAC;IAEpEF,MAAM,CAAgCK,OAAO,CAC5CP,SAAS,EACTQ,MACF,CAAC;EACH;EAEAP,QAAQ,IAAIU,gBAAO,CAACD,MAAM,CAACT,QAAQ,CAAC;AACtC","ignoreList":[]}

package/dist/cjs/api/webAnimations.js

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.getWebAnimation = getWebAnimation;
+var _AnimationGroup = require("../AnimationGroup");
+var _common = require("./common");
+var _fastdom = _interopRequireDefault(require("fastdom"));
+function getWebAnimationEffect(preset, animation, target, options) {
+  if (preset) {
+    let domApi;
+    if (target instanceof HTMLElement) {
+      domApi = {
+        measure: (0, _common.measure)(target),
+        mutate: (0, _common.mutate)(target)
+      };
+    }
+
+    // validate duration is a number over 0
+    if (animation.type === 'TimeAnimationOptions') {
+      animation.duration = animation.duration || 1;
+    }
+    return preset.web ? preset.web(animation, domApi, options) : preset(animation, domApi, options);
+  }
+  return [];
+}
+function getWebAnimation(target, animationOptions, trigger, options, ownerDocument) {
+  const element = target instanceof HTMLElement ? target : (0, _common.getElement)(target, ownerDocument);
+  if ((trigger == null ? void 0 : trigger.trigger) === 'pointer-move') {
+    let effectOptions = animationOptions;
+    if (animationOptions.customEffect) {
+      effectOptions = {
+        ...animationOptions,
+        namedEffect: {
+          id: '',
+          type: 'CustomMouse'
+        }
+      };
+    }
+
+    // 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);
+    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);
+  let timeline;
+  const isViewProgress = (trigger == null ? void 0 : trigger.trigger) === 'view-progress';
+
+  // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API
+  if (isViewProgress && window.ViewTimeline) {
+    // generate the timeline object
+    // @ts-expect-error
+    timeline = new ViewTimeline({
+      subject: trigger.element || (0, _common.getElement)(trigger.componentId)
+    });
+  }
+
+  // generate an Animation object for each data object
+  const animations = data.map(({
+    effect,
+    options: effectOptions,
+    id,
+    part
+  }) => {
+    const effectTarget = part ? element == null ? void 0 : element.querySelector(`[data-motion-part~="${part}"]`) // maybe add ~ here as well
+    : element;
+    const keyframeEffect = new KeyframeEffect(effectTarget || null, [], effectOptions);
+
+    // set the keyframes for the KeyframeEffect after measurements and mutations
+    _fastdom.default.mutate(() => {
+      if ('timing' in effect) {
+        keyframeEffect.updateTiming(effect.timing);
+      }
+      keyframeEffect.setKeyframes(effect.keyframes);
+    });
+    const animation = isViewProgress && timeline ? new Animation(keyframeEffect, timeline) : new Animation(keyframeEffect);
+
+    // if this is a ScrubAnimation with view-progress trigger and the browser supports the ViewTimeline API
+    if (isViewProgress) {
+      if (timeline) {
+        // set the ranges for the animation after measurements and mutations
+        _fastdom.default.mutate(() => {
+          const {
+            start,
+            end
+          } = (0, _common.getRanges)(effect);
+          // @ts-expect-error
+          animation.rangeStart = start;
+          // @ts-expect-error
+          animation.rangeEnd = end;
+          animation.play();
+        });
+      } else {
+        const {
+          startOffset,
+          endOffset
+        } = animationOptions;
+
+        // set the ranges for the animation after measurements and mutations
+        _fastdom.default.mutate(() => {
+          var _offset, _offset2;
+          const startOffsetToWrite = effect.startOffset || startOffset;
+          const endOffsetToWrite = effect.endOffset || endOffset;
+          Object.assign(animation, {
+            start: {
+              name: startOffsetToWrite.name,
+              offset: (_offset = startOffsetToWrite.offset) == null ? void 0 : _offset.value,
+              add: effect.startOffsetAdd
+            },
+            end: {
+              name: endOffsetToWrite.name,
+              offset: (_offset2 = endOffsetToWrite.offset) == null ? void 0 : _offset2.value,
+              add: effect.endOffsetAdd
+            }
+          });
+        });
+      }
+    }
+    if (id) {
+      animation.id = id;
+    }
+    return animation;
+  });
+
+  // create an AnimationGroup with the generate animations
+  return new _AnimationGroup.AnimationGroup(animations, {
+    ...animationOptions,
+    trigger: {
+      ...(trigger || {})
+    },
+    // make sure the group is ready after all animation targets are measured and mutated
+    measured: new Promise(resolve => _fastdom.default.mutate(resolve))
+  });
+}
+//# sourceMappingURL=webAnimations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_AnimationGroup","require","_common","_fastdom","_interopRequireDefault","getWebAnimationEffect","preset","animation","target","options","domApi","HTMLElement","measure","mutate","type","duration","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","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 { 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    let domApi;\n    if (target instanceof HTMLElement) {\n      domApi = { measure: measure(target), mutate: mutate(target) };\n    }\n\n    // validate duration is a number over 0\n    if (animation.type === 'TimeAnimationOptions') {\n      animation.duration = animation.duration || 1;\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 animation: Animation =\n        isViewProgress && timeline\n          ? new Animation(keyframeEffect, timeline as AnimationTimeline)\n          : new Animation(keyframeEffect);\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":[]}