@wix/motion 1.0.73 → 1.571.0

package/dist/esm/api/cssAnimations.js

@@ -0,0 +1,53 @@
+import { getEffectsData, getRanges, getNamedEffect } from './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 = getNamedEffect(animationOptions);
+  const animationsData = getCSSAnimationEffect(namedEffect, animationOptions);
+  const data = getEffectsData(animationsData, animationOptions.effectId);
+  const isViewProgress = (trigger == null ? void 0 : trigger.trigger) === 'view-progress';
+  return data.map((item, index) => {
+    const {
+      start,
+      end
+    } = isViewProgress ? 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}` : ''
+    };
+  });
+}
+export { getCSSAnimation, getCSSAnimationEffect, getAnimationAsCSS };
+//# sourceMappingURL=cssAnimations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getEffectsData","getRanges","getNamedEffect","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","animationsData","effectId","isViewProgress","map","item","index","start","end","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/esm/api/prepare.js

@@ -0,0 +1,16 @@
+import { getElement, getNamedEffect, measure, mutate } from './common';
+import fastdom from 'fastdom';
+function prepareAnimation(target, animation, callback) {
+  const preset = getNamedEffect(animation);
+  const element = target instanceof HTMLElement ? target : getElement(target);
+  if (preset && preset.prepare && element) {
+    const domApi = {
+      measure: measure(element),
+      mutate: mutate(element)
+    };
+    preset.prepare(animation, domApi);
+  }
+  callback && fastdom.mutate(callback);
+}
+export { prepareAnimation };
+//# sourceMappingURL=prepare.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["getElement","getNamedEffect","measure","mutate","fastdom","prepareAnimation","target","animation","callback","preset","element","HTMLElement","prepare","domApi"],"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,SAASA,UAAU,EAAEC,cAAc,EAAEC,OAAO,EAAEC,MAAM,QAAQ,UAAU;AACtE,OAAOC,OAAO,MAAM,SAAS;AAE7B,SAASC,gBAAgBA,CACvBC,MAAmC,EACnCC,SAA2B,EAC3BC,QAAqB,EACrB;EACA,MAAMC,MAAM,GAAGR,cAAc,CAACM,SAAS,CAAC;EACxC,MAAMG,OAAO,GAAGJ,MAAM,YAAYK,WAAW,GAAGL,MAAM,GAAGN,UAAU,CAACM,MAAM,CAAC;EAE3E,IAAIG,MAAM,IAAKA,MAAM,CAAgCG,OAAO,IAAIF,OAAO,EAAE;IACvE,MAAMG,MAAM,GAAG;MAAEX,OAAO,EAAEA,OAAO,CAACQ,OAAO,CAAC;MAAEP,MAAM,EAAEA,MAAM,CAACO,OAAO;IAAE,CAAC;IAEpED,MAAM,CAAgCG,OAAO,CAC5CL,SAAS,EACTM,MACF,CAAC;EACH;EAEAL,QAAQ,IAAIJ,OAAO,CAACD,MAAM,CAACK,QAAQ,CAAC;AACtC;AAEA,SAASH,gBAAgB","ignoreList":[]}

package/dist/esm/api/webAnimations.js

@@ -0,0 +1,137 @@
+import { AnimationGroup } from '../AnimationGroup';
+import { getElement, measure, mutate, getRanges, getNamedEffect, getEffectsData } from './common';
+import fastdom from 'fastdom';
+function getWebAnimationEffect(preset, animation, target, options) {
+  if (preset) {
+    let domApi;
+    if (target instanceof HTMLElement) {
+      domApi = {
+        measure: measure(target),
+        mutate: 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 : 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 = getNamedEffect(effectOptions);
+    const mouseAnimationFactory = getWebAnimationEffect(mouseAnimationPreset, animationOptions, element, options);
+    return mouseAnimationFactory(element);
+  }
+
+  // get the preset for the given animation options
+  const namedEffect = getNamedEffect(animationOptions);
+  const animationsData = getWebAnimationEffect(namedEffect, animationOptions, element, options);
+  const data = 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 || getElement(trigger.componentId)
+    });
+  }
+
+  // generate an Animation object for each data object
+  const animations = data.map(_ref => {
+    let {
+      effect,
+      options: effectOptions,
+      id,
+      part
+    } = _ref;
+    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.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.mutate(() => {
+          const {
+            start,
+            end
+          } = 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.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(animations, {
+    ...animationOptions,
+    trigger: {
+      ...(trigger || {})
+    },
+    // make sure the group is ready after all animation targets are measured and mutated
+    measured: new Promise(resolve => fastdom.mutate(resolve))
+  });
+}
+export { getWebAnimation };
+//# sourceMappingURL=webAnimations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["AnimationGroup","getElement","measure","mutate","getRanges","getNamedEffect","getEffectsData","fastdom","getWebAnimationEffect","preset","animation","target","options","domApi","HTMLElement","type","duration","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","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 { 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":[]}

package/dist/esm/easings.js

@@ -0,0 +1,248 @@
+/**
+ * @file Easing functions as defined by Robert Penner.
+ * @example A playground I made https://codepen.io/tombigel/pen/eYLLVRg
+ */
+
+/**
+ * Linear easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const linear = t => t;
+
+/**
+ * Sine-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const sineIn = t => 1 - Math.cos(t * Math.PI / 2);
+
+/**
+ * Sine-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const sineOut = t => Math.sin(t * Math.PI / 2);
+
+/**
+ * Sine-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const sineInOut = t => -(Math.cos(Math.PI * t) - 1) / 2;
+
+/**
+ * Quadratic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quadIn = t => t ** 2;
+
+/**
+ * Quadratic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quadOut = t => 1 - (1 - t) ** 2;
+
+/**
+ * Quadratic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quadInOut = t => t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2;
+
+/**
+ * Cubic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const cubicIn = t => t ** 3;
+
+/**
+ * Cubic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const cubicOut = t => 1 - (1 - t) ** 3;
+
+/**
+ * Cubic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const cubicInOut = t => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+
+/**
+ * Quartic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quartIn = t => t ** 4;
+
+/**
+ * Quartic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quartOut = t => 1 - (1 - t) ** 4;
+
+/**
+ * Quartic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quartInOut = t => t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2;
+
+/**
+ * Quintic-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quintIn = t => t ** 5;
+
+/**
+ * Quintic-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quintOut = t => 1 - (1 - t) ** 5;
+
+/**
+ * Quintic-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const quintInOut = t => t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2;
+
+/**
+ * Exponential-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const expoIn = t => t === 0 ? 0 : 2 ** (10 * t - 10);
+
+/**
+ * Exponential-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const expoOut = t => t === 1 ? 1 : 1 - 2 ** (-10 * t);
+
+/**
+ * Exponential-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const expoInOut = t => t === 0 ? 0 : t === 1 ? 1 : t < 0.5 ? 2 ** (20 * t - 10) / 2 : (2 - 2 ** (-20 * t + 10)) / 2;
+
+/**
+ * Circular-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const circIn = t => 1 - Math.sqrt(1 - t ** 2);
+
+/**
+ * Circular-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const circOut = t => Math.sqrt(1 - (t - 1) ** 2);
+
+/**
+ * Circular-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const circInOut = t => t < 0.5 ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2 : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2;
+
+/**
+ * Back-in easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const backIn = t => 2.70158 * t ** 3 - 1.70158 * t ** 2;
+
+/**
+ * Back-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @returns The eased value.
+ */
+export const backOut = t => 1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2;
+
+/**
+ * Back-in-out easing function.
+ * @param t - The time value (between 0 and 1).
+ * @param k - The back factor (optional, default is 1.70158 * 1.525).
+ * @returns The eased value.
+ */
+export const backInOut = function (t, k) {
+  if (k === void 0) {
+    k = 1.70158 * 1.525;
+  }
+  return t < 0.5 ? (2 * t) ** 2 * ((k + 1) * 2 * t - k) / 2 : ((2 * t - 2) ** 2 * ((k + 1) * (t * 2 - 2) + k) + 2) / 2;
+};
+export const jsEasings = {
+  linear,
+  sineIn,
+  sineOut,
+  sineInOut,
+  quadIn,
+  quadOut,
+  quadInOut,
+  cubicIn,
+  cubicOut,
+  cubicInOut,
+  quartIn,
+  quartOut,
+  quartInOut,
+  quintIn,
+  quintOut,
+  quintInOut,
+  expoIn,
+  expoOut,
+  expoInOut,
+  circIn,
+  circOut,
+  circInOut,
+  backIn,
+  backOut,
+  backInOut
+};
+
+/**
+ * CSS cubic-bezier easings based on PostCSS Easings
+ */
+export const cssEasings = {
+  linear: 'linear',
+  ease: 'ease',
+  easeIn: 'ease-in',
+  easeOut: 'ease-out',
+  easeInOut: 'ease-in-out',
+  sineIn: 'cubic-bezier(0.47, 0, 0.745, 0.715)',
+  sineOut: 'cubic-bezier(0.39, 0.575, 0.565, 1)',
+  sineInOut: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
+  quadIn: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+  quadOut: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+  quadInOut: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
+  cubicIn: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
+  cubicOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+  cubicInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',
+  quartIn: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
+  quartOut: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
+  quartInOut: 'cubic-bezier(0.77, 0, 0.175, 1)',
+  quintIn: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+  quintOut: 'cubic-bezier(0.23, 1, 0.32, 1)',
+  quintInOut: 'cubic-bezier(0.86, 0, 0.07, 1)',
+  expoIn: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
+  expoOut: 'cubic-bezier(0.19, 1, 0.22, 1)',
+  expoInOut: 'cubic-bezier(1, 0, 0, 1)',
+  circIn: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
+  circOut: 'cubic-bezier(0.075, 0.82, 0.165, 1)',
+  circInOut: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+  backIn: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
+  backOut: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+  backInOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
+};
+//# sourceMappingURL=easings.js.map

package/dist/esm/easings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["linear","t","sineIn","Math","cos","PI","sineOut","sin","sineInOut","quadIn","quadOut","quadInOut","cubicIn","cubicOut","cubicInOut","quartIn","quartOut","quartInOut","quintIn","quintOut","quintInOut","expoIn","expoOut","expoInOut","circIn","sqrt","circOut","circInOut","backIn","backOut","backInOut","k","jsEasings","cssEasings","ease","easeIn","easeOut","easeInOut"],"sources":["../../src/easings.ts"],"sourcesContent":["/**\n * @file Easing functions as defined by Robert Penner.\n * @example A playground I made https://codepen.io/tombigel/pen/eYLLVRg\n */\n\n/**\n * Linear easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const linear = (t: number) => t;\n\n/**\n * Sine-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const sineIn = (t: number) => 1 - Math.cos((t * Math.PI) / 2);\n\n/**\n * Sine-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const sineOut = (t: number) => Math.sin((t * Math.PI) / 2);\n\n/**\n * Sine-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const sineInOut = (t: number) => -(Math.cos(Math.PI * t) - 1) / 2;\n\n/**\n * Quadratic-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quadIn = (t: number) => t ** 2;\n\n/**\n * Quadratic-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quadOut = (t: number) => 1 - (1 - t) ** 2;\n\n/**\n * Quadratic-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quadInOut = (t: number) =>\n  t < 0.5 ? 2 * t ** 2 : 1 - (-2 * t + 2) ** 2 / 2;\n\n/**\n * Cubic-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const cubicIn = (t: number) => t ** 3;\n\n/**\n * Cubic-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const cubicOut = (t: number) => 1 - (1 - t) ** 3;\n\n/**\n * Cubic-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const cubicInOut = (t: number) =>\n  t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;\n\n/**\n * Quartic-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quartIn = (t: number) => t ** 4;\n\n/**\n * Quartic-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quartOut = (t: number) => 1 - (1 - t) ** 4;\n\n/**\n * Quartic-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quartInOut = (t: number) =>\n  t < 0.5 ? 8 * t ** 4 : 1 - (-2 * t + 2) ** 4 / 2;\n\n/**\n * Quintic-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quintIn = (t: number) => t ** 5;\n\n/**\n * Quintic-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quintOut = (t: number) => 1 - (1 - t) ** 5;\n\n/**\n * Quintic-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const quintInOut = (t: number) =>\n  t < 0.5 ? 16 * t ** 5 : 1 - (-2 * t + 2) ** 5 / 2;\n\n/**\n * Exponential-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const expoIn = (t: number) => (t === 0 ? 0 : 2 ** (10 * t - 10));\n\n/**\n * Exponential-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const expoOut = (t: number) => (t === 1 ? 1 : 1 - 2 ** (-10 * t));\n\n/**\n * Exponential-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const expoInOut = (t: number) =>\n  t === 0\n    ? 0\n    : t === 1\n    ? 1\n    : t < 0.5\n    ? 2 ** (20 * t - 10) / 2\n    : (2 - 2 ** (-20 * t + 10)) / 2;\n\n/**\n * Circular-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const circIn = (t: number) => 1 - Math.sqrt(1 - t ** 2);\n\n/**\n * Circular-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const circOut = (t: number) => Math.sqrt(1 - (t - 1) ** 2);\n\n/**\n * Circular-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const circInOut = (t: number) =>\n  t < 0.5\n    ? (1 - Math.sqrt(1 - 4 * t ** 2)) / 2\n    : (Math.sqrt(-(2 * t - 3) * (2 * t - 1)) + 1) / 2;\n\n/**\n * Back-in easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const backIn = (t: number) => 2.70158 * t ** 3 - 1.70158 * t ** 2;\n\n/**\n * Back-out easing function.\n * @param t - The time value (between 0 and 1).\n * @returns The eased value.\n */\nexport const backOut = (t: number) =>\n  1 + 2.70158 * (t - 1) ** 3 + 1.70158 * (t - 1) ** 2;\n\n/**\n * Back-in-out easing function.\n * @param t - The time value (between 0 and 1).\n * @param k - The back factor (optional, default is 1.70158 * 1.525).\n * @returns The eased value.\n */\nexport const backInOut = (t: number, k = 1.70158 * 1.525) =>\n  t < 0.5\n    ? ((2 * t) ** 2 * ((k + 1) * 2 * t - k)) / 2\n    : ((2 * t - 2) ** 2 * ((k + 1) * (t * 2 - 2) + k) + 2) / 2;\n\nexport const jsEasings = {\n  linear,\n  sineIn,\n  sineOut,\n  sineInOut,\n  quadIn,\n  quadOut,\n  quadInOut,\n  cubicIn,\n  cubicOut,\n  cubicInOut,\n  quartIn,\n  quartOut,\n  quartInOut,\n  quintIn,\n  quintOut,\n  quintInOut,\n  expoIn,\n  expoOut,\n  expoInOut,\n  circIn,\n  circOut,\n  circInOut,\n  backIn,\n  backOut,\n  backInOut,\n};\n\n/**\n * CSS cubic-bezier easings based on PostCSS Easings\n */\nexport const cssEasings = {\n  linear: 'linear',\n  ease: 'ease',\n  easeIn: 'ease-in',\n  easeOut: 'ease-out',\n  easeInOut: 'ease-in-out',\n  sineIn: 'cubic-bezier(0.47, 0, 0.745, 0.715)',\n  sineOut: 'cubic-bezier(0.39, 0.575, 0.565, 1)',\n  sineInOut: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',\n  quadIn: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',\n  quadOut: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n  quadInOut: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',\n  cubicIn: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n  cubicOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n  cubicInOut: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n  quartIn: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',\n  quartOut: 'cubic-bezier(0.165, 0.84, 0.44, 1)',\n  quartInOut: 'cubic-bezier(0.77, 0, 0.175, 1)',\n  quintIn: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',\n  quintOut: 'cubic-bezier(0.23, 1, 0.32, 1)',\n  quintInOut: 'cubic-bezier(0.86, 0, 0.07, 1)',\n  expoIn: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',\n  expoOut: 'cubic-bezier(0.19, 1, 0.22, 1)',\n  expoInOut: 'cubic-bezier(1, 0, 0, 1)',\n  circIn: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',\n  circOut: 'cubic-bezier(0.075, 0.82, 0.165, 1)',\n  circInOut: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',\n  backIn: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n  backOut: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n  backInOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n} as const;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/external-types.d.js

@@ -0,0 +1,2 @@
+/// <reference types="@wix/yoshi-flow-library/types" />
+//# sourceMappingURL=external-types.d.js.map

package/dist/esm/external-types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/external-types.d.ts"],"sourcesContent":["/// <reference types=\"@wix/yoshi-flow-library/types\" />\n"],"mappings":"AAAA","ignoreList":[]}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './motion';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './motion';\nexport * from './types';\n"],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,SAAS","ignoreList":[]}

package/dist/esm/library/backgroundScroll/BgCloseUp.js

@@ -0,0 +1,70 @@
+import { measureCompHeight } from './utils';
+export default function create(options, dom) {
+  const measures = {
+    compHeight: 0
+  };
+  if (dom) {
+    measureCompHeight(measures, dom);
+  }
+  const easing = 'linear';
+  const {
+    scale = 80
+  } = options.namedEffect;
+  return [{
+    ...options,
+    easing,
+    part: 'BG_LAYER',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get startOffsetAdd() {
+      return `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100vh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      opacity: 1
+    }, {
+      opacity: 0
+    }]
+  }, {
+    ...options,
+    easing,
+    part: 'BG_MEDIA',
+    startOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    endOffset: {
+      name: 'cover',
+      offset: {
+        type: 'percentage',
+        value: 0
+      }
+    },
+    get endOffsetAdd() {
+      return `calc(100vh + ${measures.compHeight}px)`;
+    },
+    keyframes: [{
+      transform: 'perspective(100px) translateZ(0px)'
+    }, {
+      transform: `perspective(100px) translateZ(${scale}px)`
+    }]
+  }];
+}
+//# sourceMappingURL=BgCloseUp.js.map

