https://visitezliege.be/_content/NetCo_Access_CoreRCL/js/source/Anime/anime.umd.js

564/**
565 * @typedef {Object} DraggableParams
566 * @property {DOMTargetSelector} [trigger]
567 * @property {DOMTargetSelector|Array<Number>|((draggable: Draggable) => DOMTargetSelector|Array<Number>)} [container]
568 * @property {Boolean|DraggableAxisParam} [x]
569 * @property {Boolean|DraggableAxisParam} [y]
570 * @property {TweenModifier} [modifier]
571 * @property {Number|Array<Number>|((draggable: Draggable) => Number|Array<Number>)} [snap]
572 * @property {Number|Array<Number>|((draggable: Draggable) => Number|Array<Number>)} [containerPadding]
573 * @property {Number|((draggable: Draggable) => Number)} [containerFriction]
574 * @property {Number|((draggable: Draggable) => Number)} [releaseContainerFriction]
575 * @property {Number|((draggable: Draggable) => Number)} [dragSpeed]
576 * @property {Number|DraggableDragThresholdParams|((draggable: Draggable) => Number|DraggableDragThresholdParams)} [dragThreshold]
577 * @property {Number|((draggable: Draggable) => Number)} [scrollSpeed]
578 * @property {Number|((draggable: Draggable) => Number)} [scrollThreshold]
579 * @property {Number|((draggable: Draggable) => Number)} [minVelocity]
580 * @property {Number|((draggable: Draggable) => Number)} [maxVelocity]
581 * @property {Number|((draggable: Draggable) => Number)} [velocityMultiplier]
582 * @property {Number} [releaseMass]
583 * @property {Number} [releaseStiffness]
584 * @property {Number} [releaseDamping]
585 * @property {Boolean} [releaseDamping]
586 * @property {EasingParam} [releaseEase]
587 * @property {Boolean|DraggableCursorParams|((draggable: Draggable) => Boolean|DraggableCursorParams)} [cursor]
588 * @property {Callback<Draggable>} [onGrab]
589 * @property {Callback<Draggable>} [onDrag]
590 * @property {Callback<Draggable>} [onRelease]
591 * @property {Callback<Draggable>} [onUpdate]
592 * @property {Callback<Draggable>} [onSettle]
593 * @property {Callback<Draggable>} [onSnap]
594 * @property {Callback<Draggable>} [onResize]
595 * @property {Callback<Draggable>} [onAfterResize]
596 */
597
598// Text types
599
600/**
601 * @typedef {Object} SplitTemplateParams
602 * @property {false|String} [class]
603 * @property {Boolean|'hidden'|'clip'|'visible'|'scroll'|'auto'} [wrap]
604 * @property {Boolean|'top'|'right'|'bottom'|'left'|'center'} [clone]
605 */
606
607/**
608 * @typedef {Boolean|String} SplitValue
609 */
610
611/**
612 * @callback SplitFunctionValue
613 * @param {Node|HTMLElement} [value]
614 * @return String
615 */
616
617/**
618 * @typedef {Object} TextSplitterParams
619 * @property {SplitValue|SplitTemplateParams|SplitFunctionValue} [lines]
620 * @property {SplitValue|SplitTemplateParams|SplitFunctionValue} [words]
621 * @property {SplitValue|SplitTemplateParams|SplitFunctionValue} [chars]
622 * @property {Boolean} [accessible]
623 * @property {Boolean} [includeSpaces]
624 * @property {Boolean} [debug]
625 */
626
627// SVG types
628
629/**
630 * @typedef {SVGGeometryElement & {
631 *   setAttribute(name: 'draw', value: `${number} ${number}`): void;
632 *   draw: `${number} ${number}`;
633 * }} DrawableSVGGeometry
634 */
635
636
637(function (global, factory) {
638  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
639  typeof define === 'function' && define.amd ? define(['exports'], factory) :
640  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.anime = {}));
641})(this, (function (exports) { 'use strict';
642
643  // Environments
644
645  // TODO: Do we need to check if we're running inside a worker ?
646  const isBrowser = typeof window !== 'undefined';
647
648  /** @typedef {Window & {AnimeJS: Array} & {AnimeJSDevTools: any}|null} AnimeJSWindow
649
650  /** @type {AnimeJSWindow} */
651  const win = isBrowser ? /** @type {AnimeJSWindow} */(/** @type {unknown} */(window)) : null;
652
653  /** @type {Document|null} */
654  const doc = isBrowser ? document : null;
655
656  // Enums
657
658  /** @enum {Number} */
659  const tweenTypes = {
660    OBJECT: 0,
661    ATTRIBUTE: 1,
662    CSS: 2,
663    TRANSFORM: 3,
664    CSS_VAR: 4,
665  };
666
667  /** @enum {Number} */
668  const valueTypes = {
669    NUMBER: 0,
670    UNIT: 1,
671    COLOR: 2,
672    COMPLEX: 3,
673  };
674
675  /** @enum {Number} */
676  const tickModes = {
677    NONE: 0,
678    AUTO: 1,
679    FORCE: 2,
680  };
681
682  /** @enum {Number} */
683  const compositionTypes = {
684    replace: 0,
685    none: 1,
686    blend: 2,
687  };
688
689  // Cache symbols
690
691  const isRegisteredTargetSymbol = Symbol();
692  const isDomSymbol = Symbol();
693  const isSvgSymbol = Symbol();
694  const transformsSymbol = Symbol();
695  const morphPointsSymbol = Symbol();
696  const proxyTargetSymbol = Symbol();
697
698  // Numbers
699
700  const minValue = 1e-11;
701  const maxValue = 1e12;
702  const K = 1e3;
703  const maxFps = 240;
704
705  // Strings
706
707  const emptyString = '';
708  const cssVarPrefix = 'var(';
709
710  const shortTransforms = /*#__PURE__*/ (() => {
711    const map = new Map();
712    map.set('x', 'translateX');
713    map.set('y', 'translateY');
714    map.set('z', 'translateZ');
715    return map;
716  })();
717
718  const validTransforms = [
719    'translateX',
720    'translateY',
721    'translateZ',
722    'rotate',
723    'rotateX',
724    'rotateY',
725    'rotateZ',
726    'scale',
727    'scaleX',
728    'scaleY',
729    'scaleZ',
730    'skew',
731    'skewX',
732    'skewY',
733    'matrix',
734    'matrix3d',
735    'perspective',
736  ];
737
738  const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) => ({...a, [v]: v + '('}), {});
739
740  // Functions
741
742  /** @return {void} */
743  const noop = () => {};
744
745  // Regex
746
747  const hexTestRgx = /(^#([\da-f]{3}){1,2}$)|(^#([\da-f]{4}){1,2}$)/i;
748  const rgbExecRgx = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i;
749  const rgbaExecRgx = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i;
750  const hslExecRgx = /hsl\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*\)/i;
751  const hslaExecRgx = /hsla\(\s*(-?\d+|-?\d*.\d+)\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)%\s*,\s*(-?\d+|-?\d*.\d+)\s*\)/i;
752  // export const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?/g;
753  const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi;
754  // export const unitsExecRgx = /^([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)+([a-z]+|%)$/i;
755  const unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i;
756  const lowerCaseRgx = /([a-z])([A-Z])/g;
757  const transformsExecRgx = /(\w+)(\([^)]+\)+)/g; // Match inline transforms with cacl() values, returns the value wrapped in ()
758  const relativeValuesExecRgx = /(\*=|\+=|-=)/;
759  const cssVariableMatchRgx = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/;
760
761  
762
763  /** @type {DefaultsParams} */
764  const defaults = {
765    id: null,
766    keyframes: null,
767    playbackEase: null,
768    playbackRate: 1,
769    frameRate: maxFps,
770    loop: 0,
771    reversed: false,
772    alternate: false,
773    autoplay: true,
774    persist: false,
775    duration: K,
776    delay: 0,
777    loopDelay: 0,
778    ease: 'out(2)',
779    composition: compositionTypes.replace,
780    modifier: v => v,
781    onBegin: noop,
782    onBeforeUpdate: noop,
783    onUpdate: noop,
784    onLoop: noop,
785    onPause: noop,
786    onComplete: noop,
787    onRender: noop,
788  };
789
790  const scope = {
791    /** @type {Scope} */
792    current: null,
793    /** @type {Document|DOMTarget} */
794    root: doc,
795  };
796
797  const globals = {
798    /** @type {DefaultsParams} */
799    defaults,
800    /** @type {Number} */
801    precision: 4,
802    /** @type {Number} equals 1 in ms mode, 0.001 in s mode */
803    timeScale: 1,
804    /** @type {Number} */
805    tickThreshold: 200,
806  };
807
808  const devTools = isBrowser && win.AnimeJSDevTools;
809
810  const globalVersions = { version: '4.3.2', engine: null };
811
812  if (isBrowser) {
813    if (!win.AnimeJS) win.AnimeJS = [];
814    win.AnimeJS.push(globalVersions);
815  }
816
817  
818
819  // Strings
820
821  /**
822   * @param  {String} str
823   * @return {String}
824   */
825  const toLowerCase = str => str.replace(lowerCaseRgx, '$1-$2').toLowerCase();
826
827  /**
828   * Prioritize this method instead of regex when possible
829   * @param  {String} str
830   * @param  {String} sub
831   * @return {Boolean}
832   */
833  const stringStartsWith = (str, sub) => str.indexOf(sub) === 0;
834
835  // Note: Date.now is used instead of performance.now since it is precise enough for timings calculations, performs slightly faster and works in Node.js environement.
836  const now = Date.now;
837
838  // Types checkers
839
840  const isArr = Array.isArray;
841  /**@param {any} a @return {a is Record<String, any>} */
842  const isObj = a => a && a.constructor === Object;
843  /**@param {any} a @return {a is Number} */
844  const isNum = a => typeof a === 'number' && !isNaN(a);
845  /**@param {any} a @return {a is String} */
846  const isStr = a => typeof a === 'string';
847  /**@param {any} a @return {a is Function} */
848  const isFnc = a => typeof a === 'function';
849  /**@param {any} a @return {a is undefined} */
850  const isUnd = a => typeof a === 'undefined';
851  /**@param {any} a @return {a is null | undefined} */
852  const isNil = a => isUnd(a) || a === null;
853  /**@param {any} a @return {a is SVGElement} */
854  const isSvg = a =>

