@wix/motion 1.0.72 → 1.571.0

package/dist/esm/library/ongoing/Swing.js

@@ -0,0 +1,128 @@
+import { getEasing, getEasingFamily, getTimingFactor, toKeyframeValue } from '../../utils';
+const POWER_TO_SWING_FACTOR_MAP = {
+  soft: 1,
+  medium: 2,
+  hard: 3
+};
+const DIRECTION_MAP = {
+  top: {
+    x: 0,
+    y: -1
+  },
+  right: {
+    x: 1,
+    y: 0
+  },
+  bottom: {
+    x: 0,
+    y: 1
+  },
+  left: {
+    x: -1,
+    y: 0
+  }
+};
+const TRANSLATE_DISTANCE = 50;
+const FACTORS_SEQUENCE = [{
+  factor: 1,
+  timeFactor: 0.25
+}, {
+  factor: -1,
+  timeFactor: 0.5
+}, {
+  factor: 0.6,
+  timeFactor: 0.5
+}, {
+  factor: -0.3,
+  timeFactor: 0.5
+}, {
+  factor: 0.2,
+  timeFactor: 0.5
+}, {
+  factor: -0.05,
+  timeFactor: 0.5
+}, {
+  factor: 0,
+  timeFactor: 0.4
+}];
+export function web(options, _dom) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    power,
+    swing = 20,
+    direction = 'top'
+  } = options.namedEffect;
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const easing = options.easing || 'sineInOut';
+  const ease = getEasingFamily(easing);
+  const [name] = getNames(options);
+  const swingDeg = typeof power !== 'undefined' ? 20 * POWER_TO_SWING_FACTOR_MAP[power] : swing;
+  const {
+    x,
+    y
+  } = DIRECTION_MAP[direction];
+  const totalDuration = 3.55 * duration + delay;
+  const timingFactor = getTimingFactor(duration, totalDuration - duration);
+
+  // Create CSS custom properties for the swing configuration
+  const custom = {
+    '--motion-swing-deg': `${swingDeg}deg`,
+    '--motion-trans-x': `${x * TRANSLATE_DISTANCE}%`,
+    '--motion-trans-y': `${y * TRANSLATE_DISTANCE}%`,
+    '--motion-ease-in': getEasing(ease.in),
+    '--motion-ease-inout': getEasing(ease.inOut),
+    '--motion-ease-out': getEasing(ease.out)
+  };
+  const translateBefore = `translate(${toKeyframeValue(custom, '--motion-trans-x', asWeb)}, ${toKeyframeValue(custom, '--motion-trans-y', asWeb)})`;
+  const translateAfter = `translate(calc(${toKeyframeValue(custom, '--motion-trans-x', asWeb)} * -1), calc(${toKeyframeValue(custom, '--motion-trans-y', asWeb)} * -1))`;
+  let currentOffset = 0;
+  // in case a delay is applied, animate a different sequence which decays to a stop
+  const keyframes = delay ? FACTORS_SEQUENCE.map(_ref => {
+    let {
+      factor,
+      timeFactor
+    } = _ref;
+    const keyframeOffset = currentOffset + timeFactor * timingFactor;
+    currentOffset = keyframeOffset;
+    return {
+      offset: keyframeOffset,
+      easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),
+      transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(custom, '--motion-swing-deg', asWeb)} * ${factor})) ${translateAfter}`
+    };
+  }) : [{
+    offset: 0.25,
+    easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),
+    transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(${toKeyframeValue(custom, '--motion-swing-deg', asWeb)}) ${translateAfter}`
+  }, {
+    offset: 0.75,
+    easing: toKeyframeValue(custom, '--motion-ease-in', asWeb),
+    transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(custom, '--motion-swing-deg', asWeb)} * -1)) ${translateAfter}`
+  }];
+  return [{
+    ...options,
+    name,
+    easing: 'linear',
+    delay: 0,
+    duration: delay ? totalDuration : duration,
+    custom,
+    keyframes: [{
+      offset: 0,
+      easing: toKeyframeValue(custom, '--motion-ease-out', asWeb),
+      transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`
+    }, ...keyframes, {
+      offset: 1,
+      transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`
+    }]
+  }];
+}
+export function getNames(options) {
+  const timingFactor = getTimingFactor(options.duration, options.delay, true);
+  return [`motion-swing-${timingFactor}`];
+}
+//# sourceMappingURL=Swing.js.map

package/dist/esm/library/ongoing/Swing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getEasing","getEasingFamily","getTimingFactor","toKeyframeValue","POWER_TO_SWING_FACTOR_MAP","soft","medium","hard","DIRECTION_MAP","top","x","y","right","bottom","left","TRANSLATE_DISTANCE","FACTORS_SEQUENCE","factor","timeFactor","web","options","_dom","style","asWeb","power","swing","direction","namedEffect","duration","delay","easing","ease","name","getNames","swingDeg","totalDuration","timingFactor","custom","in","inOut","out","translateBefore","translateAfter","currentOffset","keyframes","map","_ref","keyframeOffset","offset","transform"],"sources":["../../../../src/library/ongoing/Swing.ts"],"sourcesContent":["import type {\n  Swing,\n  TimeAnimationOptions,\n  DomApi,\n  AnimationExtraOptions,\n} from '../../types';\nimport {\n  getEasing,\n  getEasingFamily,\n  getTimingFactor,\n  toKeyframeValue,\n} from '../../utils';\n\nconst POWER_TO_SWING_FACTOR_MAP = {\n  soft: 1,\n  medium: 2,\n  hard: 3,\n};\n\nconst DIRECTION_MAP = {\n  top: { x: 0, y: -1 },\n  right: { x: 1, y: 0 },\n  bottom: { x: 0, y: 1 },\n  left: { x: -1, y: 0 },\n};\n\nconst TRANSLATE_DISTANCE = 50;\n\nconst FACTORS_SEQUENCE = [\n  { factor: 1, timeFactor: 0.25 },\n  { factor: -1, timeFactor: 0.5 },\n  { factor: 0.6, timeFactor: 0.5 },\n  { factor: -0.3, timeFactor: 0.5 },\n  { factor: 0.2, timeFactor: 0.5 },\n  { factor: -0.05, timeFactor: 0.5 },\n  { factor: 0, timeFactor: 0.4 },\n];\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  _dom?: DomApi,\n) {\n  return style(options, true);\n}\n\nexport function style(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { power, swing = 20, direction = 'top' } = options.namedEffect as Swing;\n\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const easing = options.easing || 'sineInOut';\n  const ease = getEasingFamily(easing);\n  const [name] = getNames(options);\n\n  const swingDeg =\n    typeof power !== 'undefined'\n      ? 20 * POWER_TO_SWING_FACTOR_MAP[power]\n      : swing;\n\n  const { x, y } = DIRECTION_MAP[direction];\n  const totalDuration = 3.55 * duration + delay;\n  const timingFactor = getTimingFactor(\n    duration,\n    totalDuration - duration,\n  ) as number;\n\n  // Create CSS custom properties for the swing configuration\n  const custom: Record<string, string | number> = {\n    '--motion-swing-deg': `${swingDeg}deg`,\n    '--motion-trans-x': `${x * TRANSLATE_DISTANCE}%`,\n    '--motion-trans-y': `${y * TRANSLATE_DISTANCE}%`,\n    '--motion-ease-in': getEasing(ease.in),\n    '--motion-ease-inout': getEasing(ease.inOut),\n    '--motion-ease-out': getEasing(ease.out),\n  };\n\n  const translateBefore = `translate(${toKeyframeValue(\n    custom,\n    '--motion-trans-x',\n    asWeb,\n  )}, ${toKeyframeValue(custom, '--motion-trans-y', asWeb)})`;\n\n  const translateAfter = `translate(calc(${toKeyframeValue(\n    custom,\n    '--motion-trans-x',\n    asWeb,\n  )} * -1), calc(${toKeyframeValue(custom, '--motion-trans-y', asWeb)} * -1))`;\n\n  let currentOffset = 0;\n  // in case a delay is applied, animate a different sequence which decays to a stop\n  const keyframes = delay\n    ? FACTORS_SEQUENCE.map(({ factor, timeFactor }) => {\n        const keyframeOffset = currentOffset + timeFactor * timingFactor;\n        currentOffset = keyframeOffset;\n\n        return {\n          offset: keyframeOffset,\n          easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),\n          transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(\n            custom,\n            '--motion-swing-deg',\n            asWeb,\n          )} * ${factor})) ${translateAfter}`,\n        };\n      })\n    : [\n        {\n          offset: 0.25,\n          easing: toKeyframeValue(custom, '--motion-ease-inout', asWeb),\n          transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(${toKeyframeValue(\n            custom,\n            '--motion-swing-deg',\n            asWeb,\n          )}) ${translateAfter}`,\n        },\n        {\n          offset: 0.75,\n          easing: toKeyframeValue(custom, '--motion-ease-in', asWeb),\n          transform: `rotate(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(calc(${toKeyframeValue(\n            custom,\n            '--motion-swing-deg',\n            asWeb,\n          )} * -1)) ${translateAfter}`,\n        },\n      ];\n\n  return [\n    {\n      ...options,\n      name,\n      easing: 'linear',\n      delay: 0,\n      duration: delay ? totalDuration : duration,\n      custom,\n      keyframes: [\n        {\n          offset: 0,\n          easing: toKeyframeValue(custom, '--motion-ease-out', asWeb),\n          transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`,\n        },\n        ...keyframes,\n        {\n          offset: 1,\n          transform: `rotateZ(var(--comp-rotate-z, 0deg)) ${translateBefore} rotate(0deg) ${translateAfter}`,\n        },\n      ],\n    },\n  ];\n}\n\nexport function getNames(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n) {\n  const timingFactor = getTimingFactor(options.duration!, options.delay!, true);\n\n  return [`motion-swing-${timingFactor}`];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/library/ongoing/Wiggle.js

@@ -0,0 +1,86 @@
+import { getTimingFactor, roundNumber, toKeyframeValue, mapRange } from '../../utils';
+const POWER_TO_WIGGLE_FACTOR_MAP = {
+  soft: 1,
+  medium: 2,
+  hard: 4
+};
+const TRANSFORM_KEYFRAMES = [{
+  keyframe: 18,
+  transY: -10,
+  accRotate: 10
+}, {
+  keyframe: 35,
+  transY: 0,
+  accRotate: -18
+}, {
+  keyframe: 53,
+  transY: 0,
+  accRotate: 14
+}, {
+  keyframe: 73,
+  transY: 0,
+  accRotate: -10
+}, {
+  keyframe: 100,
+  transY: 0,
+  accRotate: 4
+}];
+export function web(options, _dom) {
+  return style(options, true);
+}
+export function style(options, asWeb) {
+  if (asWeb === void 0) {
+    asWeb = false;
+  }
+  const {
+    power,
+    intensity = 0.5
+  } = options.namedEffect;
+  const duration = options.duration || 1;
+  const delay = options.delay || 0;
+  const timingFactor = getTimingFactor(duration, delay);
+  const [name] = getNames(options);
+  const responsiveWiggleFactor = mapRange(0, 1, POWER_TO_WIGGLE_FACTOR_MAP.soft, POWER_TO_WIGGLE_FACTOR_MAP.hard, intensity);
+  const wiggleFactor = power && POWER_TO_WIGGLE_FACTOR_MAP[power] || responsiveWiggleFactor;
+  let currentRotation = 0;
+
+  // Create CSS custom properties for the wiggle configuration
+  const custom = {
+    '--motion-wiggle-factor': wiggleFactor
+  };
+  const keyframes = TRANSFORM_KEYFRAMES.map(_ref => {
+    let {
+      keyframe,
+      transY,
+      accRotate
+    } = _ref;
+    const offset = keyframe / 100 * timingFactor;
+    const rotateValue = `calc(var(--comp-rotate-z, 0deg) + ${roundNumber(currentRotation + accRotate * wiggleFactor)}deg)`;
+    const translateYValue = `${transY * wiggleFactor}px`;
+    const rotateKey = `--motion-rotate-${keyframe}`;
+    const translateYKey = `--motion-translate-y-${keyframe}`;
+
+    // For non-web usage, add the values to custom properties
+    custom[rotateKey] = rotateValue;
+    custom[translateYKey] = translateYValue;
+    currentRotation += accRotate * wiggleFactor;
+    return {
+      offset,
+      transform: `rotate(${toKeyframeValue(custom, rotateKey, asWeb)}) translateY(${toKeyframeValue(custom, translateYKey, asWeb)})`
+    };
+  });
+  return [{
+    ...options,
+    name,
+    easing: 'linear',
+    delay: 0,
+    duration: duration + delay,
+    custom,
+    keyframes
+  }];
+}
+export function getNames(options) {
+  const timingFactor = getTimingFactor(options.duration, options.delay, true);
+  return [`motion-wiggle-${timingFactor}`];
+}
+//# sourceMappingURL=Wiggle.js.map

package/dist/esm/library/ongoing/Wiggle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getTimingFactor","roundNumber","toKeyframeValue","mapRange","POWER_TO_WIGGLE_FACTOR_MAP","soft","medium","hard","TRANSFORM_KEYFRAMES","keyframe","transY","accRotate","web","options","_dom","style","asWeb","power","intensity","namedEffect","duration","delay","timingFactor","name","getNames","responsiveWiggleFactor","wiggleFactor","currentRotation","custom","keyframes","map","_ref","offset","rotateValue","translateYValue","rotateKey","translateYKey","transform","easing"],"sources":["../../../../src/library/ongoing/Wiggle.ts"],"sourcesContent":["import type {\n  Wiggle,\n  TimeAnimationOptions,\n  DomApi,\n  AnimationExtraOptions,\n} from '../../types';\nimport {\n  getTimingFactor,\n  roundNumber,\n  toKeyframeValue,\n  mapRange,\n} from '../../utils';\n\nconst POWER_TO_WIGGLE_FACTOR_MAP = {\n  soft: 1,\n  medium: 2,\n  hard: 4,\n};\n\nconst TRANSFORM_KEYFRAMES = [\n  { keyframe: 18, transY: -10, accRotate: 10 },\n  { keyframe: 35, transY: 0, accRotate: -18 },\n  { keyframe: 53, transY: 0, accRotate: 14 },\n  { keyframe: 73, transY: 0, accRotate: -10 },\n  { keyframe: 100, transY: 0, accRotate: 4 },\n];\n\nexport function web(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  _dom?: DomApi,\n) {\n  return style(options, true);\n}\n\nexport function style(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n  asWeb = false,\n) {\n  const { power, intensity = 0.5 } = options.namedEffect as Wiggle;\n  const duration = options.duration || 1;\n  const delay = options.delay || 0;\n  const timingFactor = getTimingFactor(duration, delay) as number;\n  const [name] = getNames(options);\n\n  const responsiveWiggleFactor = mapRange(\n    0,\n    1,\n    POWER_TO_WIGGLE_FACTOR_MAP.soft,\n    POWER_TO_WIGGLE_FACTOR_MAP.hard,\n    intensity,\n  );\n  const wiggleFactor =\n    (power && POWER_TO_WIGGLE_FACTOR_MAP[power]) || responsiveWiggleFactor;\n\n  let currentRotation = 0;\n\n  // Create CSS custom properties for the wiggle configuration\n  const custom: Record<string, string | number> = {\n    '--motion-wiggle-factor': wiggleFactor,\n  };\n\n  const keyframes = TRANSFORM_KEYFRAMES.map(\n    ({ keyframe, transY, accRotate }) => {\n      const offset = (keyframe / 100) * timingFactor;\n      const rotateValue = `calc(var(--comp-rotate-z, 0deg) + ${roundNumber(\n        currentRotation + accRotate * wiggleFactor,\n      )}deg)`;\n      const translateYValue = `${transY * wiggleFactor}px`;\n\n      const rotateKey = `--motion-rotate-${keyframe}`;\n      const translateYKey = `--motion-translate-y-${keyframe}`;\n\n      // For non-web usage, add the values to custom properties\n      custom[rotateKey] = rotateValue;\n      custom[translateYKey] = translateYValue;\n\n      currentRotation += accRotate * wiggleFactor;\n\n      return {\n        offset,\n        transform: `rotate(${toKeyframeValue(\n          custom,\n          rotateKey,\n          asWeb,\n        )}) translateY(${toKeyframeValue(custom, translateYKey, asWeb)})`,\n      };\n    },\n  );\n\n  return [\n    {\n      ...options,\n      name,\n      easing: 'linear',\n      delay: 0,\n      duration: duration + delay,\n      custom,\n      keyframes,\n    },\n  ];\n}\n\nexport function getNames(\n  options: TimeAnimationOptions & AnimationExtraOptions,\n) {\n  const timingFactor = getTimingFactor(options.duration!, options.delay!, true);\n\n  return [`motion-wiggle-${timingFactor}`];\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/library/ongoing/index.js

@@ -0,0 +1,33 @@
+import * as Bounce from './Bounce';
+import * as Breathe from './Breathe';
+// import * as Blink from './Blink';
+import * as Cross from './Cross';
+// import * as DVD from './DVD';
+import * as Flash from './Flash';
+import * as Flip from './Flip';
+import * as Fold from './Fold';
+import * as Jello from './Jello';
+import * as Poke from './Poke';
+import * as Rubber from './Rubber';
+import * as Pulse from './Pulse';
+import * as Spin from './Spin';
+import * as Swing from './Swing';
+import * as Wiggle from './Wiggle';
+export const ongoingAnimations = {
+  Bounce,
+  Breathe,
+  // Blink,
+  Cross,
+  // DVD,
+  Flash,
+  Flip,
+  Fold,
+  Jello,
+  Poke,
+  Rubber,
+  Pulse,
+  Spin,
+  Swing,
+  Wiggle
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/library/ongoing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Bounce","Breathe","Cross","Flash","Flip","Fold","Jello","Poke","Rubber","Pulse","Spin","Swing","Wiggle","ongoingAnimations"],"sources":["../../../../src/library/ongoing/index.ts"],"sourcesContent":["import type { OngoingAnimations } from '../../types';\nimport * as Bounce from './Bounce';\nimport * as Breathe from './Breathe';\n// import * as Blink from './Blink';\nimport * as Cross from './Cross';\n// import * as DVD from './DVD';\nimport * as Flash from './Flash';\nimport * as Flip from './Flip';\nimport * as Fold from './Fold';\nimport * as Jello from './Jello';\nimport * as Poke from './Poke';\nimport * as Rubber from './Rubber';\nimport * as Pulse from './Pulse';\nimport * as Spin from './Spin';\nimport * as Swing from './Swing';\nimport * as Wiggle from './Wiggle';\n\nexport const ongoingAnimations: Partial<OngoingAnimations> = {\n  Bounce,\n  Breathe,\n  // Blink,\n  Cross,\n  // DVD,\n  Flash,\n  Flip,\n  Fold,\n  Jello,\n  Poke,\n  Rubber,\n  Pulse,\n  Spin,\n  Swing,\n  Wiggle,\n};\n"],"mappings":"AACA,OAAO,KAAKA,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,OAAO,MAAM,WAAW;AACpC;AACA,OAAO,KAAKC,KAAK,MAAM,SAAS;AAChC;AACA,OAAO,KAAKC,KAAK,MAAM,SAAS;AAChC,OAAO,KAAKC,IAAI,MAAM,QAAQ;AAC9B,OAAO,KAAKC,IAAI,MAAM,QAAQ;AAC9B,OAAO,KAAKC,KAAK,MAAM,SAAS;AAChC,OAAO,KAAKC,IAAI,MAAM,QAAQ;AAC9B,OAAO,KAAKC,MAAM,MAAM,UAAU;AAClC,OAAO,KAAKC,KAAK,MAAM,SAAS;AAChC,OAAO,KAAKC,IAAI,MAAM,QAAQ;AAC9B,OAAO,KAAKC,KAAK,MAAM,SAAS;AAChC,OAAO,KAAKC,MAAM,MAAM,UAAU;AAElC,OAAO,MAAMC,iBAA6C,GAAG;EAC3Db,MAAM;EACNC,OAAO;EACP;EACAC,KAAK;EACL;EACAC,KAAK;EACLC,IAAI;EACJC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,MAAM;EACNC,KAAK;EACLC,IAAI;EACJC,KAAK;EACLC;AACF,CAAC","ignoreList":[]}

package/dist/esm/library/ongoing/test/testUtils.js

@@ -0,0 +1,5 @@
+export const baseMockOptions = {
+  id: 'test-id',
+  type: 'TimeAnimationOptions'
+};
+//# sourceMappingURL=testUtils.js.map

package/dist/esm/library/ongoing/test/testUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["baseMockOptions","id","type"],"sources":["../../../../../src/library/ongoing/test/testUtils.ts"],"sourcesContent":["import { TimeAnimationOptions } from '../../../types';\n\nexport const baseMockOptions: TimeAnimationOptions = {\n  id: 'test-id',\n  type: 'TimeAnimationOptions',\n};\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,EAAE,EAAE,SAAS;EACbC,IAAI,EAAE;AACR,CAAC","ignoreList":[]}

package/dist/esm/library/scroll/ArcScroll.js

@@ -0,0 +1,54 @@
+const ROTATE_DIRECTION_MAP = {
+  vertical: 'rotateX',
+  horizontal: 'rotateY'
+};
+const ROTATION = 68;
+const RANGES_MAP = {
+  in: {
+    fromValue: -ROTATION,
+    toValue: 0
+  },
+  out: {
+    fromValue: 0,
+    toValue: ROTATION
+  },
+  continuous: {
+    fromValue: -ROTATION,
+    toValue: ROTATION
+  }
+};
+export default function create(options) {
+  const {
+    direction = 'horizontal',
+    range = 'in'
+  } = options.namedEffect;
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  const rotateAxis = ROTATE_DIRECTION_MAP[direction];
+  const {
+    fromValue,
+    toValue
+  } = RANGES_MAP[range];
+  const easing = 'linear';
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes: [{
+      transform: `perspective(500px) translateZ(-300px)  ${rotateAxis}(${fromValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `perspective(500px) translateZ(-300px) ${rotateAxis}(${toValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<fromValue>deg) translateZ(300px) rotate(<rotation>);
+   *   }
+   *   to {
+   *     transform-origin: 50% 50% -300px;
+   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<toValue>deg) translateZ(300px) rotate(<rotation>);
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=ArcScroll.js.map

package/dist/esm/library/scroll/ArcScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ROTATE_DIRECTION_MAP","vertical","horizontal","ROTATION","RANGES_MAP","in","fromValue","toValue","out","continuous","create","options","direction","range","namedEffect","fill","rotateAxis","easing","keyframes","transform"],"sources":["../../../../src/library/scroll/ArcScroll.ts"],"sourcesContent":["import type {\n  ScrubAnimationOptions,\n  ArcScroll,\n  AnimationFillMode,\n} from '../../types';\n\nconst ROTATE_DIRECTION_MAP = {\n  vertical: 'rotateX',\n  horizontal: 'rotateY',\n};\n\nconst ROTATION = 68;\n\nconst RANGES_MAP = {\n  in: { fromValue: -ROTATION, toValue: 0 },\n  out: { fromValue: 0, toValue: ROTATION },\n  continuous: { fromValue: -ROTATION, toValue: ROTATION },\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const { direction = 'horizontal', range = 'in' } =\n    options.namedEffect as ArcScroll;\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  const rotateAxis = ROTATE_DIRECTION_MAP[direction];\n  const { fromValue, toValue } = RANGES_MAP[range];\n  const easing = 'linear';\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          transform: `perspective(500px) translateZ(-300px)  ${rotateAxis}(${fromValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `perspective(500px) translateZ(-300px) ${rotateAxis}(${toValue}deg) translateZ(300px) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<fromValue>deg) translateZ(300px) rotate(<rotation>);\n   *   }\n   *   to {\n   *     transform-origin: 50% 50% -300px;\n   *     transform: perspective(500px) translateZ(-300px) <rotateAxis>(<toValue>deg) translateZ(300px) rotate(<rotation>);\n   *   }\n   * }\n   */\n}\n"],"mappings":"AAMA,MAAMA,oBAAoB,GAAG;EAC3BC,QAAQ,EAAE,SAAS;EACnBC,UAAU,EAAE;AACd,CAAC;AAED,MAAMC,QAAQ,GAAG,EAAE;AAEnB,MAAMC,UAAU,GAAG;EACjBC,EAAE,EAAE;IAAEC,SAAS,EAAE,CAACH,QAAQ;IAAEI,OAAO,EAAE;EAAE,CAAC;EACxCC,GAAG,EAAE;IAAEF,SAAS,EAAE,CAAC;IAAEC,OAAO,EAAEJ;EAAS,CAAC;EACxCM,UAAU,EAAE;IAAEH,SAAS,EAAE,CAACH,QAAQ;IAAEI,OAAO,EAAEJ;EAAS;AACxD,CAAC;AAED,eAAe,SAASO,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IAAEC,SAAS,GAAG,YAAY;IAAEC,KAAK,GAAG;EAAK,CAAC,GAC9CF,OAAO,CAACG,WAAwB;EAClC,MAAMC,IAAI,GACRF,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGF,OAAO,CAACI,IAClD;EAEtB,MAAMC,UAAU,GAAGhB,oBAAoB,CAACY,SAAS,CAAC;EAClD,MAAM;IAAEN,SAAS;IAAEC;EAAQ,CAAC,GAAGH,UAAU,CAACS,KAAK,CAAC;EAChD,MAAMI,MAAM,GAAG,QAAQ;EAEvB,OAAO,CACL;IACE,GAAGN,OAAO;IACVI,IAAI;IACJE,MAAM;IACNC,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,0CAA0CH,UAAU,IAAIV,SAAS;IAC9E,CAAC,EACD;MACEa,SAAS,EAAE,yCAAyCH,UAAU,IAAIT,OAAO;IAC3E,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/esm/library/scroll/BlurScroll.js

@@ -0,0 +1,39 @@
+const BLUR_POWER_MAP = {
+  soft: 6,
+  medium: 25,
+  hard: 50
+};
+export default function create(options) {
+  const {
+    blur = 6,
+    power,
+    range = 'in'
+  } = options.namedEffect;
+  const blurFactor = power && BLUR_POWER_MAP[power] ? BLUR_POWER_MAP[power] : blur;
+  const fromValue = range === 'out' ? 0 : blurFactor;
+  const toValue = range === 'out' ? blurFactor : 0;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  return [{
+    ...options,
+    fill,
+    easing,
+    composite: 'add',
+    keyframes: [{
+      filter: `blur(${fromValue}px)`
+    }, {
+      filter: `blur(${toValue}px)`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     filter: blur(<fromValue>px);
+   *   }
+   *   to {
+   *     filter: blur(<toValue>px);
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=BlurScroll.js.map

package/dist/esm/library/scroll/BlurScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BLUR_POWER_MAP","soft","medium","hard","create","options","blur","power","range","namedEffect","blurFactor","fromValue","toValue","easing","fill","composite","keyframes","filter"],"sources":["../../../../src/library/scroll/BlurScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  BlurScroll,\n  ScrubAnimationOptions,\n} from '../../types';\n\nconst BLUR_POWER_MAP = {\n  soft: 6,\n  medium: 25,\n  hard: 50,\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const { blur = 6, power, range = 'in' } = options.namedEffect as BlurScroll;\n  const blurFactor =\n    power && BLUR_POWER_MAP[power] ? BLUR_POWER_MAP[power] : blur;\n\n  const fromValue = range === 'out' ? 0 : blurFactor;\n  const toValue = range === 'out' ? blurFactor : 0;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      composite: 'add' as const,\n      keyframes: [\n        {\n          filter: `blur(${fromValue}px)`,\n        },\n        {\n          filter: `blur(${toValue}px)`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     filter: blur(<fromValue>px);\n   *   }\n   *   to {\n   *     filter: blur(<toValue>px);\n   *   }\n   * }\n   */\n}\n"],"mappings":"AAMA,MAAMA,cAAc,GAAG;EACrBC,IAAI,EAAE,CAAC;EACPC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE;AACR,CAAC;AAED,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IAAEC,IAAI,GAAG,CAAC;IAAEC,KAAK;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGH,OAAO,CAACI,WAAyB;EAC3E,MAAMC,UAAU,GACdH,KAAK,IAAIP,cAAc,CAACO,KAAK,CAAC,GAAGP,cAAc,CAACO,KAAK,CAAC,GAAGD,IAAI;EAE/D,MAAMK,SAAS,GAAGH,KAAK,KAAK,KAAK,GAAG,CAAC,GAAGE,UAAU;EAClD,MAAME,OAAO,GAAGJ,KAAK,KAAK,KAAK,GAAGE,UAAU,GAAG,CAAC;EAChD,MAAMG,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRN,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGH,OAAO,CAACS,IAClD;EAEtB,OAAO,CACL;IACE,GAAGT,OAAO;IACVS,IAAI;IACJD,MAAM;IACNE,SAAS,EAAE,KAAc;IACzBC,SAAS,EAAE,CACT;MACEC,MAAM,EAAE,QAAQN,SAAS;IAC3B,CAAC,EACD;MACEM,MAAM,EAAE,QAAQL,OAAO;IACzB,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/esm/library/scroll/FadeScroll.js

@@ -0,0 +1,32 @@
+export default function create(options) {
+  const {
+    opacity = 0,
+    range = 'in'
+  } = options.namedEffect;
+  const isOut = range === 'out';
+  const fromValue = isOut ? 'var(--comp-opacity, 1)' : opacity;
+  const toValue = isOut ? opacity : 'var(--comp-opacity, 1)';
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes: [{
+      opacity: fromValue
+    }, {
+      opacity: toValue
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     opacity: <fromValue>;
+   *   }
+   *   to {
+   *     opacity: <toValue>;
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=FadeScroll.js.map

package/dist/esm/library/scroll/FadeScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["create","options","opacity","range","namedEffect","isOut","fromValue","toValue","easing","fill","keyframes"],"sources":["../../../../src/library/scroll/FadeScroll.ts"],"sourcesContent":["import type {\n  FadeScroll,\n  ScrubAnimationOptions,\n  AnimationFillMode,\n} from '../../types';\n\nexport default function create(options: ScrubAnimationOptions) {\n  const { opacity = 0, range = 'in' } = options.namedEffect as FadeScroll;\n  const isOut = range === 'out';\n  const fromValue = isOut ? 'var(--comp-opacity, 1)' : opacity;\n  const toValue = isOut ? opacity : 'var(--comp-opacity, 1)';\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          opacity: fromValue,\n        },\n        {\n          opacity: toValue,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     opacity: <fromValue>;\n   *   }\n   *   to {\n   *     opacity: <toValue>;\n   *   }\n   * }\n   */\n}\n"],"mappings":"AAMA,eAAe,SAASA,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IAAEC,OAAO,GAAG,CAAC;IAAEC,KAAK,GAAG;EAAK,CAAC,GAAGF,OAAO,CAACG,WAAyB;EACvE,MAAMC,KAAK,GAAGF,KAAK,KAAK,KAAK;EAC7B,MAAMG,SAAS,GAAGD,KAAK,GAAG,wBAAwB,GAAGH,OAAO;EAC5D,MAAMK,OAAO,GAAGF,KAAK,GAAGH,OAAO,GAAG,wBAAwB;EAC1D,MAAMM,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRN,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGF,OAAO,CAACQ,IAClD;EAEtB,OAAO,CACL;IACE,GAAGR,OAAO;IACVQ,IAAI;IACJD,MAAM;IACNE,SAAS,EAAE,CACT;MACER,OAAO,EAAEI;IACX,CAAC,EACD;MACEJ,OAAO,EAAEK;IACX,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/esm/library/scroll/FlipScroll.js

@@ -0,0 +1,46 @@
+const ROTATE_POWER_MAP = {
+  soft: 60,
+  medium: 120,
+  hard: 420
+};
+const ROTATE_DIRECTION_MAP = {
+  vertical: 'rotateX',
+  horizontal: 'rotateY'
+};
+export default function create(options) {
+  const {
+    rotate = 240,
+    direction = 'horizontal',
+    power,
+    range = 'continuous'
+  } = options.namedEffect;
+  const rotationAxis = ROTATE_DIRECTION_MAP[direction];
+  const flipValue = power && ROTATE_POWER_MAP[power] ? ROTATE_POWER_MAP[power] : rotate;
+
+  // const { fromValue, toValue } = rangeValues[range](rotation);
+  const fromValue = range === 'out' ? 0 : -flipValue;
+  const toValue = range === 'in' ? 0 : flipValue;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  return [{
+    ...options,
+    fill,
+    easing,
+    keyframes: [{
+      transform: `perspective(800px) ${rotationAxis}(${fromValue}deg) rotate(var(--comp-rotate-z, 0deg))`
+    }, {
+      transform: `perspective(800px) ${rotationAxis}(${toValue}deg) rotate(var(--comp-rotate-z, 0deg))`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     transform: perspective(800px) <rotationAxis>(fromValue) rotate(<rotation>);
+   *   }
+   *   to {
+   *     transform: perspective(800px) <rotationAxis>(toValue) rotate(<rotation>);
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=FlipScroll.js.map

package/dist/esm/library/scroll/FlipScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ROTATE_POWER_MAP","soft","medium","hard","ROTATE_DIRECTION_MAP","vertical","horizontal","create","options","rotate","direction","power","range","namedEffect","rotationAxis","flipValue","fromValue","toValue","easing","fill","keyframes","transform"],"sources":["../../../../src/library/scroll/FlipScroll.ts"],"sourcesContent":["import type {\n  AnimationFillMode,\n  FlipScroll,\n  ScrubAnimationOptions,\n} from '../../types';\n\nconst ROTATE_POWER_MAP = {\n  soft: 60,\n  medium: 120,\n  hard: 420,\n};\n\nconst ROTATE_DIRECTION_MAP = {\n  vertical: 'rotateX',\n  horizontal: 'rotateY',\n};\n\nexport default function create(options: ScrubAnimationOptions) {\n  const {\n    rotate = 240,\n    direction = 'horizontal',\n    power,\n    range = 'continuous',\n  } = options.namedEffect as FlipScroll;\n\n  const rotationAxis = ROTATE_DIRECTION_MAP[direction];\n  const flipValue =\n    power && ROTATE_POWER_MAP[power] ? ROTATE_POWER_MAP[power] : rotate;\n\n  // const { fromValue, toValue } = rangeValues[range](rotation);\n  const fromValue = range === 'out' ? 0 : -flipValue;\n  const toValue = range === 'in' ? 0 : flipValue;\n  const easing = 'linear';\n  const fill = (\n    range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill\n  ) as AnimationFillMode;\n\n  return [\n    {\n      ...options,\n      fill,\n      easing,\n      keyframes: [\n        {\n          transform: `perspective(800px) ${rotationAxis}(${fromValue}deg) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n        {\n          transform: `perspective(800px) ${rotationAxis}(${toValue}deg) rotate(var(--comp-rotate-z, 0deg))`,\n        },\n      ],\n    },\n  ];\n  /*\n   * @keyframes <name> {\n   *   from {\n   *     transform: perspective(800px) <rotationAxis>(fromValue) rotate(<rotation>);\n   *   }\n   *   to {\n   *     transform: perspective(800px) <rotationAxis>(toValue) rotate(<rotation>);\n   *   }\n   * }\n   */\n}\n"],"mappings":"AAMA,MAAMA,gBAAgB,GAAG;EACvBC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,GAAG;EACXC,IAAI,EAAE;AACR,CAAC;AAED,MAAMC,oBAAoB,GAAG;EAC3BC,QAAQ,EAAE,SAAS;EACnBC,UAAU,EAAE;AACd,CAAC;AAED,eAAe,SAASC,MAAMA,CAACC,OAA8B,EAAE;EAC7D,MAAM;IACJC,MAAM,GAAG,GAAG;IACZC,SAAS,GAAG,YAAY;IACxBC,KAAK;IACLC,KAAK,GAAG;EACV,CAAC,GAAGJ,OAAO,CAACK,WAAyB;EAErC,MAAMC,YAAY,GAAGV,oBAAoB,CAACM,SAAS,CAAC;EACpD,MAAMK,SAAS,GACbJ,KAAK,IAAIX,gBAAgB,CAACW,KAAK,CAAC,GAAGX,gBAAgB,CAACW,KAAK,CAAC,GAAGF,MAAM;;EAErE;EACA,MAAMO,SAAS,GAAGJ,KAAK,KAAK,KAAK,GAAG,CAAC,GAAG,CAACG,SAAS;EAClD,MAAME,OAAO,GAAGL,KAAK,KAAK,IAAI,GAAG,CAAC,GAAGG,SAAS;EAC9C,MAAMG,MAAM,GAAG,QAAQ;EACvB,MAAMC,IAAI,GACRP,KAAK,KAAK,KAAK,GAAG,UAAU,GAAGA,KAAK,KAAK,IAAI,GAAG,WAAW,GAAGJ,OAAO,CAACW,IAClD;EAEtB,OAAO,CACL;IACE,GAAGX,OAAO;IACVW,IAAI;IACJD,MAAM;IACNE,SAAS,EAAE,CACT;MACEC,SAAS,EAAE,sBAAsBP,YAAY,IAAIE,SAAS;IAC5D,CAAC,EACD;MACEK,SAAS,EAAE,sBAAsBP,YAAY,IAAIG,OAAO;IAC1D,CAAC;EAEL,CAAC,CACF;EACD;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","ignoreList":[]}

package/dist/esm/library/scroll/GrowScroll.js

@@ -0,0 +1,157 @@
+const MAX_Y_TRAVEL = 40;
+const POWER_MAP = {
+  soft: {
+    scaleFrom: 0.8,
+    scaleTo: 1.2,
+    travelY: 0
+  },
+  medium: {
+    scaleFrom: 0.3,
+    scaleTo: 1.7,
+    travelY: 0.75
+  },
+  hard: {
+    scaleFrom: 0,
+    scaleTo: 4,
+    travelY: 1
+  }
+};
+const directionMap = {
+  top: [0, -50],
+  'top-right': [50, -50],
+  right: [50, 0],
+  'bottom-right': [50, 50],
+  bottom: [0, 50],
+  'bottom-left': [-50, 50],
+  left: [-50, 0],
+  'top-left': [-50, -50],
+  center: [0, 0]
+};
+const RANGES_MAP = {
+  in: (scaleFrom, _scaleTo, travelY) => ({
+    fromValues: {
+      scale: scaleFrom,
+      travel: travelY
+    },
+    toValues: {
+      scale: 1,
+      travel: 0
+    }
+  }),
+  out: (_scaleFrom, scaleTo, travelY) => ({
+    fromValues: {
+      scale: 1,
+      travel: 0
+    },
+    toValues: {
+      scale: scaleTo,
+      travel: -travelY
+    }
+  }),
+  continuous: (scaleFrom, scaleTo, travelY) => ({
+    fromValues: {
+      scale: scaleFrom,
+      travel: travelY
+    },
+    toValues: {
+      scale: scaleTo,
+      travel: -travelY
+    }
+  })
+};
+function getScrubOffsets(_ref) {
+  let {
+    power,
+    range = 'in',
+    speed = 0
+  } = _ref;
+  const offset = power && POWER_MAP[power] ? POWER_MAP[power].travelY : Math.abs(speed) * MAX_Y_TRAVEL;
+  return {
+    start: range === 'out' ? '0px' : `${-offset}vh`,
+    end: range === 'in' ? '0px' : `${offset}vh`
+  };
+}
+export default function create(options) {
+  const {
+    power,
+    range = 'in',
+    scale = range === 'in' ? POWER_MAP.hard.scaleFrom : POWER_MAP.hard.scaleTo,
+    direction = 'center',
+    speed = 0
+  } = options.namedEffect;
+  const easing = 'linear';
+  const fill = range === 'out' ? 'forwards' : range === 'in' ? 'backwards' : options.fill;
+  const {
+    scaleFrom,
+    scaleTo,
+    travelY
+  } = power && POWER_MAP[power] ? POWER_MAP[power] : {
+    scaleFrom: scale,
+    scaleTo: scale,
+    travelY: speed
+  };
+  const {
+    fromValues,
+    toValues
+  } = RANGES_MAP[range](scaleFrom, scaleTo, travelY * -MAX_Y_TRAVEL);
+  const {
+    start,
+    end
+  } = getScrubOffsets(options.namedEffect);
+  const [trnsX, trnsY] = directionMap[direction];
+  return [{
+    ...options,
+    fill,
+    easing,
+    startOffsetAdd: start,
+    endOffsetAdd: end,
+    keyframes: [{
+      transform: `translateY(${fromValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${fromValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`
+    }, {
+      transform: `translateY(${toValues.travel}vh) translate(${trnsX}%, ${trnsY}%) scale(${toValues.scale}) translate(${-trnsX}%, ${-trnsY}%) rotate(var(--comp-rotate-z, 0))`
+    }]
+  }];
+  /*
+   * @keyframes <name> {
+   *   from {
+   *     translate: 0 <fromValues.travel>;
+   *   }
+   *   to {
+   *     translate: 0 <toValues.travel>;
+   *   }
+   * }
+   *
+   * @keyframes <name>-scale {
+   *   from {
+   *     scale: <fromValues.scale>;
+   *   }
+   *   <scaleDelay>% {
+   *     scale: <fromValues.scale>;
+   *     animation-timing-function: <scaleEase>;
+   *   }
+   *   <scaleDuration>% {
+   *     scale: <toValues.scale>;
+   *   }
+   *   to {
+   *     scale: <toValues.scale>;
+   *   }
+   * }
+   *
+   * @supports (animation-timeline: view()) {
+   *   #target {
+   *     animation: <name> auto <easing> both,
+   *                <name>-scale auto linear both;
+   *     animation-range: cover <start> cover <end>,
+   *                      cover <start> cover <end>;
+   *     animation-timeline: view(), view();
+   *   }
+   * }
+   * @supports not (animation-timeline: view()) {
+   *   #target {
+   *     animation: <name> 100ms linear <fill> paused,
+   *                <name>-scale 100ms linear <fill> paused;
+   *   }
+   * }
+   */
+}
+//# sourceMappingURL=GrowScroll.js.map