package/dist/esm/library/backgroundScroll/BgCloseUp.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["measureCompHeight","create","options","dom","measures","compHeight","easing","scale","namedEffect","part","startOffset","name","offset","type","value","startOffsetAdd","Math","round","endOffset","endOffsetAdd","keyframes","opacity","transform"],"sources":["../../../../src/library/backgroundScroll/BgCloseUp.ts"],"sourcesContent":["import type {\n  BgCloseUp,\n  DomApi,\n  RangeOffset,\n  ScrubAnimationOptions,\n} from '../../types';\nimport { measureCompHeight } from './utils';\n\nexport default function create(options: ScrubAnimationOptions, dom?: DomApi) {\n  const measures = { compHeight: 0 };\n  if (dom) {\n    measureCompHeight(measures, dom);\n  }\n\n  const easing = 'linear';\n  const { scale = 80 } = options.namedEffect as BgCloseUp;\n\n  return [\n    {\n      ...options,\n      easing,\n      part: 'BG_LAYER',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get startOffsetAdd() {\n        return `calc(50vh + ${Math.round(0.5 * measures.compHeight)}px)`;\n      },\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          opacity: 1,\n        },\n        {\n          opacity: 0,\n        },\n      ],\n    },\n    {\n      ...options,\n      easing,\n      part: 'BG_MEDIA',\n      startOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      endOffset: {\n        name: 'cover',\n        offset: { type: 'percentage', value: 0 },\n      } as RangeOffset,\n      get endOffsetAdd() {\n        return `calc(100vh + ${measures.compHeight}px)`;\n      },\n      keyframes: [\n        {\n          transform: 'perspective(100px) translateZ(0px)',\n        },\n        {\n          transform: `perspective(100px) translateZ(${scale}px)`,\n        },\n      ],\n    },\n  ];\n}\n"],"mappings":"AAMA,SAASA,iBAAiB,QAAQ,SAAS;AAE3C,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAEC,GAAY,EAAE;EAC3E,MAAMC,QAAQ,GAAG;IAAEC,UAAU,EAAE;EAAE,CAAC;EAClC,IAAIF,GAAG,EAAE;IACPH,iBAAiB,CAACI,QAAQ,EAAED,GAAG,CAAC;EAClC;EAEA,MAAMG,MAAM,GAAG,QAAQ;EACvB,MAAM;IAAEC,KAAK,GAAG;EAAG,CAAC,GAAGL,OAAO,CAACM,WAAwB;EAEvD,OAAO,CACL;IACE,GAAGN,OAAO;IACVI,MAAM;IACNG,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIC,cAAcA,CAAA,EAAG;MACnB,OAAO,eAAeC,IAAI,CAACC,KAAK,CAAC,GAAG,GAAGb,QAAQ,CAACC,UAAU,CAAC,KAAK;IAClE,CAAC;IACDa,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIK,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgBf,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDe,SAAS,EAAE,CACT;MACEC,OAAO,EAAE;IACX,CAAC,EACD;MACEA,OAAO,EAAE;IACX,CAAC;EAEL,CAAC,EACD;IACE,GAAGnB,OAAO;IACVI,MAAM;IACNG,IAAI,EAAE,UAAU;IAChBC,WAAW,EAAE;MACXC,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChBI,SAAS,EAAE;MACTP,IAAI,EAAE,OAAO;MACbC,MAAM,EAAE;QAAEC,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAAE;IACzC,CAAgB;IAChB,IAAIK,YAAYA,CAAA,EAAG;MACjB,OAAO,gBAAgBf,QAAQ,CAACC,UAAU,KAAK;IACjD,CAAC;IACDe,SAAS,EAAE,CACT;MACEE,SAAS,EAAE;IACb,CAAC,EACD;MACEA,SAAS,EAAE,iCAAiCf,KAAK;IACnD,CAAC;EAEL,CAAC,CACF;AACH","ignoreList":[]}