lwa 0.1.0 → 0.2.0

package/dist/lwa.es.js

@@ -0,0 +1,1457 @@
+/* lwa 0.2.0 | MIT license | https://github.com/sutras/lwa */
+var __defProp = Object.defineProperty;
+var __pow = Math.pow;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function getAnimationFrameController() {
+  if (typeof requestAnimationFrame === "function") {
+    return {
+      request: requestAnimationFrame,
+      cancel: cancelAnimationFrame
+    };
+  }
+  const fps = 60;
+  const callbacks = [];
+  let id2 = 1;
+  let cursor = 0;
+  let timer;
+  function playAll() {
+    timer = void 0;
+    const cloned = callbacks.slice();
+    cursor += callbacks.length;
+    callbacks.length = 0;
+    cloned.forEach((callback) => {
+      if (callback !== 0) {
+        callback(Date.now());
+      }
+    });
+  }
+  return {
+    request(handler) {
+      callbacks.push(handler);
+      if (!timer) {
+        timer = setTimeout(playAll, 1e3 / fps);
+      }
+      return id2++;
+    },
+    cancel(id22) {
+      callbacks[id22 - cursor] = 0;
+    }
+  };
+}
+const { request, cancel } = getAnimationFrameController();
+const ticks = /* @__PURE__ */ new Set();
+let id = 0;
+let paused = true;
+function add(tick) {
+  ticks.add(tick);
+  run();
+}
+function remove(tick) {
+  ticks.delete(tick);
+}
+function step() {
+  if (ticks.size === 0) {
+    stop();
+  } else {
+    new Set(ticks).forEach((tick) => tick());
+    id = request(step);
+  }
+}
+function run() {
+  if (paused) {
+    paused = false;
+    id = request(step);
+  }
+}
+function stop() {
+  if (!paused) {
+    paused = true;
+    cancel(id);
+  }
+}
+const ticker = {
+  add,
+  remove
+};
+const easings = {
+  linear: () => (p) => p
+};
+const easingStuff = {
+  Sine: () => (p) => 1 - Math.cos(p * Math.PI / 2),
+  Expo: () => (p) => p ? Math.pow(1024, p - 1) : 0,
+  Circ: () => (p) => 1 - Math.sqrt(1 - p * p),
+  Elastic: () => (p) => p === 0 || p === 1 ? p : -Math.pow(2, 10 * p - 10) * Math.sin((p * 10 - 10.75) * 2 * Math.PI / 3),
+  Back: () => (p) => {
+    const s = 1.70158;
+    return p * p * ((s + 1) * p - s);
+  },
+  Bounce: () => (p) => {
+    p = 1 - p;
+    const s = 7.5625;
+    const k = 2.75;
+    return 1 - (p < 1 / k ? s * p * p : p < 2 / k ? s * (p -= 1.5 / k) * p + 0.75 : p < 2.5 / k ? s * (p -= 2.25 / k) * p + 0.9375 : s * (p -= 2.625 / k) * p + 0.984375);
+  }
+};
+const powerNames = ["Quad", "Cubic", "Quart", "Quint"];
+powerNames.forEach((name, i) => {
+  easingStuff[name] = () => (p) => Math.pow(p, i + 2);
+});
+Object.keys(easingStuff).forEach((name) => {
+  const easeIn = easingStuff[name];
+  easings["easeIn" + name] = easeIn;
+  easings["easeOut" + name] = (a, b) => (p) => 1 - easeIn(a, b)(1 - p);
+  easings["easeInOut" + name] = (a, b) => (p) => p < 0.5 ? easeIn(a, b)(p * 2) / 2 : 1 - easeIn(a, b)(2 - 2 * p) / 2;
+});
+const rNum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/;
+const rUnit = /%|px|rpx|em|rem|vw|vh|deg|rad|turn|ex|ch|vmin|vmax|pc|pt|in|cm|mm/;
+const rCssNumVal = new RegExp(
+  "^([+\\-*/%]=|)(" + rNum.source + ")(" + rUnit.source + "|)$",
+  "i"
+);
+const rNums = new RegExp(rNum.source, "g");
+const rTimelinePos = new RegExp(
+  "^([<>]|)([+-]=|)(" + rNum.source + "|)(%|)$"
+);
+function isNumber(target) {
+  return typeof target === "number";
+}
+function isString(target) {
+  return typeof target === "string";
+}
+function isObject(target) {
+  return target !== null && typeof target === "object";
+}
+function isFunction(target) {
+  return typeof target === "function";
+}
+function isArrayLike(target) {
+  let l;
+  return isObject(target) && Number.isInteger(l = target.length) && l < __pow(2, 32);
+}
+function isArray(target) {
+  return Array.isArray(target);
+}
+function random(min, max) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+function minmax(n, min, max) {
+  return n < min ? min : n > max ? max : n;
+}
+function toArray(target) {
+  return Array.isArray(target) ? target : [target];
+}
+const defaultEasing = "easeInOutQuad";
+function getEasing(ease) {
+  return isFunction(ease) ? ease : () => (easings[ease] || easings.linear)(0, 0);
+}
+function createEmitter() {
+  const events = {};
+  function on(type, callback) {
+    let callbacks = events[type];
+    if (!callbacks) {
+      callbacks = events[type] = /* @__PURE__ */ new Set();
+    }
+    callbacks.add(callback);
+  }
+  function off(type, callback) {
+    if (callback) {
+      const callbacks = events[type];
+      if (callbacks) {
+        callbacks.delete(callback);
+        if (callbacks.size === 0) {
+          delete events[type];
+        }
+      }
+    } else {
+      delete events[type];
+    }
+  }
+  function once(type, callback) {
+    on(type, function fn(...args) {
+      callback(...args);
+      off(type, fn);
+    });
+  }
+  function emit(type, ...args) {
+    const callbacks = events[type];
+    if (callbacks) {
+      callbacks.forEach((callback) => {
+        callback(...args);
+      });
+    }
+  }
+  return {
+    on,
+    off,
+    once,
+    emit
+  };
+}
+const TERMINATE = Symbol();
+class SpecialValue {
+}
+class WithFromValue extends SpecialValue {
+  constructor(from, to) {
+    super();
+    __publicField(this, "from");
+    __publicField(this, "to");
+    this.from = from;
+    this.to = to;
+  }
+}
+class SVGValue extends SpecialValue {
+  constructor(el, prop, totalLength) {
+    super();
+    __publicField(this, "el");
+    __publicField(this, "prop");
+    __publicField(this, "totalLength");
+    this.el = el;
+    this.prop = prop;
+    this.totalLength = totalLength;
+  }
+}
+const plugins = [];
+function parseTarget(target) {
+  const result = [];
+  if (!isArray(target)) {
+    target = [target];
+  }
+  target.flat().forEach((item) => {
+    if (item) {
+      if (isString(item)) {
+        result.push(...Array.from(document.querySelectorAll(item)));
+      } else if (isArrayLike(item)) {
+        result.push(...Array.from(item));
+      } else if (isObject(item) || isFunction(item)) {
+        result.push(item);
+      }
+    }
+  });
+  return Array.from(new Set(result));
+}
+function getFuncValue(value, animatedTarget) {
+  return isFunction(value) ? value(animatedTarget.target, animatedTarget.index, animatedTarget.total) : value;
+}
+function getTweenValue(position, tween) {
+  const { duration, delay, begin, easing, between } = tween;
+  function getBetweenValue(between2) {
+    const { from, to, round } = between2;
+    let value = position <= begin + delay ? from : position >= begin + delay + duration ? to : from + easing((position - begin - delay) / duration) * (to - from);
+    if (round) {
+      value = Math.round(value * round) / round;
+    }
+    return value;
+  }
+  return between.map((item) => getBetweenValue(item));
+}
+function getAnimatedTargets(targets) {
+  return targets.map((target, i) => ({
+    target,
+    index: i,
+    total: targets.length
+  }));
+}
+function structureValue(value, animatedTarget) {
+  value = getFuncValue(value, animatedTarget);
+  if (isArray(value)) {
+    return value.map((value2) => structureValue(value2, animatedTarget)[0]);
+  }
+  if (isNumber(value) || isString(value) || value instanceof SpecialValue) {
+    value = { value };
+  }
+  return [value];
+}
+function normalizeTweens(animatedTarget, objectValues, prop, options, beginTime, animationProperties, averageDuration) {
+  const l = objectValues.length;
+  let endTime = beginTime || 0;
+  let prevTween;
+  averageDuration = (averageDuration != null ? averageDuration : options.duration) / l;
+  function normalizeTween(objectValue, index2, prevTween2) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const duration = getFuncValue(
+      (_a = objectValue.duration) != null ? _a : averageDuration,
+      animatedTarget
+    );
+    const delay = getFuncValue(
+      (_b = objectValue.delay) != null ? _b : index2 === 0 ? options.delay : 0,
+      animatedTarget
+    );
+    const endDelay = getFuncValue(
+      (_c = objectValue.endDelay) != null ? _c : index2 === l - 1 ? options.endDelay : 0,
+      animatedTarget
+    );
+    const easing = getFuncValue(
+      getEasing((_d = objectValue.easing) != null ? _d : options.easing),
+      animatedTarget
+    );
+    const round = getFuncValue(
+      (_e = objectValue.round) != null ? _e : options.round,
+      animatedTarget
+    );
+    const total = delay + duration + endDelay;
+    const begin = endTime;
+    const end = begin + total;
+    endTime += total;
+    if (!prevTween2) {
+      let values;
+      prevTween2 = (values = animationProperties[prop]) ? values[values.length - 1] : void 0;
+    }
+    const value = objectValue.value;
+    let to;
+    let from;
+    const withFromValue = value instanceof WithFromValue;
+    if (withFromValue) {
+      from = getFuncValue(value.from, animatedTarget);
+      to = getFuncValue(value.to, animatedTarget);
+    } else {
+      to = value;
+    }
+    if (!withFromValue && prevTween2) {
+      from = prevTween2.to;
+    }
+    let withoutFrom = false;
+    if (from === void 0) {
+      from = animatedTarget.target[prop];
+      withoutFrom = true;
+    }
+    let operator = "";
+    let unit = "";
+    if (isString(to)) {
+      const parts = rCssNumVal.exec(to);
+      if (parts) {
+        operator = parts[1];
+        to = parseFloat(parts[2]) || 0;
+        unit = parts[3];
+      }
+    }
+    const tween = {
+      animatedTarget,
+      prop,
+      duration,
+      delay,
+      endDelay,
+      begin,
+      end,
+      easing,
+      data: {},
+      from,
+      to,
+      withoutFrom,
+      round,
+      unit,
+      operator,
+      between: []
+    };
+    for (let i = 0, l2 = plugins.length; i < l2; i++) {
+      const retValue = (_g = (_f = plugins[i]).init) == null ? void 0 : _g.call(_f, tween, TERMINATE);
+      if (retValue === TERMINATE) {
+        break;
+      }
+    }
+    return tween;
+  }
+  const tweens = objectValues.map(
+    (objectValue, index2) => prevTween = normalizeTween(objectValue, index2, prevTween)
+  ).sort((a, b) => a.begin - b.begin);
+  return {
+    endTime,
+    tweens
+  };
+}
+function getOneKeyframeTween(animatedTarget, properties, options, beginTime, animationProperties, averageDuration) {
+  let props = {};
+  for (let p in properties) {
+    const value = properties[p];
+    if (value !== null && value !== void 0) {
+      props[p] = normalizeTweens(
+        animatedTarget,
+        structureValue(value, animatedTarget),
+        p,
+        options,
+        beginTime,
+        animationProperties,
+        averageDuration
+      );
+    }
+  }
+  return props;
+}
+function getAnimationProperties(animatedTarget, keyframes, options) {
+  const animationProperties = {};
+  const averageDuration = getFuncValue(options.duration, animatedTarget) / keyframes.length;
+  let endTime = 0;
+  keyframes.forEach((properties) => {
+    const oneKeyframeTween = getOneKeyframeTween(
+      animatedTarget,
+      properties,
+      options,
+      endTime,
+      animationProperties,
+      averageDuration
+    );
+    for (let p in oneKeyframeTween) {
+      endTime = Math.max(endTime, oneKeyframeTween[p].endTime);
+      animationProperties[p] = (animationProperties[p] || []).concat(
+        oneKeyframeTween[p].tweens
+      );
+    }
+  });
+  return animationProperties;
+}
+function createAnimation$1(tweens) {
+  function seek(position) {
+    var _a, _b;
+    let currTween;
+    for (let i = 0, tween; tween = tweens[i++]; ) {
+      if (tween.begin <= position && tween.end >= position) {
+        currTween = tween;
+        break;
+      }
+      if (position > tween.end) {
+        if (!tweens[i + 1] || tweens[i + 1].begin > position) {
+          currTween = tween;
+        }
+      }
+    }
+    if (currTween) {
+      let value = getTweenValue(position, currTween);
+      let currentValue;
+      for (let i = plugins.length - 1; i >= 0; i--) {
+        currentValue = (_b = (_a = plugins[i]).update) == null ? void 0 : _b.call(_a, currTween, value, TERMINATE);
+        if (currentValue === TERMINATE) {
+          return;
+        }
+        if (currentValue !== void 0) {
+          value = currentValue;
+        }
+      }
+    }
+  }
+  function getDuration() {
+    return Math.max(...tweens.map((tween) => tween.end));
+  }
+  return {
+    seek,
+    getDuration,
+    tweens
+  };
+}
+function getAnimations(animationTargets, keyframes, options) {
+  return animationTargets.map((animatedTarget) => {
+    const animationProperties = getAnimationProperties(
+      animatedTarget,
+      keyframes,
+      options
+    );
+    return Object.keys(animationProperties).map(
+      (p) => createAnimation$1(animationProperties[p])
+    );
+  }).flat();
+}
+const defaultTweenOptions = {
+  duration: 500,
+  delay: 0,
+  endDelay: 0,
+  easing: defaultEasing,
+  round: 0
+};
+function createAnimations(target, keyframes, options) {
+  const tweenOptions = Object.assign({}, defaultTweenOptions, options);
+  return getAnimations(
+    getAnimatedTargets(parseTarget(target)),
+    isArray(keyframes) ? keyframes : [keyframes],
+    tweenOptions
+  );
+}
+function withFrom(from, to) {
+  return new WithFromValue(from, to);
+}
+function use(plugin) {
+  toArray(plugin).forEach((plugin2) => {
+    if (!plugins.includes(plugin2)) {
+      plugins.push(plugin2);
+      plugins.sort((a, b) => b.order - a.order);
+    }
+  });
+}
+const DIRECTION_ALTERNATE_REVERSE = "alternate-reverse";
+const DIRECTION_REVERSE = "reverse";
+const DIRECTION_ALTERNATE = "alternate";
+function isReverse(direction) {
+  return direction === DIRECTION_REVERSE || direction === DIRECTION_ALTERNATE_REVERSE;
+}
+function isAlternate(direction) {
+  return direction === DIRECTION_ALTERNATE || direction === DIRECTION_ALTERNATE_REVERSE;
+}
+function isTimelineEventTarget(target) {
+  return isObject(target) && "getDuration" in target && "seek" in target;
+}
+const defaultTimelineOptions = {
+  externalTicker: false,
+  autoplay: true,
+  direction: "normal",
+  loop: 1
+};
+const callbackNames = [
+  "begin",
+  "loopBegin",
+  "complete",
+  "loopComplete",
+  "pause",
+  "play",
+  "update"
+];
+function createTimeline(options) {
+  const mergedOptions = Object.assign({}, defaultTimelineOptions, options);
+  const { externalTicker, autoplay, direction, loop } = mergedOptions;
+  let firstTime = false;
+  let paused2 = true;
+  let prevTickTime = 0;
+  let position = 0;
+  let currentLoop = loop;
+  let reverse = isReverse(direction);
+  let duration = 0;
+  let events = [];
+  const emitter = createEmitter();
+  callbackNames.forEach((name) => {
+    if (mergedOptions[name]) {
+      emitter.on(name, mergedOptions[name]);
+    }
+  });
+  function isCompleted() {
+    return currentLoop === 0 && position === duration;
+  }
+  function seek(nextPosition) {
+    let finished = false;
+    if (nextPosition >= duration) {
+      nextPosition = duration;
+      finished = true;
+    } else if (nextPosition < 0) {
+      nextPosition = 0;
+    }
+    position = nextPosition;
+    const seekPosition = reverse ? duration - position : position;
+    events.forEach(({ target, begin }) => {
+      target.seek(seekPosition - begin);
+    });
+    emitter.emit(
+      "update",
+      seekPosition,
+      duration === 0 ? 0 : position / duration
+    );
+    if (finished) {
+      emitter.emit("loopComplete");
+      if (--currentLoop < 0) {
+        currentLoop = 0;
+      }
+      if (currentLoop === 0) {
+        pause();
+        emitter.emit("complete");
+      } else {
+        if (!paused2) {
+          if (isAlternate(direction)) {
+            reverse = !reverse;
+          }
+          start();
+        }
+      }
+    }
+  }
+  function progress(p) {
+    seek(minmax(p, 0, 1) * duration);
+  }
+  function tick() {
+    if (!paused2) {
+      let currTime = Date.now();
+      seek(currTime - prevTickTime + position);
+      prevTickTime = currTime;
+    }
+  }
+  function start() {
+    if (!firstTime) {
+      firstTime = true;
+      emitter.emit("begin");
+    } else {
+      position = 0;
+    }
+    emitter.emit("loopBegin");
+    play();
+  }
+  function play() {
+    if (!firstTime) {
+      start();
+    } else {
+      if (paused2) {
+        paused2 = false;
+        if (isCompleted()) {
+          if (isAlternate(direction)) {
+            reverse = !reverse;
+          }
+          restart();
+        } else {
+          prevTickTime = Date.now();
+          if (!externalTicker) {
+            ticker.add(tick);
+          }
+          emitter.emit("play");
+        }
+      }
+    }
+  }
+  function pause() {
+    if (!paused2) {
+      paused2 = true;
+      if (!externalTicker) {
+        ticker.remove(tick);
+      }
+      emitter.emit("pause");
+    }
+  }
+  function restart() {
+    pause();
+    position = 0;
+    firstTime = false;
+    currentLoop = loop;
+    reverse = isReverse(direction);
+    play();
+  }
+  function finish() {
+    if (!isCompleted()) {
+      seek(duration);
+    }
+  }
+  function add2(target, positionOrKeyframes, optionsOrPosition, position2) {
+    if (isTimelineEventTarget(target)) {
+      position2 = positionOrKeyframes != null ? positionOrKeyframes : ">";
+      let begin = duration;
+      if (isNumber(position2)) {
+        begin = position2;
+      } else {
+        const { begin: prevBegin, end: prevEnd } = events[events.length - 1] || {
+          begin: 0,
+          end: 0
+        };
+        const prevDuration = prevEnd - prevBegin;
+        const [, bracket, relative, num, unit] = rTimelinePos.exec(
+          position2
+        ) || [, ">", "", "", ""];
+        begin = bracket === "<" ? prevBegin : bracket === ">" ? prevEnd : begin;
+        let value = +num;
+        if (unit === "%") {
+          value = (bracket ? prevDuration : duration) / 100 * +num;
+        }
+        begin += relative === "-=" ? -value : value;
+      }
+      begin = Math.max(0, begin);
+      const end = begin + target.getDuration();
+      events.push({ target, position: position2, begin, end });
+      duration = Math.max(duration, end);
+    } else {
+      if (isNumber(optionsOrPosition) || isString(optionsOrPosition)) {
+        position2 = optionsOrPosition;
+        optionsOrPosition = void 0;
+      }
+      const animations = createAnimations(
+        target,
+        positionOrKeyframes,
+        optionsOrPosition
+      );
+      animations.forEach((animation, index2) => {
+        add2(animation, index2 === 0 ? position2 : "<");
+      });
+    }
+    return timeline;
+  }
+  function remove2(target) {
+    const index2 = events.findIndex((e) => e.target === target);
+    if (index2 !== -1) {
+      events.splice(index2, 1);
+      update();
+    }
+  }
+  function update() {
+    const oldEvents = [...events];
+    events = [];
+    duration = 0;
+    oldEvents.forEach((event) => {
+      add2(event.target, event.position);
+    });
+  }
+  function clear() {
+    pause();
+    duration = 0;
+    events = [];
+  }
+  if (autoplay && loop !== 0) {
+    start();
+  }
+  const timeline = {
+    play,
+    pause,
+    finish,
+    restart,
+    seek,
+    progress,
+    tick: () => {
+      if (externalTicker) {
+        tick();
+      }
+    },
+    getPosition() {
+      return position;
+    },
+    getDuration() {
+      return duration;
+    },
+    getProgress() {
+      return duration === 0 ? 0 : position / duration;
+    },
+    isReverse() {
+      return reverse;
+    },
+    add: add2,
+    remove: remove2,
+    clear,
+    events,
+    on: emitter.on,
+    off: emitter.off,
+    once: emitter.once
+  };
+  return timeline;
+}
+const staggerOptions = {
+  start: 0,
+  from: 0,
+  direction: "normal",
+  easing: "linear",
+  grid: null,
+  axis: null
+};
+function stagger(value, options) {
+  let { direction, grid, axis, from, start, easing } = Object.assign(
+    {},
+    staggerOptions,
+    options
+  );
+  easing = getEasing(easing);
+  let isRange = isArray(value);
+  const [min, max] = isRange ? value : [0, value];
+  let values = [];
+  let maxValue = 0;
+  start = start || min;
+  return (el, index2, total) => {
+    const fromCenter = from === "center";
+    const fromIndex = from === "first" ? 0 : fromCenter ? (total - 1) / 2 : from === "last" ? total - 1 : from;
+    if (!values.length) {
+      for (let i = 0; i < total; i++) {
+        if (!grid) {
+          values.push(Math.abs(fromIndex - i));
+        } else {
+          const [rows, columns] = grid;
+          const fromX = !fromCenter ? fromIndex % columns : (columns - 1) / 2;
+          const fromY = !fromCenter ? ~~(fromIndex / columns) : (rows - 1) / 2;
+          const toX = i % columns;
+          const toY = ~~(i / columns);
+          const distanceX = fromX - toX;
+          const distanceY = fromY - toY;
+          let value2 = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+          value2 = axis === "x" ? -distanceX : axis === "y" ? -distanceY : value2;
+          values.push(value2);
+        }
+        maxValue = Math.max(...values);
+      }
+      values = values.map(
+        (val) => easing(el, index2, total)(val / maxValue) * maxValue
+      );
+      if (direction === "reverse") {
+        values = values.map((val) => axis ? -val : Math.abs(maxValue - val));
+      }
+    }
+    let spacing = isRange ? (max - min) / maxValue : max;
+    if (spacing === Infinity) {
+      spacing = 0;
+    }
+    return start + spacing * (Math.round(values[index2] * 100) / 100);
+  };
+}
+function definePlugin(plugin) {
+  return plugin;
+}
+const updatePlugin = definePlugin({
+  order: 100,
+  update(tween, value, terminate) {
+    const { animatedTarget, prop, unit } = tween;
+    let val = isArray(value) ? value[0] : value;
+    if (unit) {
+      val += unit;
+    }
+    animatedTarget.target[prop] = val;
+    return terminate;
+  }
+});
+const initPlugin = definePlugin({
+  order: 0,
+  init(tween, terminate) {
+    if (tween.between.length === 0) {
+      const to = toArray(tween.to);
+      const from = toArray(tween.from);
+      tween.between = to.map((value, i) => ({
+        from: +from[i] || 0,
+        to: +value || 0,
+        round: tween.round
+      }));
+      return terminate;
+    }
+  }
+});
+const cssProps = {};
+const prefixes = ["", "webkit", "Moz"];
+const html = document.documentElement;
+const transformValues = [
+  "translateX",
+  "translateY",
+  "translateZ",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "scaleZ",
+  "rotate",
+  "rotateX",
+  "rotateY",
+  "rotateZ",
+  "skew",
+  "skewX",
+  "skewY",
+  "perspective"
+];
+const transformValuesMap = arrayToObject(transformValues);
+const optionalUnitProperties = arrayToObject([
+  "columnCount",
+  "fillOpacity",
+  "fontSizeAdjust",
+  "fontWeight",
+  "lineHeight",
+  "opacity",
+  "orphans",
+  "widows",
+  "zIndex",
+  "zoom",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "scaleZ",
+  "order",
+  "flexGrow",
+  "flexShrink",
+  "scrollLeft",
+  "scrollTop",
+  "strokeDashoffset",
+  "strokeDasharray"
+]);
+const domDotAttributes = arrayToObject(["value"]);
+function arrayToObject(array) {
+  const map = {};
+  for (let i = 0, l = array.length; i < l; i++) {
+    map[array[i]] = true;
+  }
+  return map;
+}
+function isElement(target) {
+  return target instanceof HTMLElement || target instanceof SVGElement;
+}
+function pascalCase(target) {
+  return target.replace(/[-]([^-])/g, (_, g1) => g1.toUpperCase()).replace(/^./, (m) => m.toUpperCase());
+}
+function camalCase(target) {
+  return target.replace(/[-]([^-])/g, (_, g1) => g1.toUpperCase()).replace(/^./, (m) => m.toLowerCase());
+}
+function getPrefixedCssProp(name, host) {
+  if (cssProps[name]) {
+    return cssProps[name];
+  }
+  host = host || html.style;
+  for (let i = 0, l = prefixes.length; i < l; i++) {
+    const prefix = prefixes[i];
+    let fitName = prefix ? prefix + pascalCase(String(name)) : camalCase(String(name));
+    if (fitName in html.style) {
+      return cssProps[name] = fitName;
+    }
+  }
+  return "";
+}
+function combinedWithUnit(prop, value) {
+  return value + (!Number.isNaN(+value) && !optionalUnitProperties[prop] ? "px" : "");
+}
+function getStyle(elem, prop) {
+  return window.getComputedStyle(elem)[getPrefixedCssProp(prop)];
+}
+function setStyle(elem, prop, value) {
+  elem.style[getPrefixedCssProp(prop)] = combinedWithUnit(
+    String(prop),
+    value
+  );
+}
+function setStyleIgnoreUnit(elem, prop, value) {
+  elem.style[getPrefixedCssProp(prop)] = value;
+}
+function setStyleFromTransformMap(elem, map) {
+  let value = "";
+  map.forEach((val, key) => value += key + "(" + val + ") ");
+  setStyleIgnoreUnit(elem, "transform", value);
+}
+const cssHooks = {
+  _default: {
+    get(elem, prop) {
+      return getStyle(elem, prop);
+    },
+    set(elem, prop, value) {
+      setStyle(elem, prop, value);
+    }
+  }
+};
+["scrollTop", "scrollLeft"].forEach((item) => {
+  cssHooks[item] = {
+    get(elem, prop) {
+      return elem[prop];
+    },
+    set(elem, prop, value) {
+      elem[prop] = value;
+    }
+  };
+});
+transformValues.forEach((item) => {
+  cssHooks[item] = {
+    get(elem, prop) {
+      return getTransformValuesMap(elem).get(prop) || "";
+    },
+    set(elem, prop, value) {
+      const transformValuesMap2 = getTransformValuesMap(elem);
+      transformValuesMap2.set(prop, combinedWithUnit(prop, value));
+      sortTransformValues(transformValuesMap2);
+      setStyleFromTransformMap(elem, transformValuesMap2);
+    }
+  };
+});
+function css(elem, prop, value) {
+  if (isObject(prop)) {
+    for (let i in prop) {
+      css(
+        elem,
+        i,
+        prop[i]
+      );
+    }
+  } else if (value === void 0) {
+    return (cssHooks[prop] && cssHooks[prop].get || cssHooks._default.get)(
+      elem,
+      prop
+    );
+  } else {
+    (cssHooks[prop] && cssHooks[prop].set || cssHooks._default.set)(
+      elem,
+      prop,
+      value
+    );
+  }
+}
+function getDefaultUnit(prop) {
+  return /rotate|skew/.test(prop) ? "deg" : optionalUnitProperties[prop] ? "" : "px";
+}
+function getTransformValuesMap(target) {
+  const value = target.style.getPropertyValue(getPrefixedCssProp("transform"));
+  const reg = /(\w+)\(([^)]+)\)/g;
+  let m;
+  const pairs = [];
+  while (m = reg.exec(value)) {
+    pairs.push([m[1], m[2]]);
+  }
+  pairs.sort((a, b) => {
+    return transformValues.indexOf(a[0]) - transformValues.indexOf(b[0]);
+  });
+  return new Map(pairs);
+}
+function sortTransformValues(map) {
+  const arr = [...map].sort((a, b) => {
+    return transformValues.indexOf(a[0]) - transformValues.indexOf(b[0]);
+  });
+  map.clear();
+  arr.forEach(([key, value]) => {
+    map.set(key, value);
+  });
+}
+function parseUnit(value) {
+  var _a;
+  return ((_a = rCssNumVal.exec(value)) == null ? void 0 : _a[3]) || "";
+}
+function convertPxToUnit(target, value, unit) {
+  const baseline = 100;
+  if ([parseUnit(String(value)), "deg", "rad", "turn"].indexOf(unit) !== -1) {
+    return value;
+  }
+  const tempEl = document.createElement(target.tagName);
+  tempEl.style.position = "absolute";
+  tempEl.style.width = baseline + unit;
+  const parentEl = target.parentNode && target.parentNode !== document ? target.parentNode : document.body;
+  parentEl.appendChild(tempEl);
+  const factor = baseline / tempEl.offsetWidth;
+  parentEl.removeChild(tempEl);
+  return factor * parseFloat(String(value));
+}
+function getCSSOriginalValue(target, prop, unit) {
+  let value = getStyle(target, prop);
+  return unit && isString(value) ? convertPxToUnit(target, value, unit) : value;
+}
+function getTransformOriginalValue(target, prop, unit) {
+  let value = getTransformValuesMap(target).get(prop) || (/scale/.test(prop) ? 1 : 0 + getDefaultUnit(prop));
+  return unit ? convertPxToUnit(target, value, unit) : value;
+}
+function getAttribute(target, prop) {
+  return target.getAttribute(prop);
+}
+function getOriginalValue(target, prop, unit, propType) {
+  switch (propType) {
+    case "trans":
+      return getTransformOriginalValue(target, prop, unit);
+    case "css":
+      return getCSSOriginalValue(target, prop, unit);
+    case "attr":
+      return getAttribute(target, prop);
+  }
+}
+function getPropType(target, prop) {
+  return isTransform(prop) ? "trans" : getPrefixedCssProp(prop) ? "css" : !domDotAttributes[prop] && target.hasAttribute(prop) ? "attr" : "";
+}
+function isTransform(prop) {
+  return !!transformValuesMap[prop];
+}
+const cssPlugin = definePlugin({
+  order: 90,
+  init(tween) {
+    const { animatedTarget, prop, data } = tween;
+    const target = animatedTarget.target;
+    if (isElement(target)) {
+      const propType = getPropType(target, prop);
+      if (propType) {
+        data.css = propType;
+        if (propType === "trans") {
+          if (!animatedTarget.transforms) {
+            animatedTarget.transforms = {
+              map: getTransformValuesMap(target)
+            };
+          }
+        }
+        if (tween.withoutFrom) {
+          tween.from = getOriginalValue(target, prop, tween.unit, propType);
+          const result = rCssNumVal.exec(tween.from);
+          if (result) {
+            tween.from = parseFloat(result[2]);
+          }
+        }
+        if (!tween.unit) {
+          tween.unit = getDefaultUnit(prop);
+        }
+      }
+    }
+  },
+  update(tween, value, terminate) {
+    const propType = tween.data.css;
+    if (propType) {
+      const { animatedTarget, prop, unit } = tween;
+      const target = animatedTarget.target;
+      let val = isArray(value) ? value[0] : value;
+      if (propType !== "attr") {
+        val += unit;
+      }
+      switch (propType) {
+        case "trans":
+          let map = animatedTarget.transforms.map;
+          const has = map.has(prop);
+          map.set(prop, val);
+          if (!has) {
+            sortTransformValues(map);
+          }
+          setStyleFromTransformMap(target, map);
+          break;
+        case "css":
+          setStyleIgnoreUnit(target, prop, val);
+          break;
+        case "attr":
+          target.setAttribute(prop, val);
+          break;
+      }
+      return terminate;
+    }
+  }
+});
+const namedColors = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "00ffff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000000",
+  blanchedalmond: "ffebcd",
+  blue: "0000ff",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "00ffff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "ff00ff",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "778899",
+  lightslategrey: "778899",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "00ff00",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "ff00ff",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "663399",
+  red: "ff0000",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "ffffff",
+  whitesmoke: "f5f5f5",
+  yellow: "ffff00",
+  yellowgreen: "9acd32"
+};
+function hexToRgb(hex) {
+  let r = /[0-9a-f]{2}/gi, rgb = [], m;
+  while (m = r.exec(hex)) {
+    rgb.push(parseInt(m[0], 16));
+  }
+  return rgb;
+}
+function pickNumToArray(str) {
+  let r = /[.\d]+/g, rgb = [], m;
+  while (m = r.exec(str)) {
+    rgb.push(+m[0]);
+  }
+  return rgb;
+}
+function hslToRgb(h, s, l) {
+  let r, g, b;
+  function hueToRgb(p, q, t) {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  }
+  if (s == 0) {
+    r = g = b = l;
+  } else {
+    let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    let p = 2 * l - q;
+    r = hueToRgb(p, q, h + 1 / 3);
+    g = hueToRgb(p, q, h);
+    b = hueToRgb(p, q, h - 1 / 3);
+  }
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+function colorToRgba(val) {
+  let rgba;
+  val = String(val);
+  if (/^#?[0-9a-f]{3}$/i.test(val)) {
+    rgba = hexToRgb(val.replace(/(.)(.)(.)$/, "$1$1$2$2$3$3"));
+  } else if (/^#?([0-9a-f]{6})$/i.test(val)) {
+    rgba = hexToRgb(RegExp.$1);
+  } else if (/^rgb/i.test(val)) {
+    rgba = pickNumToArray(val);
+  } else if (/^hsl/i.test(val)) {
+    const arr = pickNumToArray(val);
+    arr[0] /= 360;
+    arr[1] /= 100;
+    arr[2] /= 100;
+    rgba = hslToRgb(...arr).concat(arr[3]);
+  } else if (namedColors.hasOwnProperty(val = val.toLowerCase())) {
+    rgba = hexToRgb(namedColors[val]);
+  } else {
+    rgba = [0, 0, 0, 1];
+  }
+  if (!isNumber(rgba[3])) {
+    rgba[3] = 1;
+  }
+  return rgba;
+}
+function isColor(value) {
+  return namedColors.hasOwnProperty(String(value).toLowerCase()) || /^(?:rgb|hsl|#(?:[0-9a-f]{6}|[0-9a-f]{3})$)/i.test(value);
+}
+const colorPlugin = definePlugin({
+  order: 80,
+  init(tween, terminate) {
+    if (isString(tween.to) && isColor(tween.to)) {
+      const data = tween.data;
+      const from = colorToRgba(String(tween.from));
+      const to = colorToRgba(tween.to);
+      tween.between = to.map((value, i) => ({
+        from: from[i],
+        to: value,
+        round: i === 3 ? 0 : 1
+      }));
+      tween.unit = "";
+      data.color = {};
+      return terminate;
+    }
+  },
+  update(tween, value) {
+    if (tween.data.color) {
+      return "rgba(" + value.join(",") + ")";
+    }
+  }
+});
+function getRelativeValue(from, to, operator) {
+  switch (operator[0]) {
+    case "+":
+      return from + to;
+    case "-":
+      return from - to;
+    case "*":
+      return from * to;
+    case "/":
+      return from / to;
+    case "%":
+      return from % to;
+  }
+  return 0;
+}
+const relativePlugin = definePlugin({
+  order: 70,
+  init(tween) {
+    if (tween.operator) {
+      let from = tween.from;
+      if (!isNumber(from)) {
+        from = Number(from) || 0;
+      }
+      tween.to = getRelativeValue(
+        from,
+        tween.to,
+        tween.operator
+      );
+      tween.from = from;
+    }
+  }
+});
+function getRadianByLine(p1, p2) {
+  return Math.atan2(p2.y - p1.y, p2.x - p1.x);
+}
+function getAngleByLine(p1, p2) {
+  return getRadianByLine(p1, p2) / Math.PI * 180;
+}
+function geometry(elem, percent = 100) {
+  elem = isString(elem) ? document.querySelector(elem) : elem;
+  return (prop) => new SVGValue(elem, prop, elem.getTotalLength() * (percent / 100));
+}
+const setDashoffset = (elem) => {
+  if (elem instanceof SVGGeometryElement) {
+    let length = elem.getTotalLength();
+    elem.setAttribute("stroke-dasharray", String(length));
+    return length;
+  }
+  return 0;
+};
+const svgPlugin = definePlugin({
+  order: 60,
+  init(tween) {
+    const { data, to } = tween;
+    if (to instanceof SVGValue) {
+      data.svg = to;
+      tween.from = 0;
+      tween.to = to.totalLength;
+      tween.unit = "";
+    }
+  },
+  update(tween, value) {
+    const svgValue = tween.data.svg;
+    if (svgValue) {
+      let getPoint = function(offset) {
+        return svgValue.el.getPointAtLength(val + offset);
+      };
+      const val = isArray(value) ? value[0] : value;
+      const p0 = getPoint(-1);
+      const p1 = getPoint(0);
+      switch (svgValue.prop) {
+        case "x":
+          return p1.x + "px";
+        case "y":
+          return p1.y + "px";
+        case "angle":
+          return getAngleByLine(p0, p1) + "deg";
+      }
+    }
+  }
+});
+const interpPlugin = definePlugin({
+  order: 50,
+  init(tween) {
+    let to = tween.to;
+    let toMatch;
+    if (isString(to) && (toMatch = to.match(rNums))) {
+      tween.data.interp = to.split(rNums);
+      let from = tween.from;
+      let fromMatch;
+      if (isString(from) && (fromMatch = from.match(rNums))) {
+        from = fromMatch;
+      } else if (!isArray(from)) {
+        from = [tween.from];
+      }
+      tween.from = from;
+      tween.to = toMatch;
+    }
+  },
+  update(tween, value) {
+    const strings = tween.data.interp;
+    if (strings) {
+      return value.map((num, i) => strings[i] + num).join("");
+    }
+  }
+});
+use(updatePlugin);
+use(initPlugin);
+function createAnimation(target, keyframes, options) {
+  return createTimeline(options).add(target, keyframes, options);
+}
+use([cssPlugin, colorPlugin, relativePlugin, svgPlugin, interpPlugin]);
+const index = Object.assign(
+  (...args) => {
+    return createAnimation(...args);
+  },
+  {
+    createAnimation,
+    createTimeline,
+    ticker,
+    stagger,
+    easings,
+    withFrom,
+    random,
+    use,
+    css,
+    getPrefixedCssProp,
+    geometry,
+    setDashoffset,
+    timeline: createTimeline
+  }
+);
+export {
+  index as default
+};