1014  const forEachChildren = (parent, callback, reverse, prevProp = '_prev', nextProp = '_next') => {
1015    let next = parent._head;
1016    let adjustedNextProp = nextProp;
1017    if (reverse) {
1018      next = parent._tail;
1019      adjustedNextProp = prevProp;
1020    }
1021    while (next) {
1022      const currentNext = next[adjustedNextProp];
1023      callback(next);
1024      next = currentNext;
1025    }
1026  };
1027
1028  /**
1029   * @param  {Object} parent
1030   * @param  {Object} child
1031   * @param  {String} [prevProp]
1032   * @param  {String} [nextProp]
1033   * @return {void}
1034   */
1035  const removeChild = (parent, child, prevProp = '_prev', nextProp = '_next') => {
1036    const prev = child[prevProp];
1037    const next = child[nextProp];
1038    prev ? prev[nextProp] = next : parent._head = next;
1039    next ? next[prevProp] = prev : parent._tail = prev;
1040    child[prevProp] = null;
1041    child[nextProp] = null;
1042  };
1043
1044  /**
1045   * @param  {Object} parent
1046   * @param  {Object} child
1047   * @param  {Function} [sortMethod]
1048   * @param  {String} prevProp
1049   * @param  {String} nextProp
1050   * @return {void}
1051   */
1052  const addChild = (parent, child, sortMethod, prevProp = '_prev', nextProp = '_next') => {
1053    let prev = parent._tail;
1054    while (prev && sortMethod && sortMethod(prev, child)) prev = prev[prevProp];
1055    const next = prev ? prev[nextProp] : parent._head;
1056    prev ? prev[nextProp] = child : parent._head = child;
1057    next ? next[prevProp] = child : parent._tail = child;
1058    child[prevProp] = prev;
1059    child[nextProp] = next;
1060  };
1061
1062  
1063
1064  /**
1065   * @param  {DOMTarget} target
1066   * @param  {String} propName
1067   * @param  {Object} animationInlineStyles
1068   * @return {String}
1069   */
1070  const parseInlineTransforms = (target, propName, animationInlineStyles) => {
1071    const inlineTransforms = target.style.transform;
1072    let inlinedStylesPropertyValue;
1073    if (inlineTransforms) {
1074      const cachedTransforms = target[transformsSymbol];
1075      let t; while (t = transformsExecRgx.exec(inlineTransforms)) {
1076        const inlinePropertyName = t[1];
1077        // const inlinePropertyValue = t[2];
1078        const inlinePropertyValue = t[2].slice(1, -1);
1079        cachedTransforms[inlinePropertyName] = inlinePropertyValue;
1080        if (inlinePropertyName === propName) {
1081          inlinedStylesPropertyValue = inlinePropertyValue;
1082          // Store the new parsed inline styles if animationInlineStyles is provided
1083          if (animationInlineStyles) {
1084            animationInlineStyles[propName] = inlinePropertyValue;
1085          }
1086        }
1087      }
1088    }
1089    return inlineTransforms && !isUnd(inlinedStylesPropertyValue) ? inlinedStylesPropertyValue :
1090      stringStartsWith(propName, 'scale') ? '1' :
1091      stringStartsWith(propName, 'rotate') || stringStartsWith(propName, 'skew') ? '0deg' : '0px';
1092  };
1093
1094  
1095
1096  /**
1097   * RGB / RGBA Color value string -> RGBA values array
1098   * @param  {String} rgbValue
1099   * @return {ColorArray}
1100   */
1101  const rgbToRgba = rgbValue => {
1102    const rgba = rgbExecRgx.exec(rgbValue) || rgbaExecRgx.exec(rgbValue);
1103    const a = !isUnd(rgba[4]) ? +rgba[4] : 1;
1104    return [
1105      +rgba[1],
1106      +rgba[2],
1107      +rgba[3],
1108      a
1109    ]
1110  };
1111
1112  /**
1113   * HEX3 / HEX3A / HEX6 / HEX6A Color value string -> RGBA values array
1114   * @param  {String} hexValue
1115   * @return {ColorArray}
1116   */
1117  const hexToRgba = hexValue => {
1118    const hexLength = hexValue.length;
1119    const isShort = hexLength === 4 || hexLength === 5;
1120    return [
1121      +('0x' + hexValue[1] + hexValue[isShort ? 1 : 2]),
1122      +('0x' + hexValue[isShort ? 2 : 3] + hexValue[isShort ? 2 : 4]),
1123      +('0x' + hexValue[isShort ? 3 : 5] + hexValue[isShort ? 3 : 6]),
1124      ((hexLength === 5 || hexLength === 9) ? +(+('0x' + hexValue[isShort ? 4 : 7] + hexValue[isShort ? 4 : 8]) / 255).toFixed(3) : 1)
1125    ]
1126  };
1127
1128  /**
1129   * @param  {Number} p
1130   * @param  {Number} q
1131   * @param  {Number} t
1132   * @return {Number}
1133   */
1134  const hue2rgb = (p, q, t) => {
1135    if (t < 0) t += 1;
1136    if (t > 1) t -= 1;
1137    return t < 1 / 6 ? p + (q - p) * 6 * t :
1138           t < 1 / 2 ? q :
1139           t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 :
1140           p;
1141  };
1142
1143  /**
1144   * HSL / HSLA Color value string -> RGBA values array
1145   * @param  {String} hslValue
1146   * @return {ColorArray}
1147   */
1148  const hslToRgba = hslValue => {
1149    const hsla = hslExecRgx.exec(hslValue) || hslaExecRgx.exec(hslValue);
1150    const h = +hsla[1] / 360;
1151    const s = +hsla[2] / 100;
1152    const l = +hsla[3] / 100;
1153    const a = !isUnd(hsla[4]) ? +hsla[4] : 1;
1154    let r, g, b;
1155    if (s === 0) {
1156      r = g = b = l;
1157    } else {
1158      const q = l < .5 ? l * (1 + s) : l + s - l * s;
1159      const p = 2 * l - q;
1160      r = round$1(hue2rgb(p, q, h + 1 / 3) * 255, 0);
1161      g = round$1(hue2rgb(p, q, h) * 255, 0);
1162      b = round$1(hue2rgb(p, q, h - 1 / 3) * 255, 0);
1163    }
1164    return [r, g, b, a];
1165  };
1166
1167  /**

1281   * @return {Number}
1282   */
1283  const getRelativeValue = (x, y, operator) => {
1284    return operator === '-' ? x - y :
1285           operator === '+' ? x + y :
1286           x * y;
1287  };
1288
1289  /** @return {TweenDecomposedValue} */
1290  const createDecomposedValueTargetObject = () => {
1291    return {
1292      /** @type {valueTypes} */
1293      t: valueTypes.NUMBER,
1294      n: 0,
1295      u: null,
1296      o: null,
1297      d: null,
1298      s: null,
1299    }
1300  };
1301
1302  /**
1303   * @param  {String|Number} rawValue
1304   * @param  {TweenDecomposedValue} targetObject
1305   * @return {TweenDecomposedValue}
1306   */
1307  const decomposeRawValue = (rawValue, targetObject) => {
1308    /** @type {valueTypes} */
1309    targetObject.t = valueTypes.NUMBER;
1310    targetObject.n = 0;
1311    targetObject.u = null;
1312    targetObject.o = null;
1313    targetObject.d = null;
1314    targetObject.s = null;
1315    if (!rawValue) return targetObject;
1316    const num = +rawValue;
1317    if (!isNaN(num)) {
1318      // It's a number
1319      targetObject.n = num;
1320      return targetObject;
1321    } else {
1322      // let str = /** @type {String} */(rawValue).trim();
1323      let str = /** @type {String} */(rawValue);
1324      // Parsing operators (+=, -=, *=) manually is much faster than using regex here
1325      if (str[1] === '=') {
1326        targetObject.o = str[0];
1327        str = str.slice(2);
1328      }
1329      // Skip exec regex if the value type is complex or color to avoid long regex backtracking
1330      const unitMatch = str.includes(' ') ? false : unitsExecRgx.exec(str);
1331      if (unitMatch) {
1332        // Has a number and a unit
1333        targetObject.t = valueTypes.UNIT;
1334        targetObject.n = +unitMatch[1];
1335        targetObject.u = unitMatch[2];
1336        return targetObject;
1337      } else if (targetObject.o) {
1338        // Has an operator (+=, -=, *=)
1339        targetObject.n = +str;
1340        return targetObject;
1341      } else if (isCol(str)) {
1342        // Is a color
1343        targetObject.t = valueTypes.COLOR;
1344        targetObject.d = convertColorStringValuesToRgbaArray(str);
1345        return targetObject;
1346      } else {
1347        // Is a more complex string (generally svg coords, calc() or filters CSS values)
1348        const matchedNumbers = str.match(digitWithExponentRgx);
1349        targetObject.t = valueTypes.COMPLEX;
1350        targetObject.d = matchedNumbers ? matchedNumbers.map(Number) : [];
1351        targetObject.s = str.split(digitWithExponentRgx) || [];
1352        return targetObject;
1353      }
1354    }
1355  };
1356
1357  /**
1358   * @param  {Tween} tween
1359   * @param  {TweenDecomposedValue} targetObject
1360   * @return {TweenDecomposedValue}
1361   */
1362  const decomposeTweenValue = (tween, targetObject) => {
1363    targetObject.t = tween._valueType;
1364    targetObject.n = tween._toNumber;
1365    targetObject.u = tween._unit;
1366    targetObject.o = null;
1367    targetObject.d = cloneArray(tween._toNumbers);
1368    targetObject.s = cloneArray(tween._strings);
1369    return targetObject;
1370  };
1371
1372  const decomposedOriginalValue = createDecomposedValueTargetObject();
1373
1374  
1375
1376  
1377
1378  
1379
1380  /**
1381   * @param  {Tickable} tickable
1382   * @param  {Number} time
1383   * @param  {Number} muteCallbacks
1384   * @param  {Number} internalRender
1385   * @param  {tickModes} tickMode
1386   * @return {Number}
1387   */
1388  const render = (tickable, time, muteCallbacks, internalRender, tickMode) => {
1389
1390    const parent = tickable.parent;
1391    const duration = tickable.duration;
1392    const completed = tickable.completed;
1393    const iterationDuration = tickable.iterationDuration;
1394    const iterationCount = tickable.iterationCount;
1395    const _currentIteration = tickable._currentIteration;
1396    const _loopDelay = tickable._loopDelay;
1397    const _reversed = tickable._reversed;
1398    const _alternate = tickable._alternate;
1399    const _hasChildren = tickable._hasChildren;
1400    const tickableDelay = tickable._delay;
1401    const tickablePrevAbsoluteTime = tickable._currentTime; // TODO: rename ._currentTime to ._absoluteCurrentTime
1402
1403    const tickableEndTime = tickableDelay + iterationDuration;
1404    const tickableAbsoluteTime = time - tickableDelay;
1405    const tickablePrevTime = clamp$1(tickablePrevAbsoluteTime, -tickableDelay, duration);
1406    const tickableCurrentTime = clamp$1(tickableAbsoluteTime, -tickableDelay, duration);
1407    const deltaTime = tickableAbsoluteTime - tickablePrevAbsoluteTime;
1408    const isCurrentTimeAboveZero = tickableCurrentTime > 0;
1409    const isCurrentTimeEqualOrAboveDuration = tickableCurrentTime >= duration;
1410    const isSetter = duration <= minValue;
1411    const forcedTick = tickMode === tickModes.FORCE;
1412
1413    let isOdd = 0;
1414    let iterationElapsedTime = tickableAbsoluteTime;
1415    // Render checks
1416    // Used to also check if the children have rendered in order to trigger the onRender callback on the parent timer
1417    let hasRendered = 0;
1418
1419    // Execute the "expensive" iterations calculations only when necessary
1420    if (iterationCount > 1) {
1421      // bitwise NOT operator seems to be generally faster than Math.floor() across browsers
1422      const currentIteration = ~~(tickableCurrentTime / (iterationDuration + (isCurrentTimeEqualOrAboveDuration ? 0 : _loopDelay)));
1423      tickable._currentIteration = clamp$1(currentIteration, 0, iterationCount);
1424      // Prevent the iteration count to go above the max iterations when reaching the end of the animation
1425      if (isCurrentTimeEqualOrAboveDuration) tickable._currentIteration--;
1426      isOdd = tickable._currentIteration % 2;
1427      iterationElapsedTime = tickableCurrentTime % (iterationDuration + _loopDelay) || 0;
1428    }
1429
1430    // Checks if exactly one of _reversed and (_alternate && isOdd) is true
1431    const isReversed = _reversed ^ (_alternate && isOdd);
1432    const _ease = /** @type {Renderable} */(tickable)._ease;
1433    let iterationTime = isCurrentTimeEqualOrAboveDuration ? isReversed ? 0 : duration : isReversed ? iterationDuration - iterationElapsedTime : iterationElapsedTime;
1434    if (_ease) iterationTime = iterationDuration * _ease(iterationTime / iterationDuration) || 0;
1435    const isRunningBackwards = (parent ? parent.backwards : tickableAbsoluteTime < tickablePrevAbsoluteTime) ? !isReversed : !!isReversed;
1436
1437    tickable._currentTime = tickableAbsoluteTime;
1438    tickable._iterationTime = iterationTime;
1439    tickable.backwards = isRunningBackwards;
1440
1441    if (isCurrentTimeAboveZero && !tickable.began) {
1442      tickable.began = true;
1443      if (!muteCallbacks && !(parent && (isRunningBackwards || !parent.began))) {
1444        tickable.onBegin(/** @type {CallbackArgument} */(tickable));
1445      }
1446    } else if (tickableAbsoluteTime <= 0) {
1447      tickable.began = false;
1448    }
1449
1450    // Only triggers onLoop for tickable without children, otherwise call the the onLoop callback in the tick function
1451    // Make sure to trigger the onLoop before rendering to allow .refresh() to pickup the current values
1452    if (!muteCallbacks && !_hasChildren && isCurrentTimeAboveZero && tickable._currentIteration !== _currentIteration) {
1453      tickable.onLoop(/** @type {CallbackArgument} */(tickable));
1454    }
1455
1456    if (
1457      forcedTick ||
1458      tickMode === tickModes.AUTO && (
1459        time >= tickableDelay && time <= tickableEndTime || // Normal render
1460        time <= tickableDelay && tickablePrevTime > tickableDelay || // Playhead is before the animation start time so make sure the animation is at its initial state
1461        time >= tickableEndTime && tickablePrevTime !== duration // Playhead is after the animation end time so make sure the animation is at its end state
1462      ) ||
1463      iterationTime >= tickableEndTime && tickablePrevTime !== duration ||
1464      iterationTime <= tickableDelay && tickablePrevTime > 0 ||
1465      time <= tickablePrevTime && tickablePrevTime === duration && completed || // Force a render if a seek occurs on an completed animation
1466      isCurrentTimeEqualOrAboveDuration && !completed && isSetter // This prevents 0 duration tickables to be skipped
1467    ) {
1468
1469      if (isCurrentTimeAboveZero) {
1470        // Trigger onUpdate callback before rendering
1471        tickable.computeDeltaTime(tickablePrevTime);
1472        if (!muteCallbacks) tickable.onBeforeUpdate(/** @type {CallbackArgument} */(tickable));
1473      }
1474
1475      // Start tweens rendering
1476      if (!_hasChildren) {
1477
1478        // Time has jumped more than globals.tickThreshold so consider this tick manual
1479        const forcedRender = forcedTick || (isRunningBackwards ? deltaTime * -1 : deltaTime) >= globals.tickThreshold;
1480        const absoluteTime = tickable._offset + (parent ? parent._offset : 0) + tickableDelay + iterationTime;
1481
1482        // Only Animation can have tweens, Timer returns undefined
1483        let tween = /** @type {Tween} */(/** @type {JSAnimation} */(tickable)._head);
1484        let tweenTarget;
1485        let tweenStyle;
1486        let tweenTargetTransforms;
1487        let tweenTargetTransformsProperties;
1488        let tweenTransformsNeedUpdate = 0;
1489
1490        while (tween) {
1491
1492          const tweenComposition = tween._composition;
1493          const tweenCurrentTime = tween._currentTime;
1494          const tweenChangeDuration = tween._changeDuration;
1495          const tweenAbsEndTime = tween._absoluteStartTime + tween._changeDuration;
1496          const tweenNextRep = tween._nextRep;
1497          const tweenPrevRep = tween._prevRep;
1498          const tweenHasComposition = tweenComposition !== compositionTypes.none;
1499
1500          if ((forcedRender || (
1501              (tweenCurrentTime !== tweenChangeDuration || absoluteTime <= tweenAbsEndTime + (tweenNextRep ? tweenNextRep._delay : 0)) &&
1502              (tweenCurrentTime !== 0 || absoluteTime >= tween._absoluteStartTime)
1503            )) && (!tweenHasComposition || (
1504              !tween._isOverridden &&
1505              (!tween._isOverlapped || absoluteTime <= tweenAbsEndTime) &&
1506              (!tweenNextRep || (tweenNextRep._isOverridden || absoluteTime <= tweenNextRep._absoluteStartTime)) &&
1507              (!tweenPrevRep || (tweenPrevRep._isOverridden || (absoluteTime >= (tweenPrevRep._absoluteStartTime + tweenPrevRep._changeDuration) + tween._delay)))
1508            ))
1509          ) {
1510
1511            const tweenNewTime = tween._currentTime = clamp$1(iterationTime - tween._startTime, 0, tweenChangeDuration);
1512            const tweenProgress = tween._ease(tweenNewTime / tween._updateDuration);
1513            const tweenModifier = tween._modifier;
1514            const tweenValueType = tween._valueType;
1515            const tweenType = tween._tweenType;
1516            const tweenIsObject = tweenType === tweenTypes.OBJECT;
1517            const tweenIsNumber = tweenValueType === valueTypes.NUMBER;
1518            // Only round the in-between frames values if the final value is a string
1519            const tweenPrecision = (tweenIsNumber && tweenIsObject) || tweenProgress === 0 || tweenProgress === 1 ? -1 : globals.precision;
1520
1521            // Recompose tween value
1522            /** @type {String|Number} */
1523            let value;
1524            /** @type {Number} */
1525            let number;
1526
1527            if (tweenIsNumber) {
1528              value = number = /** @type {Number} */(tweenModifier(round$1(lerp$1(tween._fromNumber, tween._toNumber,  tweenProgress), tweenPrecision )));
1529            } else if (tweenValueType === valueTypes.UNIT) {
1530              // Rounding the values speed up string composition
1531              number = /** @type {Number} */(tweenModifier(round$1(lerp$1(tween._fromNumber, tween._toNumber,  tweenProgress), tweenPrecision)));
1532              value = `${number}${tween._unit}`;
1533            } else if (tweenValueType === valueTypes.COLOR) {
1534              const fn = tween._fromNumbers;
1535              const tn = tween._toNumbers;
1536              const r = round$1(clamp$1(/** @type {Number} */(tweenModifier(lerp$1(fn[0], tn[0], tweenProgress))), 0, 255), 0);
1537              const g = round$1(clamp$1(/** @type {Number} */(tweenModifier(lerp$1(fn[1], tn[1], tweenProgress))), 0, 255), 0);
1538              const b = round$1(clamp$1(/** @type {Number} */(tweenModifier(lerp$1(fn[2], tn[2], tweenProgress))), 0, 255), 0);
1539              const a = clamp$1(/** @type {Number} */(tweenModifier(round$1(lerp$1(fn[3], tn[3], tweenProgress), tweenPrecision))), 0, 1);
1540              value = `rgba(${r},${g},${b},${a})`;
1541              if (tweenHasComposition) {
1542                const ns = tween._numbers;
1543                ns[0] = r;
1544                ns[1] = g;
1545                ns[2] = b;
1546                ns[3] = a;
1547              }
1548            } else if (tweenValueType === valueTypes.COMPLEX) {
1549              value = tween._strings[0];
1550              for (let j = 0, l = tween._toNumbers.length; j < l; j++) {
1551                const n = /** @type {Number} */(tweenModifier(round$1(lerp$1(tween._fromNumbers[j], tween._toNumbers[j], tweenProgress), tweenPrecision)));
1552                const s = tween._strings[j + 1];
1553                value += `${s ? n + s : n}`;
1554                if (tweenHasComposition) {
1555                  tween._numbers[j] = n;
1556                }
1557              }
1558            }
1559
1560            // For additive tweens and Animatables
1561            if (tweenHasComposition) {
1562              tween._number = number;
1563            }
1564
1565            if (!internalRender && tweenComposition !== compositionTypes.blend) {
1566
1567              const tweenProperty = tween.property;
1568              tweenTarget = tween.target;
1569
1570              if (tweenIsObject) {
1571                tweenTarget[tweenProperty] = value;
1572              } else if (tweenType === tweenTypes.ATTRIBUTE) {
1573                /** @type {DOMTarget} */(tweenTarget).setAttribute(tweenProperty, /** @type {String} */(value));
1574              } else {
1575                tweenStyle = /** @type {DOMTarget} */(tweenTarget).style;
1576                if (tweenType === tweenTypes.TRANSFORM) {
1577                  if (tweenTarget !== tweenTargetTransforms) {
1578                    tweenTargetTransforms = tweenTarget;
1579                    // NOTE: Referencing the cachedTransforms in the tween property directly can be a little bit faster but appears to increase memory usage.
1580                    tweenTargetTransformsProperties = tweenTarget[transformsSymbol];
1581                  }
1582                  tweenTargetTransformsProperties[tweenProperty] = value;
1583                  tweenTransformsNeedUpdate = 1;
1584                } else if (tweenType === tweenTypes.CSS) {
1585                  tweenStyle[tweenProperty] = value;
1586                } else if (tweenType === tweenTypes.CSS_VAR) {
1587                  tweenStyle.setProperty(tweenProperty,/** @type {String} */(value));
1588                }
1589              }
1590
1591              if (isCurrentTimeAboveZero) hasRendered = 1;
1592
1593            } else {
1594              // Used for composing timeline tweens without having to do a real render
1595              tween._value = value;
1596            }
1597
1598          }
1599
1600          // NOTE: Possible improvement: Use translate(x,y) / translate3d(x,y,z) syntax
1601          // to reduce memory usage on string composition
1602          if (tweenTransformsNeedUpdate && tween._renderTransforms) {
1603            let str = emptyString;
1604            for (let key in tweenTargetTransformsProperties) {
1605              str += `${transformsFragmentStrings[key]}${tweenTargetTransformsProperties[key]}) `;
1606            }
1607            tweenStyle.transform = str;
1608            tweenTransformsNeedUpdate = 0;
1609          }
1610
1611          tween = tween._next;
1612        }
1613
1614        if (!muteCallbacks && hasRendered) {
1615          /** @type {JSAnimation} */(tickable).onRender(/** @type {JSAnimation} */(tickable));
1616        }
1617      }
1618
1619      if (!muteCallbacks && isCurrentTimeAboveZero) {
1620        tickable.onUpdate(/** @type {CallbackArgument} */(tickable));
1621      }
1622
1623    }
1624
1625    // End tweens rendering
1626
1627    // Handle setters on timeline differently and allow re-trigering the onComplete callback when seeking backwards
1628    if (parent && isSetter) {
1629      if (!muteCallbacks && (
1630        // (tickableAbsoluteTime > 0 instead) of (tickableAbsoluteTime >= duration) to prevent floating point precision issues
1631        // see: https://github.com/juliangarnier/anime/issues/1088
1632        (parent.began && !isRunningBackwards && tickableAbsoluteTime > 0 && !completed) ||
1633        (isRunningBackwards && tickableAbsoluteTime <= minValue && completed)
1634      )) {
1635        tickable.onComplete(/** @type {CallbackArgument} */(tickable));
1636        tickable.completed = !isRunningBackwards;
1637      }
1638    // If currentTime is both above 0 and at least equals to duration, handles normal onComplete or infinite loops
1639    } else if (isCurrentTimeAboveZero && isCurrentTimeEqualOrAboveDuration) {
1640      if (iterationCount === Infinity) {
1641        // Offset the tickable _startTime with its duration to reset _currentTime to 0 and continue the infinite timer
1642        tickable._startTime += tickable.duration;
1643      } else if (tickable._currentIteration >= iterationCount - 1) {
1644        // By setting paused to true, we tell the engine loop to not render this tickable and removes it from the list on the next tick
1645        tickable.paused = true;
1646        if (!completed && !_hasChildren) {
1647          // If the tickable has children, triggers onComplete() only when all children have completed in the tick function
1648          tickable.completed = true;
1649          if (!muteCallbacks && !(parent && (isRunningBackwards || !parent.began))) {
1650            tickable.onComplete(/** @type {CallbackArgument} */(tickable));
1651            tickable._resolve(/** @type {CallbackArgument} */(tickable));
1652          }
1653        }
1654      }
1655    // Otherwise set the completed flag to false
1656    } else {
1657      tickable.completed = false;
1658    }
1659
1660    // NOTE: hasRendered * direction (negative for backwards) this way we can remove the tickable.backwards property completly ?
1661    return hasRendered;
1662  };
1663
1664  /**
1665   * @param  {Tickable} tickable
1666   * @param  {Number} time
1667   * @param  {Number} muteCallbacks
1668   * @param  {Number} internalRender
1669   * @param  {Number} tickMode
1670   * @return {void}
1671   */
1672  const tick = (tickable, time, muteCallbacks, internalRender, tickMode) => {
1673    const _currentIteration = tickable._currentIteration;
1674    render(tickable, time, muteCallbacks, internalRender, tickMode);
1675    if (tickable._hasChildren) {
1676      const tl = /** @type {Timeline} */(tickable);
1677      const tlIsRunningBackwards = tl.backwards;
1678      const tlChildrenTime = internalRender ? time : tl._iterationTime;
1679      const tlCildrenTickTime = now();
1680
1681      let tlChildrenHasRendered = 0;
1682      let tlChildrenHaveCompleted = true;
1683
1684      // If the timeline has looped forward, we need to manually triggers children skipped callbacks
1685      if (!internalRender && tl._currentIteration !== _currentIteration) {
1686        const tlIterationDuration = tl.iterationDuration;
1687        forEachChildren(tl, (/** @type {JSAnimation} */child) => {
1688          if (!tlIsRunningBackwards) {
1689            // Force an internal render to trigger the callbacks if the child has not completed on loop
1690            if (!child.completed && !child.backwards && child._currentTime < child.iterationDuration) {
1691              render(child, tlIterationDuration, muteCallbacks, 1, tickModes.FORCE);
1692            }
1693            // Reset their began and completed flags to allow retrigering callbacks on the next iteration
1694            child.began = false;
1695            child.completed = false;
1696          } else {
1697            const childDuration = child.duration;
1698            const childStartTime = child._offset + child._delay;
1699            const childEndTime = childStartTime + childDuration;
1700            // Triggers the onComplete callback on reverse for children on the edges of the timeline
1701            if (!muteCallbacks && childDuration <= minValue && (!childStartTime || childEndTime === tlIterationDuration)) {
1702              child.onComplete(child);
1703            }
1704          }
1705        });
1706        if (!muteCallbacks) tl.onLoop(/** @type {CallbackArgument} */(tl));
1707      }
1708
1709      forEachChildren(tl, (/** @type {JSAnimation} */child) => {
1710        const childTime = round$1((tlChildrenTime - child._offset) * child._speed, 12); // Rounding is needed when using seconds
1711        const childTickMode = child._fps < tl._fps ? child.requestTick(tlCildrenTickTime) : tickMode;
1712        tlChildrenHasRendered += render(child, childTime, muteCallbacks, internalRender, childTickMode);
1713        if (!child.completed && tlChildrenHaveCompleted) tlChildrenHaveCompleted = false;
1714      }, tlIsRunningBackwards);
1715
1716      // Renders on timeline are triggered by its children so it needs to be set after rendering the children
1717      if (!muteCallbacks && tlChildrenHasRendered) tl.onRender(/** @type {CallbackArgument} */(tl));
1718
1719      // Triggers the timeline onComplete() once all chindren all completed and the current time has reached the end
1720      if ((tlChildrenHaveCompleted || tlIsRunningBackwards) && tl._currentTime >= tl.duration) {
1721        // Make sure the paused flag is false in case it has been skipped in the render function
1722        tl.paused = true;
1723        if (!tl.completed) {
1724          tl.completed = true;
1725          if (!muteCallbacks) {
1726            tl.onComplete(/** @type {CallbackArgument} */(tl));
1727            tl._resolve(/** @type {CallbackArgument} */(tl));
1728          }
1729        }
1730      }
1731    }
1732  };
1733
1734  
1735
1736  
1737
1738  const propertyNamesCache = {};
1739
1740  /**
1741   * @param  {String} propertyName
1742   * @param  {Target} target
1743   * @param  {tweenTypes} tweenType
1744   * @return {String}
1745   */
1746  const sanitizePropertyName = (propertyName, target, tweenType) => {
1747    if (tweenType === tweenTypes.TRANSFORM) {
1748      const t = shortTransforms.get(propertyName);
1749      return t ? t : propertyName;
1750    } else if (
1751      tweenType === tweenTypes.CSS ||
1752      // Handle special cases where properties like "strokeDashoffset" needs to be set as "stroke-dashoffset"
1753      // but properties like "baseFrequency" should stay in lowerCamelCase
1754      (tweenType === tweenTypes.ATTRIBUTE && (isSvg(target) && propertyName in /** @type {DOMTarget} */(target).style))
1755    ) {
1756      const cachedPropertyName = propertyNamesCache[propertyName];
1757      if (cachedPropertyName) {
1758        return cachedPropertyName;
1759      } else {
1760        const lowerCaseName = propertyName ? toLowerCase(propertyName) : propertyName;
1761        propertyNamesCache[propertyName] = lowerCaseName;
1762        return lowerCaseName;
1763      }
1764    } else {
1765      return propertyName;
1766    }
1767  };
1768
1769  /**
1770   * @template {Renderable} T
1771   * @param {T} renderable
1772   * @return {T}
1773   */
1774  const cleanInlineStyles = renderable => {
1775    // Allow cleanInlineStyles() to be called on timelines
1776    if (renderable._hasChildren) {
1777      forEachChildren(renderable, cleanInlineStyles, true);
1778    } else {
1779      const animation = /** @type {JSAnimation} */(renderable);
1780      animation.pause();
1781      forEachChildren(animation, (/** @type {Tween} */tween) => {
1782        const tweenProperty = tween.property;
1783        const tweenTarget = tween.target;
1784        if (tweenTarget[isDomSymbol]) {
1785          const targetStyle = /** @type {DOMTarget} */(tweenTarget).style;
1786          const originalInlinedValue = tween._inlineValue;
1787          const tweenHadNoInlineValue = isNil(originalInlinedValue) || originalInlinedValue === emptyString;
1788          if (tween._tweenType === tweenTypes.TRANSFORM) {
1789            const cachedTransforms = tweenTarget[transformsSymbol];
1790            if (tweenHadNoInlineValue) {
1791              delete cachedTransforms[tweenProperty];
1792            } else {
1793              cachedTransforms[tweenProperty] = originalInlinedValue;
1794            }
1795            if (tween._renderTransforms) {
1796              if (!Object.keys(cachedTransforms).length) {
1797                targetStyle.removeProperty('transform');
1798              } else {
1799                let str = emptyString;
1800                for (let key in cachedTransforms) {
1801                  str += transformsFragmentStrings[key] + cachedTransforms[key] + ') ';
1802                }
1803                targetStyle.transform = str;
1804              }
1805            }
1806          } else {
1807            if (tweenHadNoInlineValue) {
1808              targetStyle.removeProperty(toLowerCase(tweenProperty));
1809            } else {
1810              targetStyle[tweenProperty] = originalInlinedValue;
1811            }
1812          }
1813          if (animation._tail === tween) {
1814            animation.targets.forEach(t => {
1815              if (t.getAttribute && t.getAttribute('style') === emptyString) {
1816                t.removeAttribute('style');
1817              }          });
1818          }
1819        }
1820      });
1821    }
1822    return renderable;
1823  };
1824
1825  
1826
1827  /*
1828   * Base class to control framerate and playback rate.
1829   * Inherited by Engine, Timer, Animation and Timeline.
1830   */
1831  class Clock {
1832
1833    /** @param {Number} [initTime] */
1834    constructor(initTime = 0) {
1835      /** @type {Number} */
1836      this.deltaTime = 0;
1837      /** @type {Number} */
1838      this._currentTime = initTime;
1839      /** @type {Number} */
1840      this._lastTickTime = initTime;
1841      /** @type {Number} */
1842      this._startTime = initTime;
1843      /** @type {Number} */
1844      this._lastTime = initTime;
1845      /** @type {Number} */
1846      this._scheduledTime = 0;
1847      /** @type {Number} */
1848      this._frameDuration = K / maxFps;
1849      /** @type {Number} */
1850      this._fps = maxFps;
1851      /** @type {Number} */
1852      this._speed = 1;
1853      /** @type {Boolean} */
1854      this._hasChildren = false;
1855      /** @type {Tickable|Tween} */
1856      this._head = null;
1857      /** @type {Tickable|Tween} */
1858      this._tail = null;
1859    }
1860
1861    get fps() {
1862      return this._fps;
1863    }
1864
1865    set fps(frameRate) {
1866      const previousFrameDuration = this._frameDuration;
1867      const fr = +frameRate;
1868      const fps = fr < minValue ? minValue : fr;
1869      const frameDuration = K / fps;
1870      if (fps > defaults.frameRate) defaults.frameRate = fps;
1871      this._fps = fps;
1872      this._frameDuration = frameDuration;
1873      this._scheduledTime += frameDuration - previousFrameDuration;
1874    }
1875
1876    get speed() {
1877      return this._speed;
1878    }
1879
1880    set speed(playbackRate) {
1881      const pbr = +playbackRate;
1882      this._speed = pbr < minValue ? minValue : pbr;
1883    }
1884
1885    /**
1886     * @param  {Number} time
1887     * @return {tickModes}
1888     */
1889    requestTick(time) {
1890      const scheduledTime = this._scheduledTime;
1891      this._lastTickTime = time;
1892      // If the current time is lower than the scheduled time
1893      // this means not enough time has passed to hit one frameDuration
1894      // so skip that frame
1895      if (time < scheduledTime) return tickModes.NONE;
1896      const frameDuration = this._frameDuration;
1897      const frameDelta = time - scheduledTime;
1898      // Ensures that _scheduledTime progresses in steps of at least 1 frameDuration.
1899      // Skips ahead if the actual elapsed time is higher.
1900      this._scheduledTime += frameDelta < frameDuration ? frameDuration : frameDelta;
1901      return tickModes.AUTO;
1902    }
1903
1904    /**
1905     * @param  {Number} time
1906     * @return {Number}
1907     */
1908    computeDeltaTime(time) {
1909      const delta = time - this._lastTime;
1910      this.deltaTime = delta;
1911      this._lastTime = time;
1912      return delta;
1913    }
1914
1915  }
1916
1917  const additive = {
1918    animation: null,
1919    update: noop,
1920  };
1921
1922  
1923
1924  /**
1925   * @typedef AdditiveAnimation
1926   * @property {Number} duration
1927   * @property {Number} _offset
1928   * @property {Number} _delay
1929   * @property {Tween} _head
1930   * @property {Tween} _tail
1931   */
1932
1933  /**
1934   * @param  {TweenAdditiveLookups} lookups
1935   * @return {AdditiveAnimation}
1936   */
1937  const addAdditiveAnimation = lookups => {
1938    let animation = additive.animation;
1939    if (!animation) {
1940      animation = {
1941        duration: minValue,
1942        computeDeltaTime: noop,
1943        _offset: 0,
1944        _delay: 0,
1945        _head: null,
1946        _tail: null,
1947      };
1948      additive.animation = animation;
1949      additive.update = () => {
1950        lookups.forEach(propertyAnimation => {
1951          for (let propertyName in propertyAnimation) {
1952            const tweens = propertyAnimation[propertyName];
1953            const lookupTween = tweens._head;
1954            if (lookupTween) {
1955              const valueType = lookupTween._valueType;
1956              const additiveValues = valueType === valueTypes.COMPLEX || valueType === valueTypes.COLOR ? cloneArray(lookupTween._fromNumbers) : null;
1957              let additiveValue = lookupTween._fromNumber;
1958              let tween = tweens._tail;
1959              while (tween && tween !== lookupTween) {
1960                if (additiveValues) {
1961                  for (let i = 0, l = tween._numbers.length; i < l; i++) additiveValues[i] += tween._numbers[i];
1962                } else {
1963                  additiveValue += tween._number;
1964                }
1965                tween = tween._prevAdd;
1966              }
1967              lookupTween._toNumber = additiveValue;
1968              lookupTween._toNumbers = additiveValues;
1969            }
1970          }
1971        });
1972        // TODO: Avoid polymorphism here, idealy the additive animation should be a regular animation with a higher priority in the render loop
1973        render(animation, 1, 1, 0, tickModes.FORCE);
1974      };
1975    }
1976    return animation;
1977  };
1978
1979  
1980
1981  
1982
1983  const engineTickMethod = /*#__PURE__*/ (() => isBrowser ? requestAnimationFrame : setImmediate)();
1984  const engineCancelMethod = /*#__PURE__*/ (() => isBrowser ? cancelAnimationFrame : clearImmediate)();
1985
1986  class Engine extends Clock {
1987
1988    /** @param {Number} [initTime] */
1989    constructor(initTime) {
1990      super(initTime);
1991      this.useDefaultMainLoop = true;
1992      this.pauseOnDocumentHidden = true;
1993      /** @type {DefaultsParams} */
1994      this.defaults = defaults;
1995      // this.paused = isBrowser && doc.hidden ? true  : false;

1996      this.paused = true;
1997      /** @type {Number|NodeJS.Immediate} */
1998      this.reqId = 0;
1999    }
2000
2001    update() {
2002      const time = this._currentTime = now();
2003      if (this.requestTick(time)) {
2004        this.computeDeltaTime(time);
2005        const engineSpeed = this._speed;
2006        const engineFps = this._fps;
2007        let activeTickable = /** @type {Tickable} */(this._head);
2008        while (activeTickable) {
2009          const nextTickable = activeTickable._next;
2010          if (!activeTickable.paused) {
2011            tick(
2012              activeTickable,
2013              (time - activeTickable._startTime) * activeTickable._speed * engineSpeed,
2014              0, // !muteCallbacks
2015              0, // !internalRender
2016              activeTickable._fps < engineFps ? activeTickable.requestTick(time) : tickModes.AUTO
2017            );
2018          } else {
2019            removeChild(this, activeTickable);
2020            this._hasChildren = !!this._tail;
2021            activeTickable._running = false;
2022            if (activeTickable.completed && !activeTickable._cancelled) {
2023              activeTickable.cancel();
2024            }
2025          }
2026          activeTickable = nextTickable;
2027        }
2028        additive.update();
2029      }
2030    }
2031
2032    wake() {
2033      if (this.useDefaultMainLoop && !this.reqId) {
2034        // Imediatly request a tick to update engine._lastTickTime and get accurate offsetPosition calculation in timer.js
2035        this.requestTick(now());
2036        this.reqId = engineTickMethod(tickEngine);
2037      }
2038      return this;
2039    }
2040
2041    pause() {
2042      if (!this.reqId) return;
2043      this.paused = true;
2044      return killEngine();
2045    }
2046
2047    resume() {
2048      if (!this.paused) return;
2049      this.paused = false;
2050      forEachChildren(this, (/** @type {Tickable} */child) => child.resetTime());
2051      return this.wake();
2052    }
2053
2054    // Getter and setter for speed
2055    get speed() {
2056      return this._speed * (globals.timeScale === 1 ? 1 : K);
2057    }
2058
2059    set speed(playbackRate) {
2060      this._speed = playbackRate * globals.timeScale;
2061      forEachChildren(this, (/** @type {Tickable} */child) => child.speed = child._speed);
2062    }
2063
2064    // Getter and setter for timeUnit
2065    get timeUnit() {
2066      return globals.timeScale === 1 ? 'ms' : 's';
2067    }
2068
2069    set timeUnit(unit) {
2070      const secondsScale = 0.001;
2071      const isSecond = unit === 's';
2072      const newScale = isSecond ? secondsScale : 1;
2073      if (globals.timeScale !== newScale) {
2074        globals.timeScale = newScale;
2075        globals.tickThreshold = 200 * newScale;
2076        const scaleFactor = isSecond ? secondsScale : K;
2077        /** @type {Number} */
2078        (this.defaults.duration) *= scaleFactor;
2079        this._speed *= scaleFactor;
2080      }
2081    }
2082
2083    // Getter and setter for precision
2084    get precision() {
2085      return globals.precision;
2086    }
2087
2088    set precision(precision) {
2089      globals.precision = precision;
2090    }
2091
2092  }
2093
2094  const engine = /*#__PURE__*/(() => {
2095    const engine = new Engine(now());
2096    if (isBrowser) {
2097      globalVersions.engine = engine;
2098      doc.addEventListener('visibilitychange', () => {
2099        if (!engine.pauseOnDocumentHidden) return;
2100        doc.hidden ? engine.pause() : engine.resume();
2101      });
2102    }
2103    return engine;
2104  })();
2105
2106
2107  const tickEngine = () => {
2108    if (engine._head) {
2109      engine.reqId = engineTickMethod(tickEngine);
2110      engine.update();
2111    } else {
2112      engine.reqId = 0;
2113    }
2114  };
2115
2116  const killEngine = () => {
2117    engineCancelMethod(/** @type {NodeJS.Immediate & Number} */(engine.reqId));
2118    engine.reqId = 0;
2119    return engine;
2120  };
2121
2122  
2123
2124  const lookups = {
2125    /** @type {TweenReplaceLookups} */
2126    _rep: new WeakMap(),
2127    /** @type {TweenAdditiveLookups} */
2128    _add: new Map(),
2129  };
2130
2131  /**
2132   * @param  {Target} target
2133   * @param  {String} property
2134   * @param  {String} lookup
2135   * @return {TweenPropertySiblings}
2136   */
2137  const getTweenSiblings = (target, property, lookup = '_rep') => {
2138    const lookupMap = lookups[lookup];
2139    let targetLookup = lookupMap.get(target);
2140    if (!targetLookup) {
2141      targetLookup = {};
2142      lookupMap.set(target, targetLookup);
2143    }

2144    return targetLookup[property] ? targetLookup[property] : targetLookup[property] = {
2145      _head: null,
2146      _tail: null,
2147    }
2148  };
2149
2150  /**
2151   * @param  {Tween} p
2152   * @param  {Tween} c
2153   * @return {Number|Boolean}
2154   */
2155  const addTweenSortMethod = (p, c) => {
2156    return p._isOverridden || p._absoluteStartTime > c._absoluteStartTime;
2157  };
2158
2159  /**
2160   * @param {Tween} tween
2161   */
2162  const overrideTween = tween => {
2163    tween._isOverlapped = 1;
2164    tween._isOverridden = 1;
2165    tween._changeDuration = minValue;
2166    tween._currentTime = minValue;
2167  };
2168
2169  /**
2170   * @param  {Tween} tween
2171   * @param  {TweenPropertySiblings} siblings
2172   * @return {Tween}
2173   */
2174  const composeTween = (tween, siblings) => {
2175
2176    const tweenCompositionType = tween._composition;
2177
2178    // Handle replaced tweens
2179
2180    if (tweenCompositionType === compositionTypes.replace) {
2181
2182      const tweenAbsStartTime = tween._absoluteStartTime;
2183
2184      addChild(siblings, tween, addTweenSortMethod, '_prevRep', '_nextRep');
2185
2186      const prevSibling = tween._prevRep;
2187
2188      // Update the previous siblings for composition replace tweens
2189
2190      if (prevSibling) {
2191
2192        const prevParent = prevSibling.parent;
2193        const prevAbsEndTime = prevSibling._absoluteStartTime + prevSibling._changeDuration;
2194
2195        // Handle looped animations tween
2196
2197        if (
2198          // Check if the previous tween is from a different animation
2199          tween.parent.id !== prevParent.id &&
2200          // Check if the animation has loops
2201          prevParent.iterationCount> 1 &&
2202          // Check if _absoluteChangeEndTime of last loop overlaps the current tween
2203          prevAbsEndTime + (prevParent.duration - prevParent.iterationDuration) > tweenAbsStartTime
2204        ) {
2205
2206          // TODO: Find a way to only override the iterations overlapping with the tween
2207          overrideTween(prevSibling);
2208
2209          let prevPrevSibling = prevSibling._prevRep;
2210
2211          // If the tween was part of a set of keyframes, override its siblings
2212          while (prevPrevSibling && prevPrevSibling.parent.id === prevParent.id) {
2213            overrideTween(prevPrevSibling);
2214            prevPrevSibling = prevPrevSibling._prevRep;
2215          }
2216
2217        }
2218
2219        const absoluteUpdateStartTime = tweenAbsStartTime - tween._delay;
2220
2221        if (prevAbsEndTime > absoluteUpdateStartTime) {
2222
2223          const prevChangeStartTime = prevSibling._startTime;
2224          const prevTLOffset = prevAbsEndTime - (prevChangeStartTime + prevSibling._updateDuration);
2225          // Rounding is necessary here to minimize floating point errors when working in seconds
2226          const updatedPrevChangeDuration = round$1(absoluteUpdateStartTime - prevTLOffset - prevChangeStartTime, 12);
2227
2228          prevSibling._changeDuration = updatedPrevChangeDuration;
2229          prevSibling._currentTime = updatedPrevChangeDuration;
2230          prevSibling._isOverlapped = 1;
2231
2232          // Override the previous tween if its new _changeDuration is lower than minValue
2233          // TODO: See if it's even neceseeary to test against minValue, checking for 0 might be enough
2234          if (updatedPrevChangeDuration < minValue) {
2235            overrideTween(prevSibling);
2236          }
2237        }
2238
2239        // Pause (and cancel) the parent if it only contains overlapped tweens
2240
2241        let pausePrevParentAnimation = true;
2242
2243        forEachChildren(prevParent, (/** @type Tween */t) => {
2244          if (!t._isOverlapped) pausePrevParentAnimation = false;
2245        });
2246
2247        if (pausePrevParentAnimation) {
2248          const prevParentTL = prevParent.parent;
2249          if (prevParentTL) {
2250            let pausePrevParentTL = true;
2251            forEachChildren(prevParentTL, (/** @type JSAnimation */a) => {
2252              if (a !== prevParent) {
2253                forEachChildren(a, (/** @type Tween */t) => {
2254                  if (!t._isOverlapped) pausePrevParentTL = false;
2255                });
2256              }
2257            });
2258            if (pausePrevParentTL) {
2259              prevParentTL.cancel();
2260            }
2261          } else {
2262            prevParent.cancel();
2263            // Previously, calling .cancel() on a timeline child would affect the render order of other children
2264            // Worked around this by marking it as .completed and using .pause() for safe removal in the engine loop
2265            // This is no longer needed since timeline tween composition is now handled separately
2266            // Keeping this here for reference
2267            // prevParent.completed = true;
2268            // prevParent.pause();
2269          }
2270        }
2271
2272      }
2273
2274      // let nextSibling = tween._nextRep;
2275
2276      // // All the next siblings are automatically overridden
2277
2278      // if (nextSibling && nextSibling._absoluteStartTime >= tweenAbsStartTime) {
2279      //   while (nextSibling) {
2280      //     overrideTween(nextSibling);
2281      //     nextSibling = nextSibling._nextRep;
2282      //   }
2283      // }
2284
2285      // if (nextSibling && nextSibling._absoluteStartTime < tweenAbsStartTime) {
2286      //   while (nextSibling) {
2287      //     overrideTween(nextSibling);
2288      //     console.log(tween.id, nextSibling.id);
2289      //     nextSibling = nextSibling._nextRep;
2290      //   }
2291      // }
2292
2293    // Handle additive tweens composition
2294
2295    } else if (tweenCompositionType === compositionTypes.blend) {
2296
2297      const additiveTweenSiblings = getTweenSiblings(tween.target, tween.property, '_add');
2298      const additiveAnimation = addAdditiveAnimation(lookups._add);
2299
2300      let lookupTween = additiveTweenSiblings._head;
2301
2302      if (!lookupTween) {
2303        lookupTween = { ...tween };
2304        lookupTween._composition = compositionTypes.replace;
2305        lookupTween._updateDuration = minValue;
2306        lookupTween._startTime = 0;
2307        lookupTween._numbers = cloneArray(tween._fromNumbers);
2308        lookupTween._number = 0;
2309        lookupTween._next = null;
2310        lookupTween._prev = null;
2311        addChild(additiveTweenSiblings, lookupTween);
2312        addChild(additiveAnimation, lookupTween);
2313      }
2314
2315      // Convert the values of TO to FROM and set TO to 0
2316
2317      const toNumber = tween._toNumber;
2318      tween._fromNumber = lookupTween._fromNumber - toNumber;
2319      tween._toNumber = 0;
2320      tween._numbers = cloneArray(tween._fromNumbers);
2321      tween._number = 0;
2322      lookupTween._fromNumber = toNumber;
2323
2324      if (tween._toNumbers) {
2325        const toNumbers = cloneArray(tween._toNumbers);
2326        if (toNumbers) {
2327          toNumbers.forEach((value, i) => {
2328            tween._fromNumbers[i] = lookupTween._fromNumbers[i] - value;
2329            tween._toNumbers[i] = 0;
2330          });
2331        }
2332        lookupTween._fromNumbers = toNumbers;
2333      }
2334
2335      addChild(additiveTweenSiblings, tween, null, '_prevAdd', '_nextAdd');
2336
2337    }
2338
2339    return tween;
2340
2341  };
2342
2343  /**
2344   * @param  {Tween} tween
2345   * @return {Tween}
2346   */
2347  const removeTweenSliblings = tween => {
2348    const tweenComposition = tween._composition;
2349    if (tweenComposition !== compositionTypes.none) {
2350      const tweenTarget = tween.target;
2351      const tweenProperty = tween.property;
2352      const replaceTweensLookup = lookups._rep;
2353      const replaceTargetProps = replaceTweensLookup.get(tweenTarget);
2354      const tweenReplaceSiblings = replaceTargetProps[tweenProperty];
2355      removeChild(tweenReplaceSiblings, tween, '_prevRep', '_nextRep');
2356      if (tweenComposition === compositionTypes.blend) {
2357        const addTweensLookup = lookups._add;
2358        const addTargetProps = addTweensLookup.get(tweenTarget);
2359        if (!addTargetProps) return;
2360        const additiveTweenSiblings = addTargetProps[tweenProperty];
2361        const additiveAnimation = additive.animation;
2362        removeChild(additiveTweenSiblings, tween, '_prevAdd', '_nextAdd');
2363        // If only one tween is left in the additive lookup, it's the tween lookup
2364        const lookupTween = additiveTweenSiblings._head;
2365        if (lookupTween && lookupTween === additiveTweenSiblings._tail) {
2366          removeChild(additiveTweenSiblings, lookupTween, '_prevAdd', '_nextAdd');
2367          removeChild(additiveAnimation, lookupTween);
2368          let shouldClean = true;
2369          for (let prop in addTargetProps) {
2370            if (addTargetProps[prop]._head) {
2371              shouldClean = false;
2372              break;
2373            }
2374          }
2375          if (shouldClean) {
2376            addTweensLookup.delete(tweenTarget);
2377          }
2378        }
2379      }
2380    }
2381    return tween;
2382  };
2383
2384  /**
2385   * @param  {TargetsArray} targetsArray
2386   * @param  {JSAnimation} animation
2387   * @param  {String} [propertyName]
2388   * @return {Boolean}
2389   */
2390  const removeTargetsFromJSAnimation = (targetsArray, animation, propertyName) => {
2391    let tweensMatchesTargets = false;

2392    forEachChildren(animation, (/**@type {Tween} */tween) => {
2393      const tweenTarget = tween.target;
2394      if (targetsArray.includes(tweenTarget)) {
2395        const tweenName = tween.property;
2396        const tweenType = tween._tweenType;
2397        const normalizePropName = sanitizePropertyName(propertyName, tweenTarget, tweenType);
2398        if (!normalizePropName || normalizePropName && normalizePropName === tweenName) {
2399          // Make sure to flag the previous CSS transform tween to renderTransform
2400          if (tween.parent._tail === tween &&
2401              tween._tweenType === tweenTypes.TRANSFORM &&
2402              tween._prev &&
2403              tween._prev._tweenType === tweenTypes.TRANSFORM
2404          ) {
2405            tween._prev._renderTransforms = 1;
2406          }
2407          // Removes the tween from the selected animation
2408          removeChild(animation, tween);
2409          // Detach the tween from its siblings to make sure blended tweens are correctlly removed
2410          removeTweenSliblings(tween);
2411          tweensMatchesTargets = true;
2412        }
2413      }
2414    }, true);
2415    return tweensMatchesTargets;
2416  };
2417
2418  /**
2419   * @param  {TargetsArray} targetsArray
2420   * @param  {Renderable} [renderable]
2421   * @param  {String} [propertyName]
2422   */
2423  const removeTargetsFromRenderable = (targetsArray, renderable, propertyName) => {
2424    const parent = /** @type {Renderable|typeof engine} **/(renderable ? renderable : engine);
2425    let removeMatches;
2426    if (parent._hasChildren) {
2427      let iterationDuration = 0;
2428      forEachChildren(parent, (/** @type {Renderable} */child) => {
2429        if (!child._hasChildren) {
2430          removeMatches = removeTargetsFromJSAnimation(targetsArray, /** @type {JSAnimation} */(child), propertyName);
2431          // Remove the child from its parent if no tweens and no children left after the removal
2432          if (removeMatches && !child._head) {
2433            child.cancel();
2434            removeChild(parent, child);
2435          } else {
2436            // Calculate the new iterationDuration value to handle onComplete with last child in render()
2437            const childTLOffset = child._offset + child._delay;
2438            const childDur = childTLOffset + child.duration;
2439            if (childDur > iterationDuration) {
2440              iterationDuration = childDur;
2441            }
2442          }
2443        }
2444        // Make sure to also remove engine's children targets
2445        // NOTE: Avoid recursion?
2446        if (child._head) {
2447          removeTargetsFromRenderable(targetsArray, child, propertyName);
2448        } else {
2449          child._hasChildren = false;
2450        }
2451      }, true);
2452      // Update iterationDuration value to handle onComplete with last child in render()
2453      if (!isUnd(/** @type {Renderable} */(parent).iterationDuration)) {
2454        /** @type {Renderable} */(parent).iterationDuration = iterationDuration;
2455      }
2456    } else {
2457      removeMatches = removeTargetsFromJSAnimation(
2458        targetsArray,
2459        /** @type {JSAnimation} */(parent),
2460        propertyName
2461      );
2462    }
2463    if (removeMatches && !parent._head) {
2464      parent._hasChildren = false;
2465      // Cancel the parent if there are no tweens and no children left after the removal
2466      // We have to check if the .cancel() method exist to handle cases where the parent is the engine itself
2467      if (/** @type {Renderable} */(parent).cancel) /** @type {Renderable} */(parent).cancel();
2468    }
2469  };
2470
2471  
2472
2473  
2474
2475  
2476
2477  /**
2478   * @param  {Timer} timer
2479   * @return {Timer}
2480   */
2481  const resetTimerProperties = timer => {
2482    timer.paused = true;
2483    timer.began = false;
2484    timer.completed = false;
2485    return timer;
2486  };
2487
2488  /**
2489   * @param  {Timer} timer
2490   * @return {Timer}
2491   */
2492  const reviveTimer = timer => {
2493    if (!timer._cancelled) return timer;
2494    if (timer._hasChildren) {
2495      forEachChildren(timer, reviveTimer);
2496    } else {
2497      forEachChildren(timer, (/** @type {Tween} tween */tween) => {
2498        if (tween._composition !== compositionTypes.none) {
2499          composeTween(tween, getTweenSiblings(tween.target, tween.property));
2500        }
2501      });
2502    }
2503    timer._cancelled = 0;
2504    return timer;
2505  };
2506
2507  let timerId = 0;
2508
2509  /**
2510   * Base class used to create Timers, Animations and Timelines
2511   */
2512  class Timer extends Clock {
2513    /**
2514     * @param {TimerParams} [parameters]
2515     * @param {Timeline} [parent]
2516     * @param {Number} [parentPosition]
2517     */
2518    constructor(parameters = {}, parent = null, parentPosition = 0) {
2519
2520      super(0);
2521
2522      ++timerId;
2523
2524      const {
2525        id,
2526        delay,
2527        duration,
2528        reversed,
2529        alternate,
2530        loop,
2531        loopDelay,
2532        autoplay,
2533        frameRate,
2534        playbackRate,
2535        onComplete,
2536        onLoop,
2537        onPause,
2538        onBegin,
2539        onBeforeUpdate,
2540        onUpdate,
2541      } = parameters;
2542
2543      if (scope.current) scope.current.register(this);
2544
2545      const timerInitTime = parent ? 0 : engine._lastTickTime;
2546      const timerDefaults = parent ? parent.defaults : globals.defaults;
2547      const timerDelay = /** @type {Number} */(isFnc(delay) || isUnd(delay) ? timerDefaults.delay : +delay);
2548      const timerDuration = isFnc(duration) || isUnd(duration) ? Infinity : +duration;
2549      const timerLoop = setValue(loop, timerDefaults.loop);
2550      const timerLoopDelay = setValue(loopDelay, timerDefaults.loopDelay);
2551      let timerIterationCount = timerLoop === true ||
2552                                timerLoop === Infinity ||
2553                                /** @type {Number} */(timerLoop) < 0 ? Infinity :
2554                                /** @type {Number} */(timerLoop) + 1;
2555
2556      if (devTools) {
2557        const isInfinite = timerIterationCount === Infinity;
2558        const registered = devTools.register(this, parameters, isInfinite);
2559        if (registered && isInfinite) {
2560          const minIterations = alternate ? 2 : 1;
2561          const iterations = parent ? devTools.maxNestedInfiniteLoops : devTools.maxInfiniteLoops;
2562          timerIterationCount = Math.max(iterations, minIterations);
2563        }
2564      }
2565
2566      let offsetPosition = 0;
2567
2568      if (parent) {
2569        offsetPosition = parentPosition;
2570      } else {
2571        // Make sure to tick the engine once if not currently running to get up to date engine._lastTickTime
2572        // to avoid big gaps with the following offsetPosition calculation
2573        if (!engine.reqId) engine.requestTick(now());
2574        // Make sure to scale the offset position with globals.timeScale to properly handle seconds unit
2575        offsetPosition = (engine._lastTickTime - engine._startTime) * globals.timeScale;
2576      }
2577
2578      // Timer's parameters
2579      /** @type {String|Number} */
2580      this.id = !isUnd(id) ? id : timerId;
2581      /** @type {Timeline} */
2582      this.parent = parent;
2583      // Total duration of the timer
2584      this.duration = clampInfinity(((timerDuration + timerLoopDelay) * timerIterationCount) - timerLoopDelay) || minValue;
2585      /** @type {Boolean} */
2586      this.backwards = false;
2587      /** @type {Boolean} */
2588      this.paused = true;
2589      /** @type {Boolean} */
2590      this.began = false;
2591      /** @type {Boolean} */
2592      this.completed = false;
2593      /** @type {Callback<this>} */
2594      this.onBegin = onBegin || timerDefaults.onBegin;
2595      /** @type {Callback<this>} */
2596      this.onBeforeUpdate = onBeforeUpdate || timerDefaults.onBeforeUpdate;
2597      /** @type {Callback<this>} */
2598      this.onUpdate = onUpdate || timerDefaults.onUpdate;
2599      /** @type {Callback<this>} */
2600      this.onLoop = onLoop || timerDefaults.onLoop;
2601      /** @type {Callback<this>} */
2602      this.onPause = onPause || timerDefaults.onPause;
2603      /** @type {Callback<this>} */
2604      this.onComplete = onComplete || timerDefaults.onComplete;
2605      /** @type {Number} */
2606      this.iterationDuration = timerDuration; // Duration of one loop
2607      /** @type {Number} */
2608      this.iterationCount = timerIterationCount; // Number of loops
2609      /** @type {Boolean|ScrollObserver} */
2610      this._autoplay = parent ? false : setValue(autoplay, timerDefaults.autoplay);
2611      /** @type {Number} */
2612      this._offset = offsetPosition;
2613      /** @type {Number} */
2614      this._delay = timerDelay;
2615      /** @type {Number} */
2616      this._loopDelay = timerLoopDelay;
2617      /** @type {Number} */
2618      this._iterationTime = 0;
2619      /** @type {Number} */
2620      this._currentIteration = 0; // Current loop index
2621      /** @type {Function} */
2622      this._resolve = noop; // Used by .then()
2623      /** @type {Boolean} */
2624      this._running = false;
2625      /** @type {Number} */
2626      this._reversed = +setValue(reversed, timerDefaults.reversed);
2627      /** @type {Number} */
2628      this._reverse = this._reversed;
2629      /** @type {Number} */
2630      this._cancelled = 0;
2631      /** @type {Boolean} */
2632      this._alternate = setValue(alternate, timerDefaults.alternate);
2633      /** @type {Renderable} */
2634      this._prev = null;
2635      /** @type {Renderable} */
2636      this._next = null;
2637
2638      // Clock's parameters
2639      /** @type {Number} */
2640      this._lastTickTime = timerInitTime;
2641      /** @type {Number} */
2642      this._startTime = timerInitTime;
2643      /** @type {Number} */
2644      this._lastTime = timerInitTime;
2645      /** @type {Number} */
2646      this._fps = setValue(frameRate, timerDefaults.frameRate);
2647      /** @type {Number} */
2648      this._speed = setValue(playbackRate, timerDefaults.playbackRate);
2649    }
2650
2651    get cancelled() {
2652      return !!this._cancelled;
2653    }
2654
2655    set cancelled(cancelled) {
2656      cancelled ? this.cancel() : this.reset(true).play();
2657    }
2658
2659    get currentTime() {
2660      return clamp$1(round$1(this._currentTime, globals.precision), -this._delay, this.duration);
2661    }
2662
2663    set currentTime(time) {
2664      const paused = this.paused;
2665      // Pausing the timer is necessary to avoid time jumps on a running instance
2666      this.pause().seek(+time);
2667      if (!paused) this.resume();
2668    }
2669
2670    get iterationCurrentTime() {
2671      return clamp$1(round$1(this._iterationTime, globals.precision), 0, this.iterationDuration);
2672    }
2673
2674    set iterationCurrentTime(time) {
2675      this.currentTime = (this.iterationDuration * this._currentIteration) + time;
2676    }
2677
2678    get progress() {
2679      return clamp$1(round$1(this._currentTime / this.duration, 10), 0, 1);
2680    }
2681
2682    set progress(progress) {
2683      this.currentTime = this.duration * progress;
2684    }
2685
2686    get iterationProgress() {
2687      return clamp$1(round$1(this._iterationTime / this.iterationDuration, 10), 0, 1);
2688    }
2689
2690    set iterationProgress(progress) {
2691      const iterationDuration = this.iterationDuration;
2692      this.currentTime = (iterationDuration * this._currentIteration) + (iterationDuration * progress);
2693    }
2694
2695    get currentIteration() {
2696      return this._currentIteration;
2697    }
2698
2699    set currentIteration(iterationCount) {
2700      this.currentTime = (this.iterationDuration * clamp$1(+iterationCount, 0, this.iterationCount - 1));
2701    }
2702
2703    get reversed() {
2704      return !!this._reversed;
2705    }
2706
2707    set reversed(reverse) {
2708      reverse ? this.reverse() : this.play();
2709    }
2710
2711    get speed() {
2712      return super.speed;
2713    }
2714
2715    set speed(playbackRate) {
2716      super.speed = playbackRate;
2717      this.resetTime();
2718    }
2719
2720    /**
2721     * @param  {Boolean} [softReset]
2722     * @return {this}
2723     */
2724    reset(softReset = false) {
2725      // If cancelled, revive the timer before rendering in order to have propertly composed tweens siblings
2726      reviveTimer(this);
2727      if (this._reversed && !this._reverse) this.reversed = false;
2728      // Rendering before updating the completed flag to prevent skips and to make sure the properties are not overridden
2729      // Setting the iterationTime at the end to force the rendering to happend backwards, otherwise calling .reset() on Timelines might not render children in the right order
2730      // NOTE: This is only required for Timelines and might be better to move to the Timeline class?
2731      this._iterationTime = this.iterationDuration;
2732      // Set tickMode to tickModes.FORCE to force rendering
2733      tick(this, 0, 1, ~~softReset, tickModes.FORCE);
2734      // Reset timer properties after revive / render to make sure the props are not updated again
2735      resetTimerProperties(this);
2736      // Also reset children properties
2737      if (this._hasChildren) {
2738        forEachChildren(this, resetTimerProperties);
2739      }
2740      return this;
2741    }
2742
2743    /**
2744     * @param  {Boolean} internalRender
2745     * @return {this}
2746     */
2747    init(internalRender = false) {
2748      this.fps = this._fps;
2749      this.speed = this._speed;
2750      // Manually calling .init() on timelines should render all children intial state
2751      // Forces all children to render once then render to 0 when reseted
2752      if (!internalRender && this._hasChildren) {
2753        tick(this, this.duration, 1, ~~internalRender, tickModes.FORCE);
2754      }
2755      this.reset(internalRender);
2756      // Make sure to set autoplay to false to child timers so it doesn't attempt to autoplay / link
2757      const autoplay = this._autoplay;
2758      if (autoplay === true) {
2759        this.resume();
2760      } else if (autoplay && !isUnd(/** @type {ScrollObserver} */(autoplay).linked)) {
2761        /** @type {ScrollObserver} */(autoplay).link(this);
2762      }
2763      return this;
2764    }
2765
2766    /** @return {this} */
2767    resetTime() {
2768      const timeScale = 1 / (this._speed * engine._speed);
2769      // TODO: See if we can safely use engine._lastTickTime here
2770      // if (!engine.reqId) engine.requestTick(now())
2771      // this._startTime = engine._lastTickTime - (this._currentTime + this._delay) * timeScale;
2772      this._startTime = now() - (this._currentTime + this._delay) * timeScale;
2773      return this;
2774    }
2775
2776    /** @return {this} */
2777    pause() {
2778      if (this.paused) return this;
2779      this.paused = true;
2780      this.onPause(this);
2781      return this;
2782    }
2783
2784    /** @return {this} */
2785    resume() {
2786      if (!this.paused) return this;
2787      this.paused = false;
2788      // We can safely imediatly render a timer that has no duration and no children
2789      if (this.duration <= minValue && !this._hasChildren) {
2790        tick(this, minValue, 0, 0, tickModes.FORCE);
2791      } else {
2792        if (!this._running) {
2793          addChild(engine, this);
2794          engine._hasChildren = true;
2795          this._running = true;
2796        }
2797        this.resetTime();
2798        // Forces the timer to advance by at least one frame when the next tick occurs
2799        this._startTime -= 12;
2800        engine.wake();
2801      }
2802      return this;
2803    }
2804
2805    /** @return {this} */
2806    restart() {
2807      return this.reset().resume();
2808    }
2809
2810    /**
2811     * @param  {Number} time
2812     * @param  {Boolean|Number} [muteCallbacks]
2813     * @param  {Boolean|Number} [internalRender]
2814     * @return {this}
2815     */
2816    seek(time, muteCallbacks = 0, internalRender = 0) {
2817      // Recompose the tween siblings in case the timer has been cancelled
2818      reviveTimer(this);
2819      // If you seek a completed animation, otherwise the next play will starts at 0
2820      this.completed = false;
2821      const isPaused = this.paused;
2822      this.paused = true;
2823      // timer, time, muteCallbacks, internalRender, tickMode
2824      tick(this, time + this._delay, ~~muteCallbacks, ~~internalRender, tickModes.AUTO);
2825      return isPaused ? this : this.resume();
2826    }
2827
2828    /** @return {this} */
2829    alternate() {
2830      const reversed = this._reversed;
2831      const count = this.iterationCount;
2832      const duration = this.iterationDuration;
2833      // Calculate the maximum iterations possible given the iteration duration
2834      const iterations = count === Infinity ? floor(maxValue / duration) : count;
2835      this._reversed = +(this._alternate && !(iterations % 2) ? reversed : !reversed);
2836      if (count === Infinity) {
2837        // Handle infinite loops to loop on themself
2838        this.iterationProgress = this._reversed ? 1 - this.iterationProgress : this.iterationProgress;
2839      } else {
2840        this.seek((duration * iterations) - this._currentTime);
2841      }
2842      this.resetTime();
2843      return this;
2844    }
2845
2846    /** @return {this} */
2847    play() {
2848      if (this._reversed) this.alternate();
2849      return this.resume();
2850    }
2851
2852    /** @return {this} */
2853    reverse() {
2854      if (!this._reversed) this.alternate();
2855      return this.resume();
2856    }
2857
2858    // TODO: Move all the animation / tweens / children related code to Animation / Timeline
2859
2860    /** @return {this} */
2861    cancel() {
2862      if (this._hasChildren) {
2863        forEachChildren(this, (/** @type {Renderable} */child) => child.cancel(), true);
2864      } else {
2865        forEachChildren(this, removeTweenSliblings);
2866      }
2867      this._cancelled = 1;
2868      // Pausing the timer removes it from the engine
2869      return this.pause();
2870    }
2871
2872    /**
2873     * @param  {Number} newDuration
2874     * @return {this}
2875     */
2876    stretch(newDuration) {
2877      const currentDuration = this.duration;
2878      const normlizedDuration = normalizeTime(newDuration);
2879      if (currentDuration === normlizedDuration) return this;
2880      const timeScale = newDuration / currentDuration;
2881      const isSetter = newDuration <= minValue;
2882      this.duration = isSetter ? minValue : normlizedDuration;
2883      this.iterationDuration = isSetter ? minValue : normalizeTime(this.iterationDuration * timeScale);
2884      this._offset *= timeScale;
2885      this._delay *= timeScale;
2886      this._loopDelay *= timeScale;
2887      return this;
2888    }
2889
2890   /**
2891     * Cancels the timer by seeking it back to 0 and reverting the attached scroller if necessary
2892     * @return {this}
2893     */
2894    revert() {
2895      tick(this, 0, 1, 0, tickModes.AUTO);
2896      const ap = /** @type {ScrollObserver} */(this._autoplay);
2897      if (ap && ap.linked && ap.linked === this) ap.revert();
2898      return this.cancel();
2899    }
2900
2901   /**
2902     * Imediatly completes the timer, cancels it and triggers the onComplete callback
2903     * @param  {Boolean|Number} [muteCallbacks]
2904     * @return {this}
2905     */
2906    complete(muteCallbacks = 0) {
2907      return this.seek(this.duration, muteCallbacks).cancel();
2908    }
2909
2910    /**
2911     * @typedef {this & {then: null}} ResolvedTimer
2912     */
2913
2914    /**
2915     * @param  {Callback<ResolvedTimer>} [callback]
2916     * @return Promise<this>
2917     */
2918    then(callback = noop) {
2919      const then = this.then;
2920      const onResolve = () => {
2921        // this.then = null prevents infinite recursion if returned by an async function
2922        // https://github.com/juliangarnierorg/anime-beta/issues/26
2923        this.then = null;
2924        callback(/** @type {ResolvedTimer} */(this));
2925        this.then = then;
2926        this._resolve = noop;
2927      };
2928      return new Promise(r => {
2929        this._resolve = () => r(onResolve());
2930        // Make sure to resolve imediatly if the timer has already completed
2931        if (this.completed) this._resolve();
2932        return this;
2933      });
2934    }
2935
2936  }
2937
2938  /**
2939   * @param {TimerParams} [parameters]
2940   * @return {Timer}
2941   */
2942  const createTimer = parameters => new Timer(parameters, null, 0).init();
2943
2944  
2945
2946  /**
2947   * @param  {DOMTargetsParam|TargetsParam} v
2948   * @return {NodeList|HTMLCollection}
2949   */
2950  function getNodeList(v) {
2951    const n = isStr(v) ? scope.root.querySelectorAll(v) : v;
2952    if (n instanceof NodeList || n instanceof HTMLCollection) return n;
2953  }
2954
2955  /**
2956   * @overload
2957   * @param  {DOMTargetsParam} targets
2958   * @return {DOMTargetsArray}
2959   *
2960   * @overload
2961   * @param  {JSTargetsParam} targets
2962   * @return {JSTargetsArray}
2963   *
2964   * @overload
2965   * @param  {TargetsParam} targets
2966   * @return {TargetsArray}
2967   *
2968   * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
2969   */
2970  function parseTargets(targets) {
2971    if (isNil(targets)) return /** @type {TargetsArray} */([]);
2972    if (!isBrowser) return /** @type {JSTargetsArray} */(isArr(targets) && targets.flat(Infinity) || [targets]);
2973    if (isArr(targets)) {
2974      const flattened = targets.flat(Infinity);
2975      /** @type {TargetsArray} */
2976      const parsed = [];
2977      for (let i = 0, l = flattened.length; i < l; i++) {
2978        const item = flattened[i];
2979        if (!isNil(item)) {
2980          const nodeList = getNodeList(item);
2981          if (nodeList) {
2982            for (let j = 0, jl = nodeList.length; j < jl; j++) {
2983              const subItem = nodeList[j];
2984              if (!isNil(subItem)) {
2985                let isDuplicate = false;
2986                for (let k = 0, kl = parsed.length; k < kl; k++) {
2987                  if (parsed[k] === subItem) {
2988                    isDuplicate = true;
2989                    break;
2990                  }
2991                }
2992                if (!isDuplicate) {
2993                  parsed.push(subItem);
2994                }
2995              }
2996            }
2997          } else {
2998            let isDuplicate = false;
2999            for (let j = 0, jl = parsed.length; j < jl; j++) {
3000              if (parsed[j] === item) {
3001                isDuplicate = true;
3002                break;
3003              }
3004            }
3005            if (!isDuplicate) {
3006              parsed.push(item);
3007            }
3008          }
3009        }
3010      }
3011      return parsed;
3012    }
3013    const nodeList = getNodeList(targets);
3014    if (nodeList) return /** @type {DOMTargetsArray} */(Array.from(nodeList));
3015    return /** @type {TargetsArray} */([targets]);
3016  }
3017
3018  /**
3019   * @overload
3020   * @param  {DOMTargetsParam} targets
3021   * @return {DOMTargetsArray}
3022   *
3023   * @overload
3024   * @param  {JSTargetsParam} targets
3025   * @return {JSTargetsArray}
3026   *
3027   * @overload
3028   * @param  {TargetsParam} targets
3029   * @return {TargetsArray}
3030   *
3031   * @param  {DOMTargetsParam|JSTargetsParam|TargetsParam} targets
3032   */
3033  function registerTargets(targets) {
3034    const parsedTargetsArray = parseTargets(targets);
3035    const parsedTargetsLength = parsedTargetsArray.length;
3036    if (parsedTargetsLength) {
3037      for (let i = 0; i < parsedTargetsLength; i++) {
3038        const target = parsedTargetsArray[i];
3039        if (!target[isRegisteredTargetSymbol]) {
3040          target[isRegisteredTargetSymbol] = true;
3041          const isSvgType = isSvg(target);
3042          const isDom = /** @type {DOMTarget} */(target).nodeType || isSvgType;
3043          if (isDom) {
3044            target[isDomSymbol] = true;
3045            target[isSvgSymbol] = isSvgType;
3046            target[transformsSymbol] = {};
3047          }
3048        }
3049      }
3050    }
3051    return parsedTargetsArray;
3052  }
3053
3054  const angleUnitsMap = { 'deg': 1, 'rad': 180 / PI, 'turn': 360 };
3055  const convertedValuesCache = {};
3056
3057  
3058
3059  /**
3060   * @param  {DOMTarget} el
3061   * @param  {TweenDecomposedValue} decomposedValue
3062   * @param  {String} unit
3063   * @param  {Boolean} [force]
3064   * @return {TweenDecomposedValue}
3065   */
3066  const convertValueUnit = (el, decomposedValue, unit, force = false) => {
3067    const currentUnit = decomposedValue.u;
3068    const currentNumber = decomposedValue.n;
3069    if (decomposedValue.t === valueTypes.UNIT && currentUnit === unit) { // TODO: Check if checking against the same unit string is necessary
3070      return decomposedValue;
3071    }
3072    const cachedKey = currentNumber + currentUnit + unit;
3073    const cached = convertedValuesCache[cachedKey];
3074    if (!isUnd(cached) && !force) {
3075      decomposedValue.n = cached;
3076    } else {
3077      let convertedValue;
3078      if (currentUnit in angleUnitsMap) {
3079        convertedValue = currentNumber * angleUnitsMap[currentUnit] / angleUnitsMap[unit];
3080      } else {
3081        const baseline = 100;
3082        const tempEl = /** @type {DOMTarget} */(el.cloneNode());
3083        const parentNode = el.parentNode;
3084        const parentEl = (parentNode && (parentNode !== doc)) ? parentNode : doc.body;
3085        parentEl.appendChild(tempEl);
3086        const elStyle = tempEl.style;
3087        elStyle.width = baseline + currentUnit;
3088        const currentUnitWidth = /** @type {HTMLElement} */(tempEl).offsetWidth || baseline;
3089        elStyle.width = baseline + unit;
3090        const newUnitWidth = /** @type {HTMLElement} */(tempEl).offsetWidth || baseline;
3091        const factor = currentUnitWidth / newUnitWidth;
3092        parentEl.removeChild(tempEl);
3093        convertedValue = factor * currentNumber;
3094      }
3095      decomposedValue.n = convertedValue;
3096      convertedValuesCache[cachedKey] = convertedValue;
3097    }
3098    decomposedValue.t === valueTypes.UNIT;
3099    decomposedValue.u = unit;
3100    return decomposedValue;
3101  };
3102
3103  
3104
3105  /** @type {EasingFunction} */
3106  const none = t => t;
3107
3108  
3109
3110
3111  /** @type {PowerEasing} */
3112  const easeInPower = (p = 1.68) => t => pow(t, +p);
3113
3114  /**
3115   * @callback EaseType
3116   * @param {EasingFunction} Ease
3117   * @return {EasingFunction}
3118   */
3119
3120  /** @type {Record<String, EaseType>} */
3121  const easeTypes = {
3122    in: easeIn => t => easeIn(t),
3123    out: easeIn => t => 1 - easeIn(1 - t),
3124    inOut: easeIn => t => t < .5 ? easeIn(t * 2) / 2 : 1 - easeIn(t * -2 + 2) / 2,
3125    outIn: easeIn => t => t < .5 ? (1 - easeIn(1 - t * 2)) / 2 : (easeIn(t * 2 - 1) + 1) / 2,
3126  };
3127
3128  /**
3129   * Easing functions adapted and simplified from https://robertpenner.com/easing/
3130   * (c) 2001 Robert Penner
3131   */
3132
3133  const halfPI = PI / 2;
3134  const doublePI = PI * 2;
3135
3136  /** @type {Record<String, EasingFunctionWithParams|EasingFunction>} */
3137  const easeInFunctions = {
3138    [emptyString]: easeInPower,
3139    Quad: easeInPower(2),
3140    Cubic: easeInPower(3),
3141    Quart: easeInPower(4),
3142    Quint: easeInPower(5),
3143    /** @type {EasingFunction} */
3144    Sine: t => 1 - cos(t * halfPI),
3145    /** @type {EasingFunction} */
3146    Circ: t => 1 - sqrt(1 - t * t),
3147    /** @type {EasingFunction} */
3148    Expo: t => t ? pow(2, 10 * t - 10) : 0,
3149    /** @type {EasingFunction} */
3150    Bounce: t => {
3151      let pow2, b = 4;
3152      while (t < ((pow2 = pow(2, --b)) - 1) / 11);
3153      return 1 / pow(4, 3 - b) - 7.5625 * pow((pow2 * 3 - 2) / 22 - t, 2);
3154    },
3155    /** @type {BackEasing} */
3156    Back: (overshoot = 1.7) => t => (+overshoot + 1) * t * t * t - +overshoot * t * t,
3157    /** @type {ElasticEasing} */
3158    Elastic: (amplitude = 1, period = .3) => {
3159      const a = clamp$1(+amplitude, 1, 10);
3160      const p = clamp$1(+period, minValue, 2);
3161      const s = (p / doublePI) * asin(1 / a);
3162      const e = doublePI / p;
3163      return t => t === 0 || t === 1 ? t : -a * pow(2, -10 * (1 - t)) * sin(((1 - t) - s) * e);
3164    }
3165  };
3166
3167  /**
3168   * @typedef  {Object} EasesFunctions
3169   * @property {typeof none} linear
3170   * @property {typeof none} none
3171   * @property {PowerEasing} in
3172   * @property {PowerEasing} out
3173   * @property {PowerEasing} inOut
3174   * @property {PowerEasing} outIn
3175   * @property {EasingFunction} inQuad
3176   * @property {EasingFunction} outQuad
3177   * @property {EasingFunction} inOutQuad
3178   * @property {EasingFunction} outInQuad
3179   * @property {EasingFunction} inCubic
3180   * @property {EasingFunction} outCubic
3181   * @property {EasingFunction} inOutCubic
3182   * @property {EasingFunction} outInCubic
3183   * @property {EasingFunction} inQuart
3184   * @property {EasingFunction} outQuart
3185   * @property {EasingFunction} inOutQuart
3186   * @property {EasingFunction} outInQuart
3187   * @property {EasingFunction} inQuint
3188   * @property {EasingFunction} outQuint
3189   * @property {EasingFunction} inOutQuint
3190   * @property {EasingFunction} outInQuint
3191   * @property {EasingFunction} inSine
3192   * @property {EasingFunction} outSine
3193   * @property {EasingFunction} inOutSine
3194   * @property {EasingFunction} outInSine
3195   * @property {EasingFunction} inCirc
3196   * @property {EasingFunction} outCirc
3197   * @property {EasingFunction} inOutCirc
3198   * @property {EasingFunction} outInCirc
3199   * @property {EasingFunction} inExpo
3200   * @property {EasingFunction} outExpo
3201   * @property {EasingFunction} inOutExpo
3202   * @property {EasingFunction} outInExpo
3203   * @property {EasingFunction} inBounce
3204   * @property {EasingFunction} outBounce
3205   * @property {EasingFunction} inOutBounce
3206   * @property {EasingFunction} outInBounce
3207   * @property {BackEasing} inBack
3208   * @property {BackEasing} outBack
3209   * @property {BackEasing} inOutBack
3210   * @property {BackEasing} outInBack
3211   * @property {ElasticEasing} inElastic
3212   * @property {ElasticEasing} outElastic
3213   * @property {ElasticEasing} inOutElastic
3214   * @property {ElasticEasing} outInElastic
3215   */
3216
3217  const eases = (/*#__PURE__ */ (() => {
3218    const list = { linear: none, none: none };
3219    for (let type in easeTypes) {
3220      for (let name in easeInFunctions) {
3221        const easeIn = easeInFunctions[name];
3222        const easeType = easeTypes[type];
3223        list[type + name] = /** @type {EasingFunctionWithParams|EasingFunction} */(
3224          name === emptyString || name === 'Back' || name === 'Elastic' ?
3225          (a, b) => easeType(/** @type {EasingFunctionWithParams} */(easeIn)(a, b)) :
3226          easeType(/** @type {EasingFunction} */(easeIn))
3227        );
3228      }
3229    }
3230    return /** @type {EasesFunctions} */(list);
3231  })());
3232
3233  /** @type {Record<String, EasingFunction>} */
3234  const easesLookups = { linear: none, none: none };
3235
3236  /**
3237   * @param  {String} string
3238   * @return {EasingFunction}
3239   */
3240  const parseEaseString = (string) => {
3241    if (easesLookups[string]) return easesLookups[string];
3242    if (string.indexOf('(') <= -1) {
3243      const hasParams = easeTypes[string] || string.includes('Back') || string.includes('Elastic');
3244      const parsedFn = /** @type {EasingFunction} */(hasParams ? /** @type {EasingFunctionWithParams} */(eases[string])() : eases[string]);
3245      return parsedFn ? easesLookups[string] = parsedFn : none;
3246    } else {
3247      const split = string.slice(0, -1).split('(');
3248      const parsedFn = /** @type {EasingFunctionWithParams} */(eases[split[0]]);
3249      return parsedFn ? easesLookups[string] = parsedFn(...split[1].split(',')) : none;
3250    }
3251  };
3252
3253  const deprecated = ['steps(', 'irregular(', 'linear(', 'cubicBezier('];
3254
3255  /**
3256   * @param  {EasingParam} ease
3257   * @return {EasingFunction}
3258   */
3259  const parseEase = ease => {
3260    if (isStr(ease)) {
3261      for (let i = 0, l = deprecated.length; i < l; i++) {
3262        if (stringStartsWith(ease, deprecated[i])) {
3263          console.warn(`String syntax for \`ease: "${ease}"\` has been removed from the core and replaced by importing and passing the easing function directly: \`ease: ${ease}\``);
3264          return none;
3265        }
3266      }
3267    }
3268    const easeFunc = isFnc(ease) ? ease : isStr(ease) ? parseEaseString(/** @type {String} */(ease)) : none;
3269    return easeFunc;
3270  };
3271
3272  
3273
3274  // Defines decomposed values target objects only once and mutate their properties later to avoid GC
3275  // TODO: Maybe move the objects creation to values.js and use the decompose function to create the base object
3276  const fromTargetObject = createDecomposedValueTargetObject();
3277  const toTargetObject = createDecomposedValueTargetObject();
3278  const inlineStylesStore = {};
3279  const toFunctionStore = { func: null };
3280  const keyframesTargetArray = [null];
3281  const fastSetValuesArray = [null, null];
3282  /** @type {TweenKeyValue} */
3283  const keyObjectTarget = { to: null };
3284
3285  let tweenId = 0;
3286  let JSAnimationId = 0;
3287  let keyframes;
3288  /** @type {TweenParamsOptions & TweenValues} */
3289  let key;
3290
3291  /**
3292   * @param {DurationKeyframes | PercentageKeyframes} keyframes
3293   * @param {AnimationParams} parameters
3294   * @return {AnimationParams}
3295   */
3296  const generateKeyframes = (keyframes, parameters) => {
3297    /** @type {AnimationParams} */
3298    const properties = {};
3299    if (isArr(keyframes)) {
3300      const propertyNames = [].concat(.../** @type {DurationKeyframes} */(keyframes).map(key => Object.keys(key))).filter(isKey);
3301      for (let i = 0, l = propertyNames.length; i < l; i++) {
3302        const propName = propertyNames[i];
3303        const propArray = /** @type {DurationKeyframes} */(keyframes).map(key => {
3304          /** @type {TweenKeyValue} */
3305          const newKey = {};
3306          for (let p in key) {
3307            const keyValue = /** @type {TweenPropValue} */(key[p]);
3308            if (isKey(p)) {
3309              if (p === propName) {
3310                newKey.to = keyValue;
3311              }
3312            } else {
3313              newKey[p] = keyValue;
3314            }
3315          }
3316          return newKey;
3317        });
3318        properties[propName] = /** @type {ArraySyntaxValue} */(propArray);
3319      }
3320
3321    } else {
3322      const totalDuration = /** @type {Number} */(setValue(parameters.duration, globals.defaults.duration));
3323      const keys = Object.keys(keyframes)
3324      .map(key => { return {o: parseFloat(key) / 100, p: keyframes[key]} })
3325      .sort((a, b) => a.o - b.o);
3326      keys.forEach(key => {
3327        const offset = key.o;
3328        const prop = key.p;
3329        for (let name in prop) {
3330          if (isKey(name)) {
3331            let propArray = /** @type {Array} */(properties[name]);
3332            if (!propArray) propArray = properties[name] = [];
3333            const duration = offset * totalDuration;
3334            let length = propArray.length;
3335            let prevKey = propArray[length - 1];
3336            const keyObj = { to: prop[name] };
3337            let durProgress = 0;
3338            for (let i = 0; i < length; i++) {
3339              durProgress += propArray[i].duration;
3340            }
3341            if (length === 1) {
3342              keyObj.from = prevKey.to;
3343            }
3344            if (prop.ease) {
3345              keyObj.ease = prop.ease;
3346            }
3347            keyObj.duration = duration - (length ? durProgress : 0);
3348            propArray.push(keyObj);
3349          }
3350        }
3351        return key;
3352      });
3353
3354      for (let name in properties) {
3355        const propArray = /** @type {Array} */(properties[name]);
3356        let prevEase;
3357        // let durProgress = 0
3358        for (let i = 0, l = propArray.length; i < l; i++) {
3359          const prop = propArray[i];
3360          // Emulate WAPPI easing parameter position
3361          const currentEase = prop.ease;
3362          prop.ease = prevEase ? prevEase : undefined;
3363          prevEase = currentEase;
3364          // durProgress += prop.duration;
3365          // if (i === l - 1 && durProgress !== totalDuration) {
3366          //   propArray.push({ from: prop.to, ease: prop.ease, duration: totalDuration - durProgress })
3367          // }
3368        }
3369        if (!propArray[0].duration) {
3370          propArray.shift();
3371        }
3372      }
3373
3374    }
3375
3376    return properties;
3377  };
3378
3379  class JSAnimation extends Timer {
3380    /**
3381     * @param {TargetsParam} targets
3382     * @param {AnimationParams} parameters
3383     * @param {Timeline} [parent]
3384     * @param {Number} [parentPosition]
3385     * @param {Boolean} [fastSet=false]
3386     * @param {Number} [index=0]
3387     * @param {Number} [length=0]
3388     */
3389    constructor(
3390      targets,
3391      parameters,
3392      parent,
3393      parentPosition,
3394      fastSet = false,
3395      index = 0,
3396      length = 0
3397    ) {
3398
3399      super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
3400
3401      ++JSAnimationId;
3402
3403      const parsedTargets = registerTargets(targets);
3404      const targetsLength = parsedTargets.length;
3405
3406      // If the parameters object contains a "keyframes" property, convert all the keyframes values to regular properties
3407
3408      const kfParams = /** @type {AnimationParams} */(parameters).keyframes;
3409      const params = /** @type {AnimationParams} */(kfParams ? mergeObjects(generateKeyframes(/** @type {DurationKeyframes} */(kfParams), parameters), parameters) : parameters);
3410
3411      const {
3412        id,
3413        delay,
3414        duration,
3415        ease,
3416        playbackEase,
3417        modifier,
3418        composition,
3419        onRender,
3420      } = params;
3421
3422      const animDefaults = parent ? parent.defaults : globals.defaults;
3423      const animEase = setValue(ease, animDefaults.ease);
3424      const animPlaybackEase = setValue(playbackEase, animDefaults.playbackEase);
3425      const parsedAnimPlaybackEase = animPlaybackEase ? parseEase(animPlaybackEase) : null;
3426      const hasSpring = !isUnd(/** @type {Spring} */(animEase).ease);
3427      const tEasing = hasSpring ? /** @type {Spring} */(animEase).ease : setValue(ease, parsedAnimPlaybackEase ? 'linear' : animDefaults.ease);
3428      const tDuration = hasSpring ? /** @type {Spring} */(animEase).settlingDuration : setValue(duration, animDefaults.duration);
3429      const tDelay = setValue(delay, animDefaults.delay);
3430      const tModifier = modifier || animDefaults.modifier;
3431      // If no composition is defined and the targets length is high (>= 1000) set the composition to 'none' (0) for faster tween creation
3432      const tComposition = isUnd(composition) && targetsLength >= K ? compositionTypes.none : !isUnd(composition) ? composition : animDefaults.composition;
3433      // const absoluteOffsetTime = this._offset;
3434      const absoluteOffsetTime = this._offset + (parent ? parent._offset : 0);
3435      // This allows targeting the current animation in the spring onComplete callback
3436      if (hasSpring) /** @type {Spring} */(animEase).parent = this;
3437
3438      let iterationDuration = NaN;
3439      let iterationDelay = NaN;
3440      let animationAnimationLength = 0;
3441      let shouldTriggerRender = 0;
3442
3443      for (let targetIndex = 0; targetIndex < targetsLength; targetIndex++) {
3444
3445        const target = parsedTargets[targetIndex];
3446        const ti = index || targetIndex;
3447        const tl = length || targetsLength;
3448
3449        let lastTransformGroupIndex = NaN;
3450        let lastTransformGroupLength = NaN;
3451
3452        for (let p in params) {
3453
3454          if (isKey(p)) {
3455
3456            const tweenType = getTweenType(target, p);
3457
3458            const propName = sanitizePropertyName(p, target, tweenType);
3459
3460            let propValue = params[p];
3461
3462            const isPropValueArray = isArr(propValue);
3463
3464            if (fastSet && !isPropValueArray) {
3465              fastSetValuesArray[0] = propValue;
3466              fastSetValuesArray[1] = propValue;
3467              propValue = fastSetValuesArray;
3468            }
3469
3470            // TODO: Allow nested keyframes inside ObjectValue value (prop: { to: [.5, 1, .75, 2, 3] })
3471            // Normalize property values to valid keyframe syntax:
3472            // [x, y] to [{to: [x, y]}] or {to: x} to [{to: x}] or keep keys syntax [{}, {}, {}...]
3473            // const keyframes = isArr(propValue) ? propValue.length === 2 && !isObj(propValue[0]) ? [{ to: propValue }] : propValue : [propValue];
3474            if (isPropValueArray) {
3475              const arrayLength = /** @type {Array} */(propValue).length;
3476              const isNotObjectValue = !isObj(propValue[0]);
3477              // Convert [x, y] to [{to: [x, y]}]
3478              if (arrayLength === 2 && isNotObjectValue) {
3479                keyObjectTarget.to = /** @type {TweenParamValue} */(/** @type {unknown} */(propValue));
3480                keyframesTargetArray[0] = keyObjectTarget;
3481                keyframes = keyframesTargetArray;
3482              // Convert [x, y, z] to [[x, y], z]
3483              } else if (arrayLength > 2 && isNotObjectValue) {
3484                keyframes = [];
3485                /** @type {Array.<Number>} */(propValue).forEach((v, i) => {
3486                  if (!i) {
3487                    fastSetValuesArray[0] = v;
3488                  } else if (i === 1) {
3489                    fastSetValuesArray[1] = v;
3490                    keyframes.push(fastSetValuesArray);
3491                  } else {
3492                    keyframes.push(v);
3493                  }
3494                });
3495              } else {
3496                keyframes = /** @type {Array.<TweenKeyValue>} */(propValue);
3497              }
3498            } else {
3499              keyframesTargetArray[0] = propValue;
3500              keyframes = keyframesTargetArray;
3501            }
3502
3503            let siblings = null;
3504            let prevTween = null;
3505            let firstTweenChangeStartTime = NaN;
3506            let lastTweenChangeEndTime = 0;
3507            let tweenIndex = 0;
3508
3509            for (let l = keyframes.length; tweenIndex < l; tweenIndex++) {
3510