@wix/motion 1.659.0 → 2.0.0-rc.2

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

@@ -1,381 +0,0 @@
-: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

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

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

@@ -1 +0,0 @@
-{"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

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

package/dist/esm/types.js.map

@@ -1 +0,0 @@
-{"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  | {\n      ranges: { name: string; min: number; max: number; step?: number }[];\n    }\n  | ((element: Element | null, progress: number | null) => void);\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[] | PropertyIndexedKeyframes;\n};\n\nexport type TimeAnimationOptions = {\n  id?: string;\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 = {\n  id?: string;\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":[]}