@wix/motion 1.0.72 → 1.571.0

package/dist/esm/playground/playground.module.scss

@@ -0,0 +1,381 @@
+:global {
+  body {
+    font-family: Helvetica, Arial, sans-serif;
+    overflow-x: clip;
+    overflow-y: scroll;
+    --background-image-url-one: url("https://static.wixstatic.com/media/11062b_77378fc0da68439ebd8fd24a2f51e50cf000.jpg/v1/fill/w_2048,h_1536,al_c,q_85,usm_0.33_1.00_0.00,enc_auto/11062b_77378fc0da68439ebd8fd24a2f51e50cf000.jpg");
+    --background-image-url-two: url("https://static.wixstatic.com/media/11062b_d946d8aad50f410b960b0e4d01e9ab5e~mv2.jpeg/v1/fill/w_2048,h_1536,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/11062b_68de6b1a67ae45fa9ca762e900c7f2d0~mv2.jpg");
+    --background-element-position: absolute;
+  }
+
+  input, select, button {
+    font-size: 0.875rem;
+  }
+}
+
+.stage {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: auto auto;
+  grid-template-areas: 'components global'
+                       'components controls';
+  gap: 1rem;
+  justify-items: center;
+  --component-height: 200px;
+  --component-width: 300px;
+  --component-height-image: 400px;
+  --component-width-image: 300px;
+  --component-height-svg: 300px;
+  --component-width-svg: 220px;
+  --component-height-text: 300px;
+  --component-width-text: 260px;
+
+  &.mouse-stage {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 100%;
+      border-top: 1px dashed lightgreen;
+      border-bottom: 1px dashed darkolivegreen;
+      opacity: 0.5;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: calc(50% - var(--component-width) / 2);
+      height: 100%;
+      border-right: 1px dashed lightgreen;
+      border-left: 1px dashed darkolivegreen;
+      opacity: 0.5;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    &.multiple-components {
+      --component-height: 120px;
+      --component-width: 200px;
+      --component-height-image: 200px;
+      --component-width-image: 120px;
+      --component-height-svg: 200px;
+      --component-width-svg: 120px;
+      --component-height-text: 200px;
+      --component-width-text: 140px;
+
+      & .components {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 20px;
+        margin: 0 20px;
+      }
+    }
+  }
+
+  .components {
+    grid-area: components;
+    align-self: center;
+    pointer-events: none;
+    position: relative;
+
+    & .component {
+      width: var(--component-width);
+      height: var(--component-height);
+      color: white;
+      text-align: center;
+      line-height: var(--component-height);
+      font-size: calc(var(--component-height) / 4);
+      margin: .5rem;
+      transform: rotate(var(--comp-rotate-z, 0));
+      box-shadow: 0 3px 10px 0 rgb(0 0 0 / 0.4);
+      border-radius: 10px;
+    }
+
+    & .image-component {
+      width: var(--component-width-image);
+      height: var(--component-height-image);
+      margin: .5rem;
+      transform: rotate(var(--comp-rotate-z, 0));
+    }
+
+    & .svg-component {
+      width: var(--component-width-svg);
+      height: var(--component-height-svg);
+      margin: .5rem;
+      transform: rotate(var(--comp-rotate-z, 0));
+    }
+
+    & .text-component {
+      width: var(--component-width-text);
+      height: var(--component-height-text);
+      text-align: center;
+      margin: .5rem;
+      transform: rotate(var(--comp-rotate-z, 0));
+      line-height: calc(var(--component-height-text) / 3);
+      font-size: calc(var(--component-height-text) / 5);
+    }
+
+    & .bg-component {
+      margin: 100vh auto 200px auto;
+      width: 100%;
+      height: 400px;
+      color: white;
+      text-align: center;
+      line-height: 400px;
+      font-size: 6em;
+      box-shadow: 0 0 0 1px #000;
+      position: relative;
+
+      &.image-component {
+        width: 70%;
+        overflow: hidden;
+        border-radius: 1rem;
+      }
+
+      .bg-layer {
+        container-type: size;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        clip-path: inset(0);
+      }
+      .bg-media {
+        width: 100%;
+        height: 100%;
+        position: var(--background-element-position);
+
+        &.bg-parallax, &.bg-reveal, &.bg-fake-three-d, &.bg-zoom-in {
+          height: max(100lvh, 100%);
+        }
+        &.bg-zoom-out {
+          width: 115%;
+          height: 115%;
+        }
+        &.bg-skew {
+          padding-bottom: calc(100% * var(--tan-angle));
+          margin-top: calc(-50% * var(--tan-angle));
+        }
+        &.bg-rotate {
+          width: max(100%, calc(100cqw * var(--cos-angle) + 100cqh * var(--sin-angle)));
+          height: max(100%, calc(100cqw * var(--sin-angle) + 100cqh * var(--cos-angle)));
+          translate: calc(50cqw - 50%) calc(50cqh - 50%);
+        }
+        &.bg-pan {
+          width: calc(100% * (var(--speed) + 1));
+        }
+        &.image-parallax {
+          height: calc(100% * var(--speed));
+        }
+      }
+      .bg-image {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-image: var(--background-image-url-one);
+        background-position: center;
+        background-size: cover;
+
+        &.bg-pan {
+          left: calc(-50% * (var(--speed) / (var(--speed) + 1)));
+        }
+        &.bg-zoom-out {
+          top: calc(-750% / 115);
+          left: calc(-750% / 115);
+        }
+      }
+      .content {
+        position: relative;
+      }
+    }
+
+    & .bg-component-two {
+      margin: 200px auto 100vh auto;
+      height: 780px;
+      .bg-image {
+        background-image: var(--background-image-url-two);
+      }
+    }
+  }
+
+  &.scroll-stage {
+    grid-template-areas: 'components components'
+                         'components components';
+    width: 90vw;
+    height: 90vh;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    border-radius: .5em;
+    border: 1px solid #d0d0d0;
+
+    &.bg-scrub {
+      height: 100vh;
+      margin: -1rem auto;
+    }
+
+    .panels {
+      position: fixed;
+      top: 3em;
+      right: 7vw;
+      // opacity: 0.2;
+      // transition: opacity 0.2s ease-in-out;
+
+      // &:hover {
+        //   opacity: 1;
+        // }
+    }
+
+    .components {
+      --attachment: scroll;
+      width: 100%;
+      align-self: start;
+      background-attachment: var(--attachment);
+    }
+
+    .component {
+      margin: 100vh auto;
+    }
+  }
+}
+
+.global-controls {
+  grid-area: global;
+
+  overflow: auto;
+  margin: .5rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px 0 rgb(0 0 0 / 0.2);
+  width: 17rem;
+  background: white;
+  background: rgb(255 255 255 / 0.4);
+  z-index: 1;
+
+  &:hover {
+    background: white;
+  }
+}
+
+.controls {
+  grid-area: controls;
+
+  overflow: auto;
+  margin: .5rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px 0 rgb(0 0 0 / 0.2);
+  width: 17rem;
+  background: rgb(255 255 255 / 0.4);
+  z-index: 1;
+
+  &:hover {
+    background: white;
+  }
+}
+
+.label {
+  display: block;
+  padding: 0.8rem 1.2rem 0.8rem;
+  border-bottom: 1px solid #ddd;
+
+  &.label-bool {
+    padding: 1rem 1.2rem;
+  }
+
+  &.hidden {
+    color: #ddd;
+  }
+
+  & span {
+    text-transform: capitalize;
+    margin-right: 2em;
+    font-weight: bold;
+    font-size: 0.875rem;
+  }
+  & h3 {
+    font-size: 0.875rem;
+    text-transform: capitalize;
+    margin: 0 0 0.5rem 0;
+
+    & + select,
+    & + input[type="text"] {
+      width: 100%;
+      border-color: #ddd;
+    }
+  }
+  &:has([disabled]) {
+    color: grey;
+  }
+}
+
+.range,
+.range-unit,
+.label-bool {
+  display: flex;
+  justify-content: space-between;
+}
+
+.buttons {
+  padding: 1rem;
+  display: flex;
+  justify-content: space-around;
+
+}
+
+.main-select {
+  display: block;
+  padding: 1rem;
+
+  & select {
+    font-weight: bold;
+    width: 100%;
+    font-size: 1.1rem;
+    border-color: transparent;
+    text-transform: capitalize;
+
+    &:hover {
+      border-color: #ccc;
+    }
+  }
+}
+
+.animate-button {
+  background: royalblue;
+  color: white;
+  padding: 0.5em 1em;
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px 0 rgb(0 15 30 / 0.2), inset 0 0.95em 0.5em rgb(255 255 255 / 0.2);
+  font-size: 1em;
+  &:only-child {
+    padding: 0.5em 3em;
+  }
+
+}
+
+.attach-button {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  &.bg-scrub {
+    z-index: 1;
+  }
+}
+
+.select-wrapper {
+  position: fixed;
+  padding: 10px;
+  top: 15px;
+  left: 15px;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px 0 rgb(0 0 0 / 0.2);
+
+  & select {
+    font-size: 1rem;
+  }
+}

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

@@ -0,0 +1,2 @@
+/// <reference types="@wix/jest-yoshi-preset/types" />
+//# sourceMappingURL=test-types.d.js.map

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

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

package/dist/esm/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/dist/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../src/types.ts"],"sourcesContent":["type LengthUnit = 'px' | 'em' | 'rem' | 'vh' | 'vw' | 'vmin' | 'vmax';\n\nexport declare type Length = {\n  value: number;\n  type: LengthUnit;\n};\n\nexport declare type Percentage = {\n  value: number;\n  type: 'percentage';\n};\n\nexport declare type LengthPercentage = Length | Percentage;\n\nexport declare type UnitLengthPercentage = LengthPercentage;\n\nexport type Point = [number, number];\n\nexport type EffectNineDirections =\n  | 'right'\n  | 'top-right'\n  | 'top'\n  | 'top-left'\n  | 'left'\n  | 'bottom-left'\n  | 'bottom'\n  | 'bottom-right'\n  | 'center';\n\nexport type EffectScaleDirection = 'up' | 'down';\n\ndeclare class ViewTimeline {\n  constructor(options: { subject: HTMLElement });\n}\n\ndeclare global {\n  interface Window {\n    ViewTimeline: ViewTimeline;\n  }\n}\n\nexport type AnimationFillMode = 'none' | 'backwards' | 'forwards' | 'both';\n\nexport type BaseDataItemLike<Type extends string = string> = {\n  id?: string;\n  type: Type;\n};\n\nexport type EffectTwoSides = 'left' | 'right';\n\nexport type EffectFourDirections = 'top' | 'right' | 'bottom' | 'left';\nexport type EffectFourCorners =\n  | 'top-right'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-left';\nexport type EffectEightDirections = EffectFourDirections | EffectFourCorners;\nexport type EffectPower = 'soft' | 'medium' | 'hard';\nexport type EffectScrollRange = 'in' | 'out' | 'continuous';\n\nexport type FadeIn = BaseDataItemLike<'FadeIn'>;\nexport type ArcIn = BaseDataItemLike<'ArcIn'> & {\n  direction: EffectFourDirections;\n  power?: EffectPower;\n};\nexport type CurveIn = BaseDataItemLike<'CurveIn'> & {\n  direction: EffectTwoSides;\n};\nexport type DropIn = BaseDataItemLike<'DropIn'> & {\n  power?: EffectPower;\n  initialScale?: number;\n};\nexport type ExpandIn = BaseDataItemLike<'ExpandIn'> & {\n  power?: EffectPower;\n  direction: EffectEightDirections | 'center';\n  initialScale?: number;\n};\nexport type FlipIn = BaseDataItemLike<'FlipIn'> & {\n  power?: EffectPower;\n  direction: EffectFourDirections;\n  initialRotate?: number;\n};\nexport type FloatIn = BaseDataItemLike<'FloatIn'> & {\n  direction: EffectFourDirections;\n};\nexport type FoldIn = BaseDataItemLike<'FoldIn'> & {\n  direction: EffectFourDirections;\n  power?: EffectPower;\n  initialRotate?: number;\n};\nexport type SlideIn = BaseDataItemLike<'SlideIn'> & {\n  power?: EffectPower;\n  direction: EffectFourDirections;\n  initialTranslate?: number;\n};\nexport type SpinIn = BaseDataItemLike<'SpinIn'> & {\n  spins: number;\n  direction: 'clockwise' | 'counter-clockwise';\n  power?: EffectPower;\n  initialScale?: number;\n};\nexport type BounceIn = BaseDataItemLike<'BounceIn'> & {\n  direction: EffectFourDirections | 'center';\n  power?: EffectPower;\n  distanceFactor?: number;\n};\nexport type PunchIn = BaseDataItemLike<'PunchIn'> & {\n  direction: EffectFourCorners | 'center';\n  power?: EffectPower;\n};\nexport type GlideIn = BaseDataItemLike<'GlideIn'> & {\n  direction: number;\n  distance: UnitLengthPercentage;\n  power?: EffectPower;\n  startFromOffScreen?: boolean;\n};\nexport type GlitchIn = BaseDataItemLike<'GlitchIn'> & {\n  direction: number;\n  distance: UnitLengthPercentage;\n  power?: EffectPower;\n  startFromOffScreen?: boolean;\n};\nexport type TurnIn = BaseDataItemLike<'TurnIn'> & {\n  direction: EffectFourCorners;\n  power?: EffectPower;\n};\nexport type CircleIn = BaseDataItemLike<'CircleIn'> & {\n  direction: EffectTwoSides;\n};\nexport type WinkIn = BaseDataItemLike<'WinkIn'> & {\n  direction: 'vertical' | 'horizontal';\n};\nexport type TiltIn = BaseDataItemLike<'TiltIn'> & {\n  direction: EffectTwoSides;\n};\nexport type ShapeIn = BaseDataItemLike<'ShapeIn'> & {\n  shape: 'circle' | 'ellipse' | 'rectangle' | 'diamond' | 'window';\n  direction: EffectEightDirections | 'center';\n};\n\nexport type ShuttersIn = BaseDataItemLike<'ShuttersIn'> & {\n  direction: EffectFourDirections;\n  shutters: number;\n  staggered: boolean;\n  power?: EffectPower;\n};\nexport type GrowIn = BaseDataItemLike<'GrowIn'> & {\n  direction: number;\n  distance: UnitLengthPercentage;\n  power?: EffectPower;\n  initialScale?: number;\n};\nexport type RevealIn = BaseDataItemLike<'RevealIn'> & {\n  direction: EffectFourDirections;\n};\nexport type BlurIn = BaseDataItemLike<'BlurIn'> & {\n  blur?: number;\n  power?: EffectPower;\n};\n\nexport type AnimationOptionsTypes = {\n  time: TimeAnimationOptions & AnimationExtraOptions;\n  scrub: ScrubAnimationOptions & AnimationExtraOptions;\n};\n\nexport type AnimationEffectAPI<Enum extends keyof AnimationOptionsTypes> = {\n  web: (\n    animationOptions: AnimationOptionsTypes[Enum],\n    dom?: DomApi,\n    options?: Record<string, any>,\n  ) => AnimationData[];\n  getNames: (animationOptions: AnimationOptionsTypes[Enum]) => string[];\n  style?: (options: AnimationOptionsTypes[Enum]) => AnimationData[];\n  prepare?: (options: AnimationOptionsTypes[Enum], dom?: DomApi) => void;\n};\n\nexport type WebAnimationEffectFactory<\n  Enum extends keyof AnimationOptionsTypes,\n> = (\n  animationOptions: AnimationOptionsTypes[Enum],\n  dom?: DomApi,\n  options?: Record<string, any>,\n) => AnimationData[];\n\nexport type EntranceAnimation =\n  | FadeIn\n  | ArcIn\n  | CurveIn\n  | DropIn\n  | ExpandIn\n  | FlipIn\n  | FloatIn\n  | FoldIn\n  | SlideIn\n  | SpinIn\n  | BounceIn\n  | PunchIn\n  | GlideIn\n  | GlitchIn\n  | TurnIn\n  | CircleIn\n  | WinkIn\n  | TiltIn\n  | ShapeIn\n  | ShuttersIn\n  | GrowIn\n  | RevealIn\n  | BlurIn;\nexport type EntranceAnimations = Record<\n  EntranceAnimation['type'],\n  AnimationEffectAPI<'time'>\n>;\n\nexport type Breathe = BaseDataItemLike<'Breathe'> & {\n  direction: 'vertical' | 'horizontal' | 'center';\n  distance: UnitLengthPercentage;\n};\nexport type Pulse = BaseDataItemLike<'Pulse'> & {\n  power?: EffectPower;\n  intensity?: number;\n};\nexport type Spin = BaseDataItemLike<'Spin'> & {\n  direction: 'clockwise' | 'counter-clockwise';\n  power?: EffectPower;\n};\nexport type Poke = BaseDataItemLike<'Poke'> & {\n  direction: EffectFourDirections;\n  power?: EffectPower;\n  intensity?: number;\n};\nexport type Flash = BaseDataItemLike<'Flash'>;\nexport type Swing = BaseDataItemLike<'Swing'> & {\n  power?: EffectPower;\n  swing?: number;\n  direction?: EffectFourDirections;\n};\nexport type Flip = BaseDataItemLike<'Flip'> & {\n  direction: 'vertical' | 'horizontal';\n  power?: EffectPower;\n};\nexport type Rubber = BaseDataItemLike<'Rubber'> & {\n  power?: EffectPower;\n  intensity?: number;\n};\nexport type Fold = BaseDataItemLike<'Fold'> & {\n  direction: EffectFourDirections;\n  power?: EffectPower;\n  angle?: number;\n};\nexport type Jello = BaseDataItemLike<'Jello'> & {\n  power?: EffectPower;\n  intensity?: number;\n};\nexport type Wiggle = BaseDataItemLike<'Wiggle'> & {\n  power?: EffectPower;\n  intensity?: number;\n};\nexport type Bounce = BaseDataItemLike<'Bounce'> & {\n  power?: EffectPower;\n  intensity?: number;\n};\nexport type Cross = BaseDataItemLike<'Cross'> & {\n  direction: EffectEightDirections;\n};\nexport type DVD = BaseDataItemLike<'DVD'> & {\n  power?: EffectPower;\n};\n\nexport type Blink = BaseDataItemLike<'Blink'> & {\n  power?: EffectPower;\n  scale?: number;\n  distance?: UnitLengthPercentage;\n};\n\nexport type OngoingAnimation =\n  | Breathe\n  | Blink\n  | Pulse\n  | Spin\n  | Poke\n  | Flash\n  | Swing\n  | Flip\n  | Rubber\n  | Fold\n  | Jello\n  | Wiggle\n  | Bounce\n  | Cross\n  | DVD;\nexport type OngoingAnimations = Record<\n  OngoingAnimation['type'],\n  AnimationEffectAPI<'time'>\n>;\n\nexport type ArcScroll = BaseDataItemLike<'ArcScroll'> & {\n  direction: 'vertical' | 'horizontal';\n  range?: EffectScrollRange;\n};\nexport type BlurScroll = BaseDataItemLike<'BlurScroll'> & {\n  power?: EffectPower;\n  range?: EffectScrollRange;\n  blur?: number;\n};\nexport type FadeScroll = BaseDataItemLike<'FadeScroll'> & {\n  range: EffectScrollRange;\n  opacity: number;\n};\nexport type FlipScroll = BaseDataItemLike<'FlipScroll'> & {\n  direction: 'vertical' | 'horizontal';\n  power?: EffectPower;\n  range?: EffectScrollRange;\n  rotate?: number;\n};\nexport type GrowScroll = BaseDataItemLike<'GrowScroll'> & {\n  direction: EffectNineDirections;\n  power?: EffectPower;\n  range?: EffectScrollRange;\n  scale?: number;\n  speed?: number;\n};\nexport type MoveScroll = BaseDataItemLike<'MoveScroll'> & {\n  angle: number;\n  power?: EffectPower;\n  range?: EffectScrollRange;\n  distance?: UnitLengthPercentage;\n};\nexport type PanScroll = BaseDataItemLike<'PanScroll'> & {\n  direction: EffectTwoSides;\n  distance: UnitLengthPercentage;\n  startFromOffScreen: boolean;\n  range?: EffectScrollRange;\n};\nexport type ParallaxScroll = BaseDataItemLike<'ParallaxScroll'> & {\n  speed: number;\n  range?: EffectScrollRange;\n};\nexport type RevealScroll = BaseDataItemLike<'RevealScroll'> & {\n  direction: EffectFourDirections;\n  range?: EffectScrollRange;\n};\nexport type ShapeScroll = BaseDataItemLike<'ShapeScroll'> & {\n  shape: 'circle' | 'ellipse' | 'rectangle' | 'diamond' | 'window';\n  range?: EffectScrollRange;\n  power?: EffectPower;\n  intensity?: number;\n};\nexport type ShrinkScroll = BaseDataItemLike<'ShrinkScroll'> & {\n  direction: EffectNineDirections;\n  power?: EffectPower;\n  range?: EffectScrollRange;\n  scale?: number;\n  speed?: number;\n};\nexport type ShuttersScroll = BaseDataItemLike<'ShuttersScroll'> & {\n  direction: EffectFourDirections;\n  shutters: number;\n  staggered: boolean;\n  range?: EffectScrollRange;\n};\nexport type SkewPanScroll = BaseDataItemLike<'SkewPanScroll'> & {\n  direction: EffectTwoSides;\n  range?: EffectScrollRange;\n  power?: EffectPower;\n  skew?: number;\n};\nexport type SlideScroll = BaseDataItemLike<'SlideScroll'> & {\n  direction: EffectFourDirections;\n  range?: EffectScrollRange;\n};\nexport type Spin3dScroll = BaseDataItemLike<'Spin3dScroll'> & {\n  range?: EffectScrollRange;\n  power?: EffectPower;\n  rotate?: number;\n  speed?: number;\n};\nexport type SpinScroll = BaseDataItemLike<'SpinScroll'> & {\n  direction: 'clockwise' | 'counter-clockwise';\n  spins: number;\n  range?: EffectScrollRange;\n  power?: EffectPower;\n  scale?: number;\n};\nexport type StretchScroll = BaseDataItemLike<'StretchScroll'> & {\n  power?: EffectPower;\n  range?: EffectScrollRange;\n  stretch?: number;\n};\nexport type TiltScroll = BaseDataItemLike<'TiltScroll'> & {\n  direction: EffectTwoSides;\n  range?: EffectScrollRange;\n  power?: EffectPower;\n  distance?: number;\n};\nexport type TurnScroll = BaseDataItemLike<'TurnScroll'> & {\n  direction: EffectTwoSides;\n  spin: 'clockwise' | 'counter-clockwise';\n  range?: EffectScrollRange;\n  power?: EffectPower;\n  scale?: number;\n};\n\nexport type ScrollAnimation =\n  | ArcScroll\n  | BlurScroll\n  | FadeScroll\n  | FlipScroll\n  | GrowScroll\n  | MoveScroll\n  | PanScroll\n  | ParallaxScroll\n  | RevealScroll\n  | ShapeScroll\n  | ShuttersScroll\n  | ShrinkScroll\n  | SkewPanScroll\n  | SlideScroll\n  | Spin3dScroll\n  | SpinScroll\n  | StretchScroll\n  | TiltScroll\n  | TurnScroll;\nexport type ScrollAnimations = Record<\n  ScrollAnimation['type'],\n  WebAnimationEffectFactory<'scrub'>\n>;\n\nexport type BgCloseUp = BaseDataItemLike<'BgCloseUp'> & {\n  scale?: number;\n};\nexport type BgFade = BaseDataItemLike<'BgFade'> & {\n  range: 'in' | 'out';\n};\nexport type BgFadeBack = BaseDataItemLike<'BgFadeBack'> & {\n  scale?: number;\n};\nexport type BgFake3D = BaseDataItemLike<'BgFake3D'> & {\n  stretch?: number;\n  zoom?: number;\n};\nexport type BgPan = BaseDataItemLike<'BgPan'> & {\n  direction: 'left' | 'right';\n  speed?: number;\n};\nexport type BgParallax = BaseDataItemLike<'BgParallax'> & {\n  speed?: number;\n};\nexport type BgPullBack = BaseDataItemLike<'BgPullBack'> & {\n  scale?: number;\n};\nexport type BgReveal = BaseDataItemLike<'BgReveal'>;\nexport type BgRotate = BaseDataItemLike<'BgRotate'> & {\n  direction?: 'ccw' | 'cw';\n  angle?: number;\n};\nexport type BgSkew = BaseDataItemLike<'BgSkew'> & {\n  direction?: 'ccw' | 'cw';\n  angle?: number;\n};\nexport type BgZoom = BaseDataItemLike<'BgZoom'> & {\n  direction: 'in' | 'out';\n  zoom?: number;\n};\nexport type ImageParallax = BaseDataItemLike<'ImageParallax'> & {\n  reverse?: boolean;\n  speed?: number;\n  isPage?: boolean;\n};\n\nexport type BackgroundScrollAnimation =\n  | BgCloseUp\n  | BgFade\n  | BgFadeBack\n  | BgFake3D\n  | BgPan\n  | BgParallax\n  | BgPullBack\n  | BgReveal\n  | BgRotate\n  | BgSkew\n  | BgZoom\n  | ImageParallax;\n\nexport type BackgroundScrollAnimations = Record<\n  BackgroundScrollAnimation['type'],\n  WebAnimationEffectFactory<'scrub'>\n>;\n\ntype MouseEffectBase = {\n  inverted?: boolean;\n};\n\ntype MouseEffectAxis = 'both' | 'horizontal' | 'vertical';\n\nexport type MousePivotAxis =\n  | 'top'\n  | 'bottom'\n  | 'right'\n  | 'left'\n  | 'center-horizontal'\n  | 'center-vertical';\n\nexport type AiryMouse = BaseDataItemLike<'AiryMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    axis?: MouseEffectAxis;\n    angle?: number;\n    power?: EffectPower;\n  };\nexport type BlobMouse = BaseDataItemLike<'BlobMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    scale?: number;\n    power?: EffectPower;\n  };\nexport type BlurMouse = BaseDataItemLike<'BlurMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    angle?: number;\n    scale?: number;\n    blur?: number;\n    perspective?: number;\n    power?: EffectPower;\n  };\nexport type BounceMouse = BaseDataItemLike<'BounceMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    axis?: MouseEffectAxis;\n    power?: EffectPower;\n  };\nexport type ScaleMouse = BaseDataItemLike<'ScaleMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    axis?: MouseEffectAxis;\n    scale?: number;\n    power?: EffectPower;\n    scaleDirection: EffectScaleDirection;\n  };\nexport type SkewMouse = BaseDataItemLike<'SkewMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    angle?: number;\n    axis?: MouseEffectAxis;\n    power?: EffectPower;\n  };\nexport type SpinMouse = BaseDataItemLike<'SpinMouse'> &\n  MouseEffectBase & {\n    axis?: MouseEffectAxis;\n    power?: EffectPower;\n  };\nexport type SwivelMouse = BaseDataItemLike<'SwivelMouse'> &\n  MouseEffectBase & {\n    angle?: number;\n    perspective?: number;\n    pivotAxis?: MousePivotAxis;\n    power?: EffectPower;\n  };\nexport type Tilt3DMouse = BaseDataItemLike<'Tilt3DMouse'> &\n  MouseEffectBase & {\n    angle?: number;\n    perspective?: number;\n    power?: EffectPower;\n  };\nexport type Track3DMouse = BaseDataItemLike<'Track3DMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    angle?: number;\n    axis?: MouseEffectAxis;\n    perspective?: number;\n    power?: EffectPower;\n  };\nexport type TrackMouse = BaseDataItemLike<'TrackMouse'> &\n  MouseEffectBase & {\n    distance?: UnitLengthPercentage;\n    axis?: MouseEffectAxis;\n    power?: EffectPower;\n  };\n\nexport type CustomMouse = BaseDataItemLike<'CustomMouse'>;\n\nexport type Progress = {\n  x: number;\n  y: number;\n  v?: { x: number; y: number };\n  active?: boolean;\n};\nexport interface MouseAnimationInstance {\n  target: HTMLElement;\n  play: () => void;\n  progress: (progress: Progress) => void;\n  cancel: () => void;\n}\n\nexport interface CustomMouseAnimationInstance extends MouseAnimationInstance {\n  getProgress: () => Progress;\n}\n\nexport type MouseAnimationFactory = (\n  element: HTMLElement,\n) => MouseAnimationInstance;\n\nexport type MouseAnimationFactoryCreate = (\n  options: ScrubAnimationOptions,\n  dom?: DomApi,\n) => MouseAnimationFactory;\n\nexport type MouseAnimation =\n  | AiryMouse\n  | BlobMouse\n  | BlurMouse\n  | BounceMouse\n  | CustomMouse\n  | ScaleMouse\n  | SkewMouse\n  | SpinMouse\n  | SwivelMouse\n  | Tilt3DMouse\n  | Track3DMouse\n  | TrackMouse;\nexport type MouseAnimations = Record<\n  MouseAnimation['type'],\n  MouseAnimationFactoryCreate\n>;\n\nexport type NamedEffect =\n  | EntranceAnimation\n  | OngoingAnimation\n  | ScrollAnimation\n  | MouseAnimation\n  | BackgroundScrollAnimation;\n\nexport type CustomEffect = {\n  ranges: { name: string; min: number; max: number; step?: number }[];\n};\n\nexport type AnimationExtraOptions = {\n  effectId?: string;\n  effect?: (\n    progress: () => number | { x: number | undefined; y: number | undefined },\n  ) => void;\n};\n\nexport type AnimationOptions = (TimeAnimationOptions | ScrubAnimationOptions) &\n  AnimationExtraOptions;\n\nexport type MotionAnimationOptions<T extends keyof AnimationOptionsTypes> =\n  AnimationOptionsTypes[T];\n\nexport type MeasureCallback = (\n  fn: (target: HTMLElement | null) => void,\n) => void;\nexport type DomApi = { measure: MeasureCallback; mutate: MeasureCallback };\n\nexport type NamedEffectFunction = (\n  options: AnimationOptions,\n  domApi?: DomApi | undefined,\n  config?: Record<string, any>,\n) => AnimationData[];\n\nexport type ScrubTransitionEasing =\n  | 'linear'\n  | 'hardBackOut'\n  | 'easeOut'\n  | 'elastic'\n  | 'bounce';\n\nexport type RangeOffset = {\n  name?:\n    | 'entry'\n    | 'exit'\n    | 'contain'\n    | 'cover'\n    | 'entry-crossing'\n    | 'exit-crossing';\n  offset?: LengthPercentage;\n};\n\nexport type MotionKeyframeEffect = BaseDataItemLike<'KeyframeEffect'> & {\n  name: string;\n  keyframes: Keyframe[];\n};\n\nexport type TimeAnimationOptions = BaseDataItemLike<'TimeAnimationOptions'> & {\n  keyframeEffect?: MotionKeyframeEffect;\n  namedEffect?: NamedEffect;\n  customEffect?: CustomEffect;\n  duration?: number;\n  delay?: number;\n  endDelay?: number;\n  easing?: string;\n  iterations?: number;\n  alternate?: boolean;\n  fill?: AnimationFillMode;\n  reversed?: boolean;\n};\n\ntype ScrubAnimationDataBase = BaseDataItemLike<'ScrubAnimationOptions'> & {\n  keyframeEffect?: MotionKeyframeEffect;\n  namedEffect?: NamedEffect;\n  customEffect?: CustomEffect;\n  startOffset?: RangeOffset;\n  endOffset?: RangeOffset;\n  playbackRate?: number;\n  easing?: string;\n  iterations?: number;\n  fill?: AnimationFillMode;\n  alternate?: boolean;\n  reversed?: boolean;\n  transitionDuration?: number;\n  transitionDelay?: number;\n  transitionEasing?: ScrubTransitionEasing;\n  centeredToTarget?: boolean;\n};\n\nexport type ScrubAnimationOptions = ScrubAnimationDataBase & {\n  duration?: LengthPercentage;\n};\n\ntype AnimationDataExtra = {\n  name?: string; // TODO:  need to be added to all animations and then be made required\n  keyframes: Record<string, string | number | undefined>[];\n  custom?: Record<string, string | number | undefined>;\n  composite?: CompositeOperation;\n  part?: string;\n  timing?: Partial<EffectTiming>;\n};\n\nexport type AnimationDataForScrub = ScrubAnimationDataBase & {\n  duration?: LengthPercentage | number;\n  startOffsetAdd?: string;\n  endOffsetAdd?: string;\n};\n\nexport type AnimationData = (TimeAnimationOptions | AnimationDataForScrub) &\n  AnimationDataExtra;\n\n// TODO: need it?\nexport type AnimationProperties = {\n  groups?: string[];\n  schema: { [key: string]: any };\n};\n\nexport type TriggerVariant = {\n  id: string;\n  trigger: 'view-progress' | 'pointer-move';\n  componentId: string;\n};\n\nexport type AnimationGroupOptions = AnimationOptions & {\n  trigger?: Partial<TriggerVariant> | undefined;\n  startOffsetAdd?: string | undefined;\n  endOffsetAdd?: string | undefined;\n  measured?: Promise<void>;\n};\n\nexport type Shape = 'ellipse' | 'circle' | 'rectangle' | 'diamond' | 'window';\n\nexport interface ScrubScrollScene {\n  start: RangeOffset;\n  end: RangeOffset;\n  viewSource: HTMLElement;\n  ready: Promise<void>;\n  getProgress(): number;\n  effect(__: any, p: number): void;\n  disabled: boolean;\n  destroy(): void;\n  groupId?: string;\n}\n\nexport interface ScrubPointerScene {\n  target?: HTMLElement;\n  centeredToTarget?: boolean;\n  transitionDuration?: number;\n  transitionEasing?: ScrubTransitionEasing;\n  getProgress(): Progress;\n  effect(p: Progress): void;\n  disabled: boolean;\n  destroy(): void;\n  allowActiveEvent?: boolean;\n}\n"],"mappings":"","ignoreList":[]}