@materializecss/materialize 2.0.3-beta → 2.0.3

package/dist/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
- * Materialize v2.0.3-beta (https://materializecss.github.io/materialize)
+ * Materialize v2.0.3 (https://materializecss.github.io/materialize)
  * Copyright 2014-2023 Materialize
  * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
  */
@@ -17,1330 +17,6 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	"use strict";
 /******/ 	var __webpack_modules__ = ({
 
-/***/ "./node_modules/animejs/lib/anime.es.js":
-/*!**********************************************!*\
-  !*** ./node_modules/animejs/lib/anime.es.js ***!
-  \**********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/*
- * anime.js v3.2.1
- * (c) 2020 Julian Garnier
- * Released under the MIT license
- * animejs.com
- */
-
-// Defaults
-
-var defaultInstanceSettings = {
-  update: null,
-  begin: null,
-  loopBegin: null,
-  changeBegin: null,
-  change: null,
-  changeComplete: null,
-  loopComplete: null,
-  complete: null,
-  loop: 1,
-  direction: 'normal',
-  autoplay: true,
-  timelineOffset: 0
-};
-
-var defaultTweenSettings = {
-  duration: 1000,
-  delay: 0,
-  endDelay: 0,
-  easing: 'easeOutElastic(1, .5)',
-  round: 0
-};
-
-var validTransforms = ['translateX', 'translateY', 'translateZ', 'rotate', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'perspective', 'matrix', 'matrix3d'];
-
-// Caching
-
-var cache = {
-  CSS: {},
-  springs: {}
-};
-
-// Utils
-
-function minMax(val, min, max) {
-  return Math.min(Math.max(val, min), max);
-}
-
-function stringContains(str, text) {
-  return str.indexOf(text) > -1;
-}
-
-function applyArguments(func, args) {
-  return func.apply(null, args);
-}
-
-var is = {
-  arr: function (a) { return Array.isArray(a); },
-  obj: function (a) { return stringContains(Object.prototype.toString.call(a), 'Object'); },
-  pth: function (a) { return is.obj(a) && a.hasOwnProperty('totalLength'); },
-  svg: function (a) { return a instanceof SVGElement; },
-  inp: function (a) { return a instanceof HTMLInputElement; },
-  dom: function (a) { return a.nodeType || is.svg(a); },
-  str: function (a) { return typeof a === 'string'; },
-  fnc: function (a) { return typeof a === 'function'; },
-  und: function (a) { return typeof a === 'undefined'; },
-  nil: function (a) { return is.und(a) || a === null; },
-  hex: function (a) { return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a); },
-  rgb: function (a) { return /^rgb/.test(a); },
-  hsl: function (a) { return /^hsl/.test(a); },
-  col: function (a) { return (is.hex(a) || is.rgb(a) || is.hsl(a)); },
-  key: function (a) { return !defaultInstanceSettings.hasOwnProperty(a) && !defaultTweenSettings.hasOwnProperty(a) && a !== 'targets' && a !== 'keyframes'; },
-};
-
-// Easings
-
-function parseEasingParameters(string) {
-  var match = /\(([^)]+)\)/.exec(string);
-  return match ? match[1].split(',').map(function (p) { return parseFloat(p); }) : [];
-}
-
-// Spring solver inspired by Webkit Copyright © 2016 Apple Inc. All rights reserved. https://webkit.org/demos/spring/spring.js
-
-function spring(string, duration) {
-
-  var params = parseEasingParameters(string);
-  var mass = minMax(is.und(params[0]) ? 1 : params[0], .1, 100);
-  var stiffness = minMax(is.und(params[1]) ? 100 : params[1], .1, 100);
-  var damping = minMax(is.und(params[2]) ? 10 : params[2], .1, 100);
-  var velocity =  minMax(is.und(params[3]) ? 0 : params[3], .1, 100);
-  var w0 = Math.sqrt(stiffness / mass);
-  var zeta = damping / (2 * Math.sqrt(stiffness * mass));
-  var wd = zeta < 1 ? w0 * Math.sqrt(1 - zeta * zeta) : 0;
-  var a = 1;
-  var b = zeta < 1 ? (zeta * w0 + -velocity) / wd : -velocity + w0;
-
-  function solver(t) {
-    var progress = duration ? (duration * t) / 1000 : t;
-    if (zeta < 1) {
-      progress = Math.exp(-progress * zeta * w0) * (a * Math.cos(wd * progress) + b * Math.sin(wd * progress));
-    } else {
-      progress = (a + b * progress) * Math.exp(-progress * w0);
-    }
-    if (t === 0 || t === 1) { return t; }
-    return 1 - progress;
-  }
-
-  function getDuration() {
-    var cached = cache.springs[string];
-    if (cached) { return cached; }
-    var frame = 1/6;
-    var elapsed = 0;
-    var rest = 0;
-    while(true) {
-      elapsed += frame;
-      if (solver(elapsed) === 1) {
-        rest++;
-        if (rest >= 16) { break; }
-      } else {
-        rest = 0;
-      }
-    }
-    var duration = elapsed * frame * 1000;
-    cache.springs[string] = duration;
-    return duration;
-  }
-
-  return duration ? solver : getDuration;
-
-}
-
-// Basic steps easing implementation https://developer.mozilla.org/fr/docs/Web/CSS/transition-timing-function
-
-function steps(steps) {
-  if ( steps === void 0 ) steps = 10;
-
-  return function (t) { return Math.ceil((minMax(t, 0.000001, 1)) * steps) * (1 / steps); };
-}
-
-// BezierEasing https://github.com/gre/bezier-easing
-
-var bezier = (function () {
-
-  var kSplineTableSize = 11;
-  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
-
-  function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 }
-  function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 }
-  function C(aA1)      { return 3.0 * aA1 }
-
-  function calcBezier(aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT }
-  function getSlope(aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1) }
-
-  function binarySubdivide(aX, aA, aB, mX1, mX2) {
-    var currentX, currentT, i = 0;
-    do {
-      currentT = aA + (aB - aA) / 2.0;
-      currentX = calcBezier(currentT, mX1, mX2) - aX;
-      if (currentX > 0.0) { aB = currentT; } else { aA = currentT; }
-    } while (Math.abs(currentX) > 0.0000001 && ++i < 10);
-    return currentT;
-  }
-
-  function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
-    for (var i = 0; i < 4; ++i) {
-      var currentSlope = getSlope(aGuessT, mX1, mX2);
-      if (currentSlope === 0.0) { return aGuessT; }
-      var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
-      aGuessT -= currentX / currentSlope;
-    }
-    return aGuessT;
-  }
-
-  function bezier(mX1, mY1, mX2, mY2) {
-
-    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) { return; }
-    var sampleValues = new Float32Array(kSplineTableSize);
-
-    if (mX1 !== mY1 || mX2 !== mY2) {
-      for (var i = 0; i < kSplineTableSize; ++i) {
-        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
-      }
-    }
-
-    function getTForX(aX) {
-
-      var intervalStart = 0;
-      var currentSample = 1;
-      var lastSample = kSplineTableSize - 1;
-
-      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
-        intervalStart += kSampleStepSize;
-      }
-
-      --currentSample;
-
-      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
-      var guessForT = intervalStart + dist * kSampleStepSize;
-      var initialSlope = getSlope(guessForT, mX1, mX2);
-
-      if (initialSlope >= 0.001) {
-        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
-      } else if (initialSlope === 0.0) {
-        return guessForT;
-      } else {
-        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
-      }
-
-    }
-
-    return function (x) {
-      if (mX1 === mY1 && mX2 === mY2) { return x; }
-      if (x === 0 || x === 1) { return x; }
-      return calcBezier(getTForX(x), mY1, mY2);
-    }
-
-  }
-
-  return bezier;
-
-})();
-
-var penner = (function () {
-
-  // Based on jQuery UI's implemenation of easing equations from Robert Penner (http://www.robertpenner.com/easing)
-
-  var eases = { linear: function () { return function (t) { return t; }; } };
-
-  var functionEasings = {
-    Sine: function () { return function (t) { return 1 - Math.cos(t * Math.PI / 2); }; },
-    Circ: function () { return function (t) { return 1 - Math.sqrt(1 - t * t); }; },
-    Back: function () { return function (t) { return t * t * (3 * t - 2); }; },
-    Bounce: function () { return function (t) {
-      var pow2, b = 4;
-      while (t < (( pow2 = Math.pow(2, --b)) - 1) / 11) {}
-      return 1 / Math.pow(4, 3 - b) - 7.5625 * Math.pow(( pow2 * 3 - 2 ) / 22 - t, 2)
-    }; },
-    Elastic: function (amplitude, period) {
-      if ( amplitude === void 0 ) amplitude = 1;
-      if ( period === void 0 ) period = .5;
-
-      var a = minMax(amplitude, 1, 10);
-      var p = minMax(period, .1, 2);
-      return function (t) {
-        return (t === 0 || t === 1) ? t : 
-          -a * Math.pow(2, 10 * (t - 1)) * Math.sin((((t - 1) - (p / (Math.PI * 2) * Math.asin(1 / a))) * (Math.PI * 2)) / p);
-      }
-    }
-  };
-
-  var baseEasings = ['Quad', 'Cubic', 'Quart', 'Quint', 'Expo'];
-
-  baseEasings.forEach(function (name, i) {
-    functionEasings[name] = function () { return function (t) { return Math.pow(t, i + 2); }; };
-  });
-
-  Object.keys(functionEasings).forEach(function (name) {
-    var easeIn = functionEasings[name];
-    eases['easeIn' + name] = easeIn;
-    eases['easeOut' + name] = function (a, b) { return function (t) { return 1 - easeIn(a, b)(1 - t); }; };
-    eases['easeInOut' + name] = function (a, b) { return function (t) { return t < 0.5 ? easeIn(a, b)(t * 2) / 2 : 
-      1 - easeIn(a, b)(t * -2 + 2) / 2; }; };
-    eases['easeOutIn' + name] = function (a, b) { return function (t) { return t < 0.5 ? (1 - easeIn(a, b)(1 - t * 2)) / 2 : 
-      (easeIn(a, b)(t * 2 - 1) + 1) / 2; }; };
-  });
-
-  return eases;
-
-})();
-
-function parseEasings(easing, duration) {
-  if (is.fnc(easing)) { return easing; }
-  var name = easing.split('(')[0];
-  var ease = penner[name];
-  var args = parseEasingParameters(easing);
-  switch (name) {
-    case 'spring' : return spring(easing, duration);
-    case 'cubicBezier' : return applyArguments(bezier, args);
-    case 'steps' : return applyArguments(steps, args);
-    default : return applyArguments(ease, args);
-  }
-}
-
-// Strings
-
-function selectString(str) {
-  try {
-    var nodes = document.querySelectorAll(str);
-    return nodes;
-  } catch(e) {
-    return;
-  }
-}
-
-// Arrays
-
-function filterArray(arr, callback) {
-  var len = arr.length;
-  var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
-  var result = [];
-  for (var i = 0; i < len; i++) {
-    if (i in arr) {
-      var val = arr[i];
-      if (callback.call(thisArg, val, i, arr)) {
-        result.push(val);
-      }
-    }
-  }
-  return result;
-}
-
-function flattenArray(arr) {
-  return arr.reduce(function (a, b) { return a.concat(is.arr(b) ? flattenArray(b) : b); }, []);
-}
-
-function toArray(o) {
-  if (is.arr(o)) { return o; }
-  if (is.str(o)) { o = selectString(o) || o; }
-  if (o instanceof NodeList || o instanceof HTMLCollection) { return [].slice.call(o); }
-  return [o];
-}
-
-function arrayContains(arr, val) {
-  return arr.some(function (a) { return a === val; });
-}
-
-// Objects
-
-function cloneObject(o) {
-  var clone = {};
-  for (var p in o) { clone[p] = o[p]; }
-  return clone;
-}
-
-function replaceObjectProps(o1, o2) {
-  var o = cloneObject(o1);
-  for (var p in o1) { o[p] = o2.hasOwnProperty(p) ? o2[p] : o1[p]; }
-  return o;
-}
-
-function mergeObjects(o1, o2) {
-  var o = cloneObject(o1);
-  for (var p in o2) { o[p] = is.und(o1[p]) ? o2[p] : o1[p]; }
-  return o;
-}
-
-// Colors
-
-function rgbToRgba(rgbValue) {
-  var rgb = /rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(rgbValue);
-  return rgb ? ("rgba(" + (rgb[1]) + ",1)") : rgbValue;
-}
-
-function hexToRgba(hexValue) {
-  var rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  var hex = hexValue.replace(rgx, function (m, r, g, b) { return r + r + g + g + b + b; } );
-  var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  var r = parseInt(rgb[1], 16);
-  var g = parseInt(rgb[2], 16);
-  var b = parseInt(rgb[3], 16);
-  return ("rgba(" + r + "," + g + "," + b + ",1)");
-}
-
-function hslToRgba(hslValue) {
-  var hsl = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(hslValue) || /hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(hslValue);
-  var h = parseInt(hsl[1], 10) / 360;
-  var s = parseInt(hsl[2], 10) / 100;
-  var l = parseInt(hsl[3], 10) / 100;
-  var a = hsl[4] || 1;
-  function hue2rgb(p, q, t) {
-    if (t < 0) { t += 1; }
-    if (t > 1) { t -= 1; }
-    if (t < 1/6) { return p + (q - p) * 6 * t; }
-    if (t < 1/2) { return q; }
-    if (t < 2/3) { return p + (q - p) * (2/3 - t) * 6; }
-    return p;
-  }
-  var r, g, b;
-  if (s == 0) {
-    r = g = b = l;
-  } else {
-    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    var p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1/3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1/3);
-  }
-  return ("rgba(" + (r * 255) + "," + (g * 255) + "," + (b * 255) + "," + a + ")");
-}
-
-function colorToRgb(val) {
-  if (is.rgb(val)) { return rgbToRgba(val); }
-  if (is.hex(val)) { return hexToRgba(val); }
-  if (is.hsl(val)) { return hslToRgba(val); }
-}
-
-// Units
-
-function getUnit(val) {
-  var split = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(val);
-  if (split) { return split[1]; }
-}
-
-function getTransformUnit(propName) {
-  if (stringContains(propName, 'translate') || propName === 'perspective') { return 'px'; }
-  if (stringContains(propName, 'rotate') || stringContains(propName, 'skew')) { return 'deg'; }
-}
-
-// Values
-
-function getFunctionValue(val, animatable) {
-  if (!is.fnc(val)) { return val; }
-  return val(animatable.target, animatable.id, animatable.total);
-}
-
-function getAttribute(el, prop) {
-  return el.getAttribute(prop);
-}
-
-function convertPxToUnit(el, value, unit) {
-  var valueUnit = getUnit(value);
-  if (arrayContains([unit, 'deg', 'rad', 'turn'], valueUnit)) { return value; }
-  var cached = cache.CSS[value + unit];
-  if (!is.und(cached)) { return cached; }
-  var baseline = 100;
-  var tempEl = document.createElement(el.tagName);
-  var parentEl = (el.parentNode && (el.parentNode !== document)) ? el.parentNode : document.body;
-  parentEl.appendChild(tempEl);
-  tempEl.style.position = 'absolute';
-  tempEl.style.width = baseline + unit;
-  var factor = baseline / tempEl.offsetWidth;
-  parentEl.removeChild(tempEl);
-  var convertedUnit = factor * parseFloat(value);
-  cache.CSS[value + unit] = convertedUnit;
-  return convertedUnit;
-}
-
-function getCSSValue(el, prop, unit) {
-  if (prop in el.style) {
-    var uppercasePropName = prop.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-    var value = el.style[prop] || getComputedStyle(el).getPropertyValue(uppercasePropName) || '0';
-    return unit ? convertPxToUnit(el, value, unit) : value;
-  }
-}
-
-function getAnimationType(el, prop) {
-  if (is.dom(el) && !is.inp(el) && (!is.nil(getAttribute(el, prop)) || (is.svg(el) && el[prop]))) { return 'attribute'; }
-  if (is.dom(el) && arrayContains(validTransforms, prop)) { return 'transform'; }
-  if (is.dom(el) && (prop !== 'transform' && getCSSValue(el, prop))) { return 'css'; }
-  if (el[prop] != null) { return 'object'; }
-}
-
-function getElementTransforms(el) {
-  if (!is.dom(el)) { return; }
-  var str = el.style.transform || '';
-  var reg  = /(\w+)\(([^)]*)\)/g;
-  var transforms = new Map();
-  var m; while (m = reg.exec(str)) { transforms.set(m[1], m[2]); }
-  return transforms;
-}
-
-function getTransformValue(el, propName, animatable, unit) {
-  var defaultVal = stringContains(propName, 'scale') ? 1 : 0 + getTransformUnit(propName);
-  var value = getElementTransforms(el).get(propName) || defaultVal;
-  if (animatable) {
-    animatable.transforms.list.set(propName, value);
-    animatable.transforms['last'] = propName;
-  }
-  return unit ? convertPxToUnit(el, value, unit) : value;
-}
-
-function getOriginalTargetValue(target, propName, unit, animatable) {
-  switch (getAnimationType(target, propName)) {
-    case 'transform': return getTransformValue(target, propName, animatable, unit);
-    case 'css': return getCSSValue(target, propName, unit);
-    case 'attribute': return getAttribute(target, propName);
-    default: return target[propName] || 0;
-  }
-}
-
-function getRelativeValue(to, from) {
-  var operator = /^(\*=|\+=|-=)/.exec(to);
-  if (!operator) { return to; }
-  var u = getUnit(to) || 0;
-  var x = parseFloat(from);
-  var y = parseFloat(to.replace(operator[0], ''));
-  switch (operator[0][0]) {
-    case '+': return x + y + u;
-    case '-': return x - y + u;
-    case '*': return x * y + u;
-  }
-}
-
-function validateValue(val, unit) {
-  if (is.col(val)) { return colorToRgb(val); }
-  if (/\s/g.test(val)) { return val; }
-  var originalUnit = getUnit(val);
-  var unitLess = originalUnit ? val.substr(0, val.length - originalUnit.length) : val;
-  if (unit) { return unitLess + unit; }
-  return unitLess;
-}
-
-// getTotalLength() equivalent for circle, rect, polyline, polygon and line shapes
-// adapted from https://gist.github.com/SebLambla/3e0550c496c236709744
-
-function getDistance(p1, p2) {
-  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
-}
-
-function getCircleLength(el) {
-  return Math.PI * 2 * getAttribute(el, 'r');
-}
-
-function getRectLength(el) {
-  return (getAttribute(el, 'width') * 2) + (getAttribute(el, 'height') * 2);
-}
-
-function getLineLength(el) {
-  return getDistance(
-    {x: getAttribute(el, 'x1'), y: getAttribute(el, 'y1')}, 
-    {x: getAttribute(el, 'x2'), y: getAttribute(el, 'y2')}
-  );
-}
-
-function getPolylineLength(el) {
-  var points = el.points;
-  var totalLength = 0;
-  var previousPos;
-  for (var i = 0 ; i < points.numberOfItems; i++) {
-    var currentPos = points.getItem(i);
-    if (i > 0) { totalLength += getDistance(previousPos, currentPos); }
-    previousPos = currentPos;
-  }
-  return totalLength;
-}
-
-function getPolygonLength(el) {
-  var points = el.points;
-  return getPolylineLength(el) + getDistance(points.getItem(points.numberOfItems - 1), points.getItem(0));
-}
-
-// Path animation
-
-function getTotalLength(el) {
-  if (el.getTotalLength) { return el.getTotalLength(); }
-  switch(el.tagName.toLowerCase()) {
-    case 'circle': return getCircleLength(el);
-    case 'rect': return getRectLength(el);
-    case 'line': return getLineLength(el);
-    case 'polyline': return getPolylineLength(el);
-    case 'polygon': return getPolygonLength(el);
-  }
-}
-
-function setDashoffset(el) {
-  var pathLength = getTotalLength(el);
-  el.setAttribute('stroke-dasharray', pathLength);
-  return pathLength;
-}
-
-// Motion path
-
-function getParentSvgEl(el) {
-  var parentEl = el.parentNode;
-  while (is.svg(parentEl)) {
-    if (!is.svg(parentEl.parentNode)) { break; }
-    parentEl = parentEl.parentNode;
-  }
-  return parentEl;
-}
-
-function getParentSvg(pathEl, svgData) {
-  var svg = svgData || {};
-  var parentSvgEl = svg.el || getParentSvgEl(pathEl);
-  var rect = parentSvgEl.getBoundingClientRect();
-  var viewBoxAttr = getAttribute(parentSvgEl, 'viewBox');
-  var width = rect.width;
-  var height = rect.height;
-  var viewBox = svg.viewBox || (viewBoxAttr ? viewBoxAttr.split(' ') : [0, 0, width, height]);
-  return {
-    el: parentSvgEl,
-    viewBox: viewBox,
-    x: viewBox[0] / 1,
-    y: viewBox[1] / 1,
-    w: width,
-    h: height,
-    vW: viewBox[2],
-    vH: viewBox[3]
-  }
-}
-
-function getPath(path, percent) {
-  var pathEl = is.str(path) ? selectString(path)[0] : path;
-  var p = percent || 100;
-  return function(property) {
-    return {
-      property: property,
-      el: pathEl,
-      svg: getParentSvg(pathEl),
-      totalLength: getTotalLength(pathEl) * (p / 100)
-    }
-  }
-}
-
-function getPathProgress(path, progress, isPathTargetInsideSVG) {
-  function point(offset) {
-    if ( offset === void 0 ) offset = 0;
-
-    var l = progress + offset >= 1 ? progress + offset : 0;
-    return path.el.getPointAtLength(l);
-  }
-  var svg = getParentSvg(path.el, path.svg);
-  var p = point();
-  var p0 = point(-1);
-  var p1 = point(+1);
-  var scaleX = isPathTargetInsideSVG ? 1 : svg.w / svg.vW;
-  var scaleY = isPathTargetInsideSVG ? 1 : svg.h / svg.vH;
-  switch (path.property) {
-    case 'x': return (p.x - svg.x) * scaleX;
-    case 'y': return (p.y - svg.y) * scaleY;
-    case 'angle': return Math.atan2(p1.y - p0.y, p1.x - p0.x) * 180 / Math.PI;
-  }
-}
-
-// Decompose value
-
-function decomposeValue(val, unit) {
-  // const rgx = /-?\d*\.?\d+/g; // handles basic numbers
-  // const rgx = /[+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
-  var rgx = /[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g; // handles exponents notation
-  var value = validateValue((is.pth(val) ? val.totalLength : val), unit) + '';
-  return {
-    original: value,
-    numbers: value.match(rgx) ? value.match(rgx).map(Number) : [0],
-    strings: (is.str(val) || unit) ? value.split(rgx) : []
-  }
-}
-
-// Animatables
-
-function parseTargets(targets) {
-  var targetsArray = targets ? (flattenArray(is.arr(targets) ? targets.map(toArray) : toArray(targets))) : [];
-  return filterArray(targetsArray, function (item, pos, self) { return self.indexOf(item) === pos; });
-}
-
-function getAnimatables(targets) {
-  var parsed = parseTargets(targets);
-  return parsed.map(function (t, i) {
-    return {target: t, id: i, total: parsed.length, transforms: { list: getElementTransforms(t) } };
-  });
-}
-
-// Properties
-
-function normalizePropertyTweens(prop, tweenSettings) {
-  var settings = cloneObject(tweenSettings);
-  // Override duration if easing is a spring
-  if (/^spring/.test(settings.easing)) { settings.duration = spring(settings.easing); }
-  if (is.arr(prop)) {
-    var l = prop.length;
-    var isFromTo = (l === 2 && !is.obj(prop[0]));
-    if (!isFromTo) {
-      // Duration divided by the number of tweens
-      if (!is.fnc(tweenSettings.duration)) { settings.duration = tweenSettings.duration / l; }
-    } else {
-      // Transform [from, to] values shorthand to a valid tween value
-      prop = {value: prop};
-    }
-  }
-  var propArray = is.arr(prop) ? prop : [prop];
-  return propArray.map(function (v, i) {
-    var obj = (is.obj(v) && !is.pth(v)) ? v : {value: v};
-    // Default delay value should only be applied to the first tween
-    if (is.und(obj.delay)) { obj.delay = !i ? tweenSettings.delay : 0; }
-    // Default endDelay value should only be applied to the last tween
-    if (is.und(obj.endDelay)) { obj.endDelay = i === propArray.length - 1 ? tweenSettings.endDelay : 0; }
-    return obj;
-  }).map(function (k) { return mergeObjects(k, settings); });
-}
-
-
-function flattenKeyframes(keyframes) {
-  var propertyNames = filterArray(flattenArray(keyframes.map(function (key) { return Object.keys(key); })), function (p) { return is.key(p); })
-  .reduce(function (a,b) { if (a.indexOf(b) < 0) { a.push(b); } return a; }, []);
-  var properties = {};
-  var loop = function ( i ) {
-    var propName = propertyNames[i];
-    properties[propName] = keyframes.map(function (key) {
-      var newKey = {};
-      for (var p in key) {
-        if (is.key(p)) {
-          if (p == propName) { newKey.value = key[p]; }
-        } else {
-          newKey[p] = key[p];
-        }
-      }
-      return newKey;
-    });
-  };
-
-  for (var i = 0; i < propertyNames.length; i++) loop( i );
-  return properties;
-}
-
-function getProperties(tweenSettings, params) {
-  var properties = [];
-  var keyframes = params.keyframes;
-  if (keyframes) { params = mergeObjects(flattenKeyframes(keyframes), params); }
-  for (var p in params) {
-    if (is.key(p)) {
-      properties.push({
-        name: p,
-        tweens: normalizePropertyTweens(params[p], tweenSettings)
-      });
-    }
-  }
-  return properties;
-}
-
-// Tweens
-
-function normalizeTweenValues(tween, animatable) {
-  var t = {};
-  for (var p in tween) {
-    var value = getFunctionValue(tween[p], animatable);
-    if (is.arr(value)) {
-      value = value.map(function (v) { return getFunctionValue(v, animatable); });
-      if (value.length === 1) { value = value[0]; }
-    }
-    t[p] = value;
-  }
-  t.duration = parseFloat(t.duration);
-  t.delay = parseFloat(t.delay);
-  return t;
-}
-
-function normalizeTweens(prop, animatable) {
-  var previousTween;
-  return prop.tweens.map(function (t) {
-    var tween = normalizeTweenValues(t, animatable);
-    var tweenValue = tween.value;
-    var to = is.arr(tweenValue) ? tweenValue[1] : tweenValue;
-    var toUnit = getUnit(to);
-    var originalValue = getOriginalTargetValue(animatable.target, prop.name, toUnit, animatable);
-    var previousValue = previousTween ? previousTween.to.original : originalValue;
-    var from = is.arr(tweenValue) ? tweenValue[0] : previousValue;
-    var fromUnit = getUnit(from) || getUnit(originalValue);
-    var unit = toUnit || fromUnit;
-    if (is.und(to)) { to = previousValue; }
-    tween.from = decomposeValue(from, unit);
-    tween.to = decomposeValue(getRelativeValue(to, from), unit);
-    tween.start = previousTween ? previousTween.end : 0;
-    tween.end = tween.start + tween.delay + tween.duration + tween.endDelay;
-    tween.easing = parseEasings(tween.easing, tween.duration);
-    tween.isPath = is.pth(tweenValue);
-    tween.isPathTargetInsideSVG = tween.isPath && is.svg(animatable.target);
-    tween.isColor = is.col(tween.from.original);
-    if (tween.isColor) { tween.round = 1; }
-    previousTween = tween;
-    return tween;
-  });
-}
-
-// Tween progress
-
-var setProgressValue = {
-  css: function (t, p, v) { return t.style[p] = v; },
-  attribute: function (t, p, v) { return t.setAttribute(p, v); },
-  object: function (t, p, v) { return t[p] = v; },
-  transform: function (t, p, v, transforms, manual) {
-    transforms.list.set(p, v);
-    if (p === transforms.last || manual) {
-      var str = '';
-      transforms.list.forEach(function (value, prop) { str += prop + "(" + value + ") "; });
-      t.style.transform = str;
-    }
-  }
-};
-
-// Set Value helper
-
-function setTargetsValue(targets, properties) {
-  var animatables = getAnimatables(targets);
-  animatables.forEach(function (animatable) {
-    for (var property in properties) {
-      var value = getFunctionValue(properties[property], animatable);
-      var target = animatable.target;
-      var valueUnit = getUnit(value);
-      var originalValue = getOriginalTargetValue(target, property, valueUnit, animatable);
-      var unit = valueUnit || getUnit(originalValue);
-      var to = getRelativeValue(validateValue(value, unit), originalValue);
-      var animType = getAnimationType(target, property);
-      setProgressValue[animType](target, property, to, animatable.transforms, true);
-    }
-  });
-}
-
-// Animations
-
-function createAnimation(animatable, prop) {
-  var animType = getAnimationType(animatable.target, prop.name);
-  if (animType) {
-    var tweens = normalizeTweens(prop, animatable);
-    var lastTween = tweens[tweens.length - 1];
-    return {
-      type: animType,
-      property: prop.name,
-      animatable: animatable,
-      tweens: tweens,
-      duration: lastTween.end,
-      delay: tweens[0].delay,
-      endDelay: lastTween.endDelay
-    }
-  }
-}
-
-function getAnimations(animatables, properties) {
-  return filterArray(flattenArray(animatables.map(function (animatable) {
-    return properties.map(function (prop) {
-      return createAnimation(animatable, prop);
-    });
-  })), function (a) { return !is.und(a); });
-}
-
-// Create Instance
-
-function getInstanceTimings(animations, tweenSettings) {
-  var animLength = animations.length;
-  var getTlOffset = function (anim) { return anim.timelineOffset ? anim.timelineOffset : 0; };
-  var timings = {};
-  timings.duration = animLength ? Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration; })) : tweenSettings.duration;
-  timings.delay = animLength ? Math.min.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.delay; })) : tweenSettings.delay;
-  timings.endDelay = animLength ? timings.duration - Math.max.apply(Math, animations.map(function (anim) { return getTlOffset(anim) + anim.duration - anim.endDelay; })) : tweenSettings.endDelay;
-  return timings;
-}
-
-var instanceID = 0;
-
-function createNewInstance(params) {
-  var instanceSettings = replaceObjectProps(defaultInstanceSettings, params);
-  var tweenSettings = replaceObjectProps(defaultTweenSettings, params);
-  var properties = getProperties(tweenSettings, params);
-  var animatables = getAnimatables(params.targets);
-  var animations = getAnimations(animatables, properties);
-  var timings = getInstanceTimings(animations, tweenSettings);
-  var id = instanceID;
-  instanceID++;
-  return mergeObjects(instanceSettings, {
-    id: id,
-    children: [],
-    animatables: animatables,
-    animations: animations,
-    duration: timings.duration,
-    delay: timings.delay,
-    endDelay: timings.endDelay
-  });
-}
-
-// Core
-
-var activeInstances = [];
-
-var engine = (function () {
-  var raf;
-
-  function play() {
-    if (!raf && (!isDocumentHidden() || !anime.suspendWhenDocumentHidden) && activeInstances.length > 0) {
-      raf = requestAnimationFrame(step);
-    }
-  }
-  function step(t) {
-    // memo on algorithm issue:
-    // dangerous iteration over mutable `activeInstances`
-    // (that collection may be updated from within callbacks of `tick`-ed animation instances)
-    var activeInstancesLength = activeInstances.length;
-    var i = 0;
-    while (i < activeInstancesLength) {
-      var activeInstance = activeInstances[i];
-      if (!activeInstance.paused) {
-        activeInstance.tick(t);
-        i++;
-      } else {
-        activeInstances.splice(i, 1);
-        activeInstancesLength--;
-      }
-    }
-    raf = i > 0 ? requestAnimationFrame(step) : undefined;
-  }
-
-  function handleVisibilityChange() {
-    if (!anime.suspendWhenDocumentHidden) { return; }
-
-    if (isDocumentHidden()) {
-      // suspend ticks
-      raf = cancelAnimationFrame(raf);
-    } else { // is back to active tab
-      // first adjust animations to consider the time that ticks were suspended
-      activeInstances.forEach(
-        function (instance) { return instance ._onDocumentVisibility(); }
-      );
-      engine();
-    }
-  }
-  if (typeof document !== 'undefined') {
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-  }
-
-  return play;
-})();
-
-function isDocumentHidden() {
-  return !!document && document.hidden;
-}
-
-// Public Instance
-
-function anime(params) {
-  if ( params === void 0 ) params = {};
-
-
-  var startTime = 0, lastTime = 0, now = 0;
-  var children, childrenLength = 0;
-  var resolve = null;
-
-  function makePromise(instance) {
-    var promise = window.Promise && new Promise(function (_resolve) { return resolve = _resolve; });
-    instance.finished = promise;
-    return promise;
-  }
-
-  var instance = createNewInstance(params);
-  var promise = makePromise(instance);
-
-  function toggleInstanceDirection() {
-    var direction = instance.direction;
-    if (direction !== 'alternate') {
-      instance.direction = direction !== 'normal' ? 'normal' : 'reverse';
-    }
-    instance.reversed = !instance.reversed;
-    children.forEach(function (child) { return child.reversed = instance.reversed; });
-  }
-
-  function adjustTime(time) {
-    return instance.reversed ? instance.duration - time : time;
-  }
-
-  function resetTime() {
-    startTime = 0;
-    lastTime = adjustTime(instance.currentTime) * (1 / anime.speed);
-  }
-
-  function seekChild(time, child) {
-    if (child) { child.seek(time - child.timelineOffset); }
-  }
-
-  function syncInstanceChildren(time) {
-    if (!instance.reversePlayback) {
-      for (var i = 0; i < childrenLength; i++) { seekChild(time, children[i]); }
-    } else {
-      for (var i$1 = childrenLength; i$1--;) { seekChild(time, children[i$1]); }
-    }
-  }
-
-  function setAnimationsProgress(insTime) {
-    var i = 0;
-    var animations = instance.animations;
-    var animationsLength = animations.length;
-    while (i < animationsLength) {
-      var anim = animations[i];
-      var animatable = anim.animatable;
-      var tweens = anim.tweens;
-      var tweenLength = tweens.length - 1;
-      var tween = tweens[tweenLength];
-      // Only check for keyframes if there is more than one tween
-      if (tweenLength) { tween = filterArray(tweens, function (t) { return (insTime < t.end); })[0] || tween; }
-      var elapsed = minMax(insTime - tween.start - tween.delay, 0, tween.duration) / tween.duration;
-      var eased = isNaN(elapsed) ? 1 : tween.easing(elapsed);
-      var strings = tween.to.strings;
-      var round = tween.round;
-      var numbers = [];
-      var toNumbersLength = tween.to.numbers.length;
-      var progress = (void 0);
-      for (var n = 0; n < toNumbersLength; n++) {
-        var value = (void 0);
-        var toNumber = tween.to.numbers[n];
-        var fromNumber = tween.from.numbers[n] || 0;
-        if (!tween.isPath) {
-          value = fromNumber + (eased * (toNumber - fromNumber));
-        } else {
-          value = getPathProgress(tween.value, eased * toNumber, tween.isPathTargetInsideSVG);
-        }
-        if (round) {
-          if (!(tween.isColor && n > 2)) {
-            value = Math.round(value * round) / round;
-          }
-        }
-        numbers.push(value);
-      }
-      // Manual Array.reduce for better performances
-      var stringsLength = strings.length;
-      if (!stringsLength) {
-        progress = numbers[0];
-      } else {
-        progress = strings[0];
-        for (var s = 0; s < stringsLength; s++) {
-          var a = strings[s];
-          var b = strings[s + 1];
-          var n$1 = numbers[s];
-          if (!isNaN(n$1)) {
-            if (!b) {
-              progress += n$1 + ' ';
-            } else {
-              progress += n$1 + b;
-            }
-          }
-        }
-      }
-      setProgressValue[anim.type](animatable.target, anim.property, progress, animatable.transforms);
-      anim.currentValue = progress;
-      i++;
-    }
-  }
-
-  function setCallback(cb) {
-    if (instance[cb] && !instance.passThrough) { instance[cb](instance); }
-  }
-
-  function countIteration() {
-    if (instance.remaining && instance.remaining !== true) {
-      instance.remaining--;
-    }
-  }
-
-  function setInstanceProgress(engineTime) {
-    var insDuration = instance.duration;
-    var insDelay = instance.delay;
-    var insEndDelay = insDuration - instance.endDelay;
-    var insTime = adjustTime(engineTime);
-    instance.progress = minMax((insTime / insDuration) * 100, 0, 100);
-    instance.reversePlayback = insTime < instance.currentTime;
-    if (children) { syncInstanceChildren(insTime); }
-    if (!instance.began && instance.currentTime > 0) {
-      instance.began = true;
-      setCallback('begin');
-    }
-    if (!instance.loopBegan && instance.currentTime > 0) {
-      instance.loopBegan = true;
-      setCallback('loopBegin');
-    }
-    if (insTime <= insDelay && instance.currentTime !== 0) {
-      setAnimationsProgress(0);
-    }
-    if ((insTime >= insEndDelay && instance.currentTime !== insDuration) || !insDuration) {
-      setAnimationsProgress(insDuration);
-    }
-    if (insTime > insDelay && insTime < insEndDelay) {
-      if (!instance.changeBegan) {
-        instance.changeBegan = true;
-        instance.changeCompleted = false;
-        setCallback('changeBegin');
-      }
-      setCallback('change');
-      setAnimationsProgress(insTime);
-    } else {
-      if (instance.changeBegan) {
-        instance.changeCompleted = true;
-        instance.changeBegan = false;
-        setCallback('changeComplete');
-      }
-    }
-    instance.currentTime = minMax(insTime, 0, insDuration);
-    if (instance.began) { setCallback('update'); }
-    if (engineTime >= insDuration) {
-      lastTime = 0;
-      countIteration();
-      if (!instance.remaining) {
-        instance.paused = true;
-        if (!instance.completed) {
-          instance.completed = true;
-          setCallback('loopComplete');
-          setCallback('complete');
-          if (!instance.passThrough && 'Promise' in window) {
-            resolve();
-            promise = makePromise(instance);
-          }
-        }
-      } else {
-        startTime = now;
-        setCallback('loopComplete');
-        instance.loopBegan = false;
-        if (instance.direction === 'alternate') {
-          toggleInstanceDirection();
-        }
-      }
-    }
-  }
-
-  instance.reset = function() {
-    var direction = instance.direction;
-    instance.passThrough = false;
-    instance.currentTime = 0;
-    instance.progress = 0;
-    instance.paused = true;
-    instance.began = false;
-    instance.loopBegan = false;
-    instance.changeBegan = false;
-    instance.completed = false;
-    instance.changeCompleted = false;
-    instance.reversePlayback = false;
-    instance.reversed = direction === 'reverse';
-    instance.remaining = instance.loop;
-    children = instance.children;
-    childrenLength = children.length;
-    for (var i = childrenLength; i--;) { instance.children[i].reset(); }
-    if (instance.reversed && instance.loop !== true || (direction === 'alternate' && instance.loop === 1)) { instance.remaining++; }
-    setAnimationsProgress(instance.reversed ? instance.duration : 0);
-  };
-
-  // internal method (for engine) to adjust animation timings before restoring engine ticks (rAF)
-  instance._onDocumentVisibility = resetTime;
-
-  // Set Value helper
-
-  instance.set = function(targets, properties) {
-    setTargetsValue(targets, properties);
-    return instance;
-  };
-
-  instance.tick = function(t) {
-    now = t;
-    if (!startTime) { startTime = now; }
-    setInstanceProgress((now + (lastTime - startTime)) * anime.speed);
-  };
-
-  instance.seek = function(time) {
-    setInstanceProgress(adjustTime(time));
-  };
-
-  instance.pause = function() {
-    instance.paused = true;
-    resetTime();
-  };
-
-  instance.play = function() {
-    if (!instance.paused) { return; }
-    if (instance.completed) { instance.reset(); }
-    instance.paused = false;
-    activeInstances.push(instance);
-    resetTime();
-    engine();
-  };
-
-  instance.reverse = function() {
-    toggleInstanceDirection();
-    instance.completed = instance.reversed ? false : true;
-    resetTime();
-  };
-
-  instance.restart = function() {
-    instance.reset();
-    instance.play();
-  };
-
-  instance.remove = function(targets) {
-    var targetsArray = parseTargets(targets);
-    removeTargetsFromInstance(targetsArray, instance);
-  };
-
-  instance.reset();
-
-  if (instance.autoplay) { instance.play(); }
-
-  return instance;
-
-}
-
-// Remove targets from animation
-
-function removeTargetsFromAnimations(targetsArray, animations) {
-  for (var a = animations.length; a--;) {
-    if (arrayContains(targetsArray, animations[a].animatable.target)) {
-      animations.splice(a, 1);
-    }
-  }
-}
-
-function removeTargetsFromInstance(targetsArray, instance) {
-  var animations = instance.animations;
-  var children = instance.children;
-  removeTargetsFromAnimations(targetsArray, animations);
-  for (var c = children.length; c--;) {
-    var child = children[c];
-    var childAnimations = child.animations;
-    removeTargetsFromAnimations(targetsArray, childAnimations);
-    if (!childAnimations.length && !child.children.length) { children.splice(c, 1); }
-  }
-  if (!animations.length && !children.length) { instance.pause(); }
-}
-
-function removeTargetsFromActiveInstances(targets) {
-  var targetsArray = parseTargets(targets);
-  for (var i = activeInstances.length; i--;) {
-    var instance = activeInstances[i];
-    removeTargetsFromInstance(targetsArray, instance);
-  }
-}
-
-// Stagger helpers
-
-function stagger(val, params) {
-  if ( params === void 0 ) params = {};
-
-  var direction = params.direction || 'normal';
-  var easing = params.easing ? parseEasings(params.easing) : null;
-  var grid = params.grid;
-  var axis = params.axis;
-  var fromIndex = params.from || 0;
-  var fromFirst = fromIndex === 'first';
-  var fromCenter = fromIndex === 'center';
-  var fromLast = fromIndex === 'last';
-  var isRange = is.arr(val);
-  var val1 = isRange ? parseFloat(val[0]) : parseFloat(val);
-  var val2 = isRange ? parseFloat(val[1]) : 0;
-  var unit = getUnit(isRange ? val[1] : val) || 0;
-  var start = params.start || 0 + (isRange ? val1 : 0);
-  var values = [];
-  var maxValue = 0;
-  return function (el, i, t) {
-    if (fromFirst) { fromIndex = 0; }
-    if (fromCenter) { fromIndex = (t - 1) / 2; }
-    if (fromLast) { fromIndex = t - 1; }
-    if (!values.length) {
-      for (var index = 0; index < t; index++) {
-        if (!grid) {
-          values.push(Math.abs(fromIndex - index));
-        } else {
-          var fromX = !fromCenter ? fromIndex%grid[0] : (grid[0]-1)/2;
-          var fromY = !fromCenter ? Math.floor(fromIndex/grid[0]) : (grid[1]-1)/2;
-          var toX = index%grid[0];
-          var toY = Math.floor(index/grid[0]);
-          var distanceX = fromX - toX;
-          var distanceY = fromY - toY;
-          var value = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
-          if (axis === 'x') { value = -distanceX; }
-          if (axis === 'y') { value = -distanceY; }
-          values.push(value);
-        }
-        maxValue = Math.max.apply(Math, values);
-      }
-      if (easing) { values = values.map(function (val) { return easing(val / maxValue) * maxValue; }); }
-      if (direction === 'reverse') { values = values.map(function (val) { return axis ? (val < 0) ? val * -1 : -val : Math.abs(maxValue - val); }); }
-    }
-    var spacing = isRange ? (val2 - val1) / maxValue : val1;
-    return start + (spacing * (Math.round(values[i] * 100) / 100)) + unit;
-  }
-}
-
-// Timeline
-
-function timeline(params) {
-  if ( params === void 0 ) params = {};
-
-  var tl = anime(params);
-  tl.duration = 0;
-  tl.add = function(instanceParams, timelineOffset) {
-    var tlIndex = activeInstances.indexOf(tl);
-    var children = tl.children;
-    if (tlIndex > -1) { activeInstances.splice(tlIndex, 1); }
-    function passThrough(ins) { ins.passThrough = true; }
-    for (var i = 0; i < children.length; i++) { passThrough(children[i]); }
-    var insParams = mergeObjects(instanceParams, replaceObjectProps(defaultTweenSettings, params));
-    insParams.targets = insParams.targets || params.targets;
-    var tlDuration = tl.duration;
-    insParams.autoplay = false;
-    insParams.direction = tl.direction;
-    insParams.timelineOffset = is.und(timelineOffset) ? tlDuration : getRelativeValue(timelineOffset, tlDuration);
-    passThrough(tl);
-    tl.seek(insParams.timelineOffset);
-    var ins = anime(insParams);
-    passThrough(ins);
-    children.push(ins);
-    var timings = getInstanceTimings(children, params);
-    tl.delay = timings.delay;
-    tl.endDelay = timings.endDelay;
-    tl.duration = timings.duration;
-    tl.seek(0);
-    tl.reset();
-    if (tl.autoplay) { tl.play(); }
-    return tl;
-  };
-  return tl;
-}
-
-anime.version = '3.2.1';
-anime.speed = 1;
-// TODO:#review: naming, documentation
-anime.suspendWhenDocumentHidden = true;
-anime.running = activeInstances;
-anime.remove = removeTargetsFromActiveInstances;
-anime.get = getOriginalTargetValue;
-anime.set = setTargetsValue;
-anime.convertPx = convertPxToUnit;
-anime.path = getPath;
-anime.setDashoffset = setDashoffset;
-anime.stagger = stagger;
-anime.timeline = timeline;
-anime.easing = parseEasings;
-anime.penner = penner;
-anime.random = function (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; };
-
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (anime);
-
-
-/***/ }),
-
 /***/ "./src/autocomplete.ts":
 /*!*****************************!*\
   !*** ./src/autocomplete.ts ***!
@@ -1762,15 +438,11 @@ exports.Autocomplete = Autocomplete;
 /*!************************!*\
   !*** ./src/buttons.ts ***!
   \************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.FloatingActionButton = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 ;
 let _defaults = {
@@ -1879,36 +551,34 @@ class FloatingActionButton extends component_1.Component {
     }
     _animateInFAB() {
         this.el.classList.add('active');
-        let time = 0;
-        this._floatingBtnsReverse.forEach((el) => {
-            (0, animejs_1.default)({
-                targets: el,
-                opacity: 1,
-                scale: [0.4, 1],
-                translateY: [this.offsetY, 0],
-                translateX: [this.offsetX, 0],
-                duration: 275,
-                delay: time,
-                easing: 'easeInOutQuad'
-            });
-            time += 40;
+        const delayIncrement = 40;
+        const duration = 275;
+        this._floatingBtnsReverse.forEach((el, index) => {
+            const delay = delayIncrement * index;
+            el.style.transition = 'none';
+            el.style.opacity = '0';
+            el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
+            setTimeout(() => {
+                // from:
+                el.style.opacity = '0.4';
+                // easeInOutQuad
+                setTimeout(() => {
+                    // to:
+                    el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+                    el.style.opacity = '1';
+                    el.style.transform = 'translate(0, 0) scale(1)';
+                }, 1);
+            }, delay);
         });
     }
     _animateOutFAB() {
+        const duration = 175;
+        setTimeout(() => this.el.classList.remove('active'), duration);
         this._floatingBtnsReverse.forEach((el) => {
-            animejs_1.default.remove(el);
-            (0, animejs_1.default)({
-                targets: el,
-                opacity: 0,
-                scale: 0.4,
-                translateY: this.offsetY,
-                translateX: this.offsetX,
-                duration: 175,
-                easing: 'easeOutQuad',
-                complete: () => {
-                    this.el.classList.remove('active');
-                }
-            });
+            el.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            el.style.opacity = '0';
+            el.style.transform = `translate(${this.offsetX}px, ${this.offsetY}px) scale(0.4)`;
         });
     }
     _animateInToolbar() {
@@ -1965,15 +635,11 @@ exports.FloatingActionButton = FloatingActionButton;
 /*!**********************!*\
   !*** ./src/cards.ts ***!
   \**********************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Cards = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 class Cards {
     static Init() {
         document.addEventListener("DOMContentLoaded", () => {
@@ -1989,16 +655,13 @@ class Cards {
                 // Close Card
                 const closeArea = cardReveal.querySelector('.card-reveal .card-title');
                 if (trigger === closeArea || closeArea.contains(trigger)) {
-                    (0, animejs_1.default)({
-                        targets: cardReveal,
-                        translateY: 0,
-                        duration: 225,
-                        easing: 'easeInOutQuad',
-                        complete: (anim) => {
-                            cardReveal.style.display = 'none';
-                            card.style.overflow = initialOverflow;
-                        }
-                    });
+                    const duration = 225;
+                    cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
+                    cardReveal.style.transform = 'translateY(0)';
+                    setTimeout(() => {
+                        cardReveal.style.display = 'none';
+                        card.style.overflow = initialOverflow;
+                    }, duration);
                 }
                 ;
                 // Reveal Card
@@ -2007,12 +670,11 @@ class Cards {
                     if (trigger === activator || activator.contains(trigger)) {
                         card.style.overflow = 'hidden';
                         cardReveal.style.display = 'block';
-                        (0, animejs_1.default)({
-                            targets: cardReveal,
-                            translateY: '-100%',
-                            duration: 300,
-                            easing: 'easeInOutQuad'
-                        });
+                        setTimeout(() => {
+                            const duration = 300;
+                            cardReveal.style.transition = `transform ${duration}ms ease`; //easeInOutQuad
+                            cardReveal.style.transform = 'translateY(-100%)';
+                        }, 1);
                     }
                 });
             });
@@ -2997,15 +1659,11 @@ exports.Chips = Chips;
 /*!****************************!*\
   !*** ./src/collapsible.ts ***!
   \****************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Collapsible = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 const _defaults = {
@@ -3087,13 +1745,17 @@ class Collapsible extends component_1.Component {
         this._headers = Array.from(this.el.querySelectorAll('li > .collapsible-header'));
         this._headers.forEach(el => el.tabIndex = 0);
         this._setupEventHandlers();
-        // Open first active
+        // Open active
         const activeBodies = Array.from(this.el.querySelectorAll('li.active > .collapsible-body'));
         if (this.options.accordion)
-            if (activeBodies.length > 0)
-                activeBodies[0].style.display = 'block'; // Accordion
-            else
-                activeBodies.forEach(el => el.style.display = 'block'); // Expandables
+            if (activeBodies.length > 0) {
+                // Accordion => open first active only
+                this._setExpanded(activeBodies[0]);
+            }
+            else {
+                // Expandables => all active
+                activeBodies.forEach(el => this._setExpanded(el));
+            }
     }
     static get defaults() {
         return _defaults;
@@ -3121,66 +1783,36 @@ class Collapsible extends component_1.Component {
         this.el.removeEventListener('click', this._handleCollapsibleClick);
         this._headers.forEach(header => header.removeEventListener('keydown', this._handleCollapsibleKeydown));
     }
+    _setExpanded(li) {
+        li.style.maxHeight = li.scrollHeight + "px";
+    }
     _animateIn(index) {
         const li = this.el.children[index];
         if (!li)
             return;
         const body = li.querySelector('.collapsible-body');
-        animejs_1.default.remove(body);
-        body.style.display = 'block';
-        body.style.overflow = 'hidden';
-        body.style.height = '0';
-        body.style.paddingTop = '';
-        body.style.paddingBottom = '';
-        const pTop = getComputedStyle(body).paddingTop; //  . css('padding-top');
-        const pBottom = getComputedStyle(body).paddingBottom; //body.css('padding-bottom');
-        const finalHeight = body.scrollHeight;
-        body.style.paddingTop = '0';
-        body.style.paddingBottom = '0';
-        (0, animejs_1.default)({
-            targets: body,
-            height: finalHeight,
-            paddingTop: pTop,
-            paddingBottom: pBottom,
-            duration: this.options.inDuration,
-            easing: 'easeInOutCubic',
-            complete: (anim) => {
-                body.style.overflow = '';
-                body.style.height = '';
-                body.style.paddingTop = '';
-                body.style.paddingBottom = '';
-                // onOpenEnd callback
-                if (typeof this.options.onOpenEnd === 'function') {
-                    this.options.onOpenEnd.call(this, li);
-                }
+        const duration = this.options.inDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        this._setExpanded(body);
+        setTimeout(() => {
+            if (typeof this.options.onOpenEnd === 'function') {
+                this.options.onOpenEnd.call(this, li);
             }
-        });
+        }, duration);
     }
     _animateOut(index) {
         const li = this.el.children[index];
         if (!li)
             return;
         const body = li.querySelector('.collapsible-body');
-        animejs_1.default.remove(body);
-        body.style.overflow = 'hidden';
-        (0, animejs_1.default)({
-            targets: body,
-            height: 0,
-            paddingTop: 0,
-            paddingBottom: 0,
-            duration: this.options.outDuration,
-            easing: 'easeInOutCubic',
-            complete: () => {
-                body.style.overflow = '';
-                body.style.height = '';
-                body.style.padding = '';
-                body.style.display = '';
-                // onCloseEnd callback
-                if (typeof this.options.onCloseEnd === 'function') {
-                    this.options.onCloseEnd.call(this, li);
-                }
+        const duration = this.options.outDuration; // easeInOutCubic
+        body.style.transition = `max-height ${duration}ms ease-out`;
+        body.style.maxHeight = "0";
+        setTimeout(() => {
+            if (typeof this.options.onCloseEnd === 'function') {
+                this.options.onCloseEnd.call(this, li);
             }
-        });
+        }, duration);
     }
 }
 exports.Collapsible = Collapsible;
@@ -4016,15 +2648,11 @@ exports.Datepicker = Datepicker;
 /*!*************************!*\
   !*** ./src/dropdown.ts ***!
   \*************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Dropdown = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 ;
@@ -4428,47 +3056,37 @@ class Dropdown extends component_1.Component {
         };
     }
     _animateIn() {
-        animejs_1.default.remove(this.dropdownEl);
-        (0, animejs_1.default)({
-            targets: this.dropdownEl,
-            opacity: {
-                value: [0, 1],
-                easing: 'easeOutQuad'
-            },
-            scaleX: [0.3, 1],
-            scaleY: [0.3, 1],
-            duration: this.options.inDuration,
-            easing: 'easeOutQuint',
-            complete: (anim) => {
-                if (this.options.autoFocus)
-                    this.dropdownEl.focus();
-                // onOpenEnd callback
-                if (typeof this.options.onOpenEnd === 'function') {
-                    this.options.onOpenEnd.call(this, this.el);
-                }
-            }
-        });
+        const duration = this.options.inDuration;
+        this.dropdownEl.style.transition = 'none';
+        // from
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            // easeOutQuad (opacity) & easeOutQuint    
+            this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+            // to
+            this.dropdownEl.style.opacity = '1';
+            this.dropdownEl.style.transform = 'scale(1, 1)';
+        }, 1);
+        setTimeout(() => {
+            if (this.options.autoFocus)
+                this.dropdownEl.focus();
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
     }
     _animateOut() {
-        animejs_1.default.remove(this.dropdownEl);
-        (0, animejs_1.default)({
-            targets: this.dropdownEl,
-            opacity: {
-                value: 0,
-                easing: 'easeOutQuint'
-            },
-            scaleX: 0.3,
-            scaleY: 0.3,
-            duration: this.options.outDuration,
-            easing: 'easeOutQuint',
-            complete: (anim) => {
-                this._resetDropdownStyles();
-                // onCloseEnd callback
-                if (typeof this.options.onCloseEnd === 'function') {
-                    this.options.onCloseEnd.call(this, this.el);
-                }
-            }
-        });
+        const duration = this.options.outDuration;
+        // easeOutQuad (opacity) & easeOutQuint    
+        this.dropdownEl.style.transition = `opacity ${duration}ms ease, transform ${duration}ms ease`;
+        // to
+        this.dropdownEl.style.opacity = '0';
+        this.dropdownEl.style.transform = 'scale(0.3, 0.3)';
+        setTimeout(() => {
+            this._resetDropdownStyles();
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
     }
     _getClosestAncestor(el, condition) {
         let ancestor = el.parentNode;
@@ -4655,15 +3273,11 @@ exports.Forms = Forms;
 /*!****************************!*\
   !*** ./src/materialbox.ts ***!
   \****************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Materialbox = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 const _defaults = {
@@ -4708,9 +3322,8 @@ class Materialbox extends component_1.Component {
             this.el.classList.add('active');
             this.overlayActive = true;
             // onOpenStart callback
-            if (typeof this.options.onOpenStart === 'function') {
+            if (typeof this.options.onOpenStart === 'function')
                 this.options.onOpenStart.call(this, this.el);
-            }
             // Set positioning for placeholder
             this.placeholder.style.width = this.placeholder.getBoundingClientRect().width + 'px';
             this.placeholder.style.height = this.placeholder.getBoundingClientRect().height + 'px';
@@ -4733,47 +3346,10 @@ class Materialbox extends component_1.Component {
                 this.el.style.width = this.attrHeight + 'px';
                 this.el.removeAttribute('height');
             }
-            // Add overlay
-            this._overlay = document.createElement('div');
-            this._overlay.id = 'materialbox-overlay';
-            this._overlay.style.opacity = '0';
-            this._overlay.addEventListener('click', e => {
-                if (this.doneAnimating)
-                    this.close();
-            }, { once: true });
-            // Put before in origin image to preserve z-index layering.
-            this.el.before(this._overlay);
-            // Set dimensions if needed
-            const overlayOffset = this._overlay.getBoundingClientRect();
-            this._overlay.style.width = this.windowWidth + 'px';
-            this._overlay.style.height = this.windowHeight + 'px';
-            this._overlay.style.left = -1 * overlayOffset.left + 'px';
-            this._overlay.style.top = -1 * overlayOffset.top + 'px';
-            animejs_1.default.remove(this.el);
-            animejs_1.default.remove(this._overlay);
-            // Animate Overlay
-            (0, animejs_1.default)({
-                targets: this._overlay,
-                opacity: 1,
-                duration: this.options.inDuration,
-                easing: 'easeOutQuad'
-            });
+            this._addOverlay();
             // Add and animate caption if it exists
-            if (this.caption !== '') {
-                if (this._photoCaption)
-                    animejs_1.default.remove(this._photoCaption);
-                this._photoCaption = document.createElement('div');
-                this._photoCaption.classList.add('materialbox-caption');
-                this._photoCaption.innerText = this.caption;
-                document.body.append(this._photoCaption);
-                this._photoCaption.style.display = 'inline';
-                (0, animejs_1.default)({
-                    targets: this._photoCaption,
-                    opacity: 1,
-                    duration: this.options.inDuration,
-                    easing: 'easeOutQuad'
-                });
-            }
+            if (this.caption !== '')
+                this._addCaption();
             // Resize Image
             const widthPercent = this.originalWidth / this.windowWidth;
             const heightPercent = this.originalHeight / this.windowHeight;
@@ -4804,40 +3380,19 @@ class Materialbox extends component_1.Component {
             this._updateVars();
             this.doneAnimating = false;
             // onCloseStart callback
-            if (typeof this.options.onCloseStart === 'function') {
+            if (typeof this.options.onCloseStart === 'function')
                 this.options.onCloseStart.call(this, this.el);
-            }
-            animejs_1.default.remove(this.el);
-            animejs_1.default.remove(this._overlay);
-            if (this.caption !== '')
-                animejs_1.default.remove(this._photoCaption);
+            //anim.remove(this.el);
+            //anim.remove(this._overlay);
+            //if (this.caption !== '') anim.remove(this._photoCaption);
             // disable exit handlers
             window.removeEventListener('scroll', this._handleWindowScroll);
             window.removeEventListener('resize', this._handleWindowResize);
             window.removeEventListener('keyup', this._handleWindowEscape);
-            (0, animejs_1.default)({
-                targets: this._overlay,
-                opacity: 0,
-                duration: this.options.outDuration,
-                easing: 'easeOutQuad',
-                complete: () => {
-                    this.overlayActive = false;
-                    this._overlay.remove();
-                }
-            });
+            this._removeOverlay();
             this._animateImageOut();
-            // Remove Caption + reset css settings on image
-            if (this.caption !== '') {
-                (0, animejs_1.default)({
-                    targets: this._photoCaption,
-                    opacity: 0,
-                    duration: this.options.outDuration,
-                    easing: 'easeOutQuad',
-                    complete: () => {
-                        this._photoCaption.remove();
-                    }
-                });
-            }
+            if (this.caption !== '')
+                this._removeCaption();
         };
         this.el.M_Materialbox = this;
         this.options = Object.assign(Object.assign({}, Materialbox.defaults), options);
@@ -4902,80 +3457,162 @@ class Materialbox extends component_1.Component {
             left: box.left + window.pageXOffset - docElem.clientLeft
         };
     }
+    _updateVars() {
+        this.windowWidth = window.innerWidth;
+        this.windowHeight = window.innerHeight;
+        this.caption = this.el.getAttribute('data-caption') || '';
+    }
+    // Image
     _animateImageIn() {
         this.el.style.maxHeight = this.newHeight.toString() + 'px';
         this.el.style.maxWidth = this.newWidth.toString() + 'px';
-        const animOptions = {
-            targets: this.el,
-            height: [this.originalHeight, this.newHeight],
-            width: [this.originalWidth, this.newWidth],
-            left: utils_1.Utils.getDocumentScrollLeft() +
+        const duration = this.options.inDuration;
+        // from
+        this.el.style.transition = 'none';
+        this.el.style.height = this.originalHeight + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        setTimeout(() => {
+            // easeOutQuad
+            this.el.style.transition = `height ${duration}ms ease,
+        width ${duration}ms ease,
+        left ${duration}ms ease,
+        top ${duration}ms ease
+      `;
+            // to
+            this.el.style.height = this.newHeight + 'px';
+            this.el.style.width = this.newWidth + 'px';
+            this.el.style.left = (utils_1.Utils.getDocumentScrollLeft() +
                 this.windowWidth / 2 -
                 this._offset(this.placeholder).left -
-                this.newWidth / 2,
-            top: utils_1.Utils.getDocumentScrollTop() +
+                this.newWidth / 2) + 'px';
+            this.el.style.top = (utils_1.Utils.getDocumentScrollTop() +
                 this.windowHeight / 2 -
                 this._offset(this.placeholder).top -
-                this.newHeight / 2,
-            duration: this.options.inDuration,
-            easing: 'easeOutQuad',
-            complete: () => {
-                this.doneAnimating = true;
-                // onOpenEnd callback
-                if (typeof this.options.onOpenEnd === 'function') {
-                    this.options.onOpenEnd.call(this, this.el);
-                }
-            }
-        };
-        // Override max-width or max-height if needed
-        //const elStyle = this.el.style;
-        //console.log('mh', elStyle.maxHeight, '->', this.newHeight);
-        //console.log('mw', elStyle.maxWidth, '->', this.newWidth);
-        //if (elStyle.maxWidth !== 'none') animOptions.maxWidth = this.newWidth;
-        //if (elStyle.maxHeight !== 'none') animOptions.maxHeight = this.newHeight;
-        //console.log('>>> animate');
-        //console.log(JSON.stringify(animOptions));
-        (0, animejs_1.default)(animOptions);
+                this.newHeight / 2) + 'px';
+        }, 1);
+        setTimeout(() => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
+        /*
+        anim({
+          targets: this.el, // image
+          height: [this.originalHeight, this.newHeight],
+          width: [this.originalWidth, this.newWidth],
+          left:
+            Utils.getDocumentScrollLeft() +
+            this.windowWidth / 2 -
+            this._offset(this.placeholder).left -
+            this.newWidth / 2,
+          top:
+            Utils.getDocumentScrollTop() +
+            this.windowHeight / 2 -
+            this._offset(this.placeholder).top -
+            this.newHeight / 2,
+    
+          duration: this.options.inDuration,
+          easing: 'easeOutQuad',
+          complete: () => {
+            this.doneAnimating = true;
+            if (typeof this.options.onOpenEnd === 'function') this.options.onOpenEnd.call(this, this.el);
+          }
+        });
+        */
     }
     _animateImageOut() {
-        const animOptions = {
-            targets: this.el,
-            width: this.originalWidth,
-            height: this.originalHeight,
-            left: 0,
-            top: 0,
-            duration: this.options.outDuration,
-            easing: 'easeOutQuad',
-            complete: () => {
-                this.placeholder.style.height = '';
-                this.placeholder.style.width = '';
-                this.placeholder.style.position = '';
-                this.placeholder.style.top = '';
-                this.placeholder.style.left = '';
-                // Revert to width or height attribute
-                if (this.attrWidth)
-                    this.el.setAttribute('width', this.attrWidth.toString());
-                if (this.attrHeight)
-                    this.el.setAttribute('height', this.attrHeight.toString());
-                this.el.removeAttribute('style');
-                this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles);
-                // Remove class
-                this.el.classList.remove('active');
-                this.doneAnimating = true;
-                // Remove overflow overrides on ancestors
-                this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = '');
-                // onCloseEnd callback
-                if (typeof this.options.onCloseEnd === 'function') {
-                    this.options.onCloseEnd.call(this, this.el);
-                }
-            }
-        };
-        (0, animejs_1.default)(animOptions);
+        const duration = this.options.outDuration;
+        // easeOutQuad
+        this.el.style.transition = `height ${duration}ms ease,
+      width ${duration}ms ease,
+      left ${duration}ms ease,
+      top ${duration}ms ease
+    `;
+        // to
+        this.el.style.height = this.originalWidth + 'px';
+        this.el.style.width = this.originalWidth + 'px';
+        this.el.style.left = '0';
+        this.el.style.top = '0';
+        setTimeout(() => {
+            this.placeholder.style.height = '';
+            this.placeholder.style.width = '';
+            this.placeholder.style.position = '';
+            this.placeholder.style.top = '';
+            this.placeholder.style.left = '';
+            // Revert to width or height attribute
+            if (this.attrWidth)
+                this.el.setAttribute('width', this.attrWidth.toString());
+            if (this.attrHeight)
+                this.el.setAttribute('height', this.attrHeight.toString());
+            this.el.removeAttribute('style');
+            this.originInlineStyles && this.el.setAttribute('style', this.originInlineStyles);
+            // Remove class
+            this.el.classList.remove('active');
+            this.doneAnimating = true;
+            // Remove overflow overrides on ancestors
+            this._changedAncestorList.forEach(anchestor => anchestor.style.overflow = '');
+            // onCloseEnd callback
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    // Caption
+    _addCaption() {
+        this._photoCaption = document.createElement('div');
+        this._photoCaption.classList.add('materialbox-caption');
+        this._photoCaption.innerText = this.caption;
+        document.body.append(this._photoCaption);
+        this._photoCaption.style.display = 'inline';
+        // Animate
+        this._photoCaption.style.transition = 'none';
+        this._photoCaption.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+            this._photoCaption.style.opacity = '1';
+        }, 1);
+    }
+    _removeCaption() {
+        const duration = this.options.outDuration;
+        this._photoCaption.style.transition = `opacity ${duration}ms ease`;
+        this._photoCaption.style.opacity = '0';
+        setTimeout(() => {
+            this._photoCaption.remove();
+        }, duration);
     }
-    _updateVars() {
-        this.windowWidth = window.innerWidth;
-        this.windowHeight = window.innerHeight;
-        this.caption = this.el.getAttribute('data-caption') || '';
+    // Overlay
+    _addOverlay() {
+        this._overlay = document.createElement('div');
+        this._overlay.id = 'materialbox-overlay';
+        this._overlay.addEventListener('click', e => {
+            if (this.doneAnimating)
+                this.close();
+        }, { once: true });
+        // Put before in origin image to preserve z-index layering.
+        this.el.before(this._overlay);
+        // Set dimensions if needed
+        const overlayOffset = this._overlay.getBoundingClientRect();
+        this._overlay.style.width = this.windowWidth + 'px';
+        this._overlay.style.height = this.windowHeight + 'px';
+        this._overlay.style.left = -1 * overlayOffset.left + 'px';
+        this._overlay.style.top = -1 * overlayOffset.top + 'px';
+        // Animate
+        this._overlay.style.transition = 'none';
+        this._overlay.style.opacity = '0';
+        const duration = this.options.inDuration;
+        setTimeout(() => {
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            this._overlay.style.opacity = '1';
+        }, 1);
+    }
+    _removeOverlay() {
+        const duration = this.options.outDuration;
+        this._overlay.style.transition = `opacity ${duration}ms ease`;
+        this._overlay.style.opacity = '0';
+        setTimeout(() => {
+            this.overlayActive = false;
+            this._overlay.remove();
+        }, duration);
     }
 }
 exports.Materialbox = Materialbox;
@@ -4987,15 +3624,11 @@ exports.Materialbox = Materialbox;
 /*!**********************!*\
   !*** ./src/modal.ts ***!
   \**********************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Modal = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 const _defaults = {
@@ -5070,8 +3703,6 @@ class Modal extends component_1.Component {
                 document.addEventListener('keydown', this._handleKeydown);
                 document.addEventListener('focus', this._handleFocus, true);
             }
-            animejs_1.default.remove(this.el);
-            animejs_1.default.remove(this._overlay);
             this._animateIn();
             // Focus modal
             this.el.focus();
@@ -5099,8 +3730,6 @@ class Modal extends component_1.Component {
                 document.removeEventListener('keydown', this._handleKeydown);
                 document.removeEventListener('focus', this._handleFocus, true);
             }
-            animejs_1.default.remove(this.el);
-            animejs_1.default.remove(this._overlay);
             this._animateOut();
             return this;
         };
@@ -5153,79 +3782,75 @@ class Modal extends component_1.Component {
     }
     _animateIn() {
         // Set initial styles
-        this.el.style.display = 'block';
-        this.el.style.opacity = '0';
         this._overlay.style.display = 'block';
         this._overlay.style.opacity = '0';
-        // Animate overlay
-        (0, animejs_1.default)({
-            targets: this._overlay,
-            opacity: this.options.opacity,
-            duration: this.options.inDuration,
-            easing: 'easeOutQuad'
-        });
-        // Define modal animation options
-        const enterAnimOptions = {
-            targets: this.el,
-            duration: this.options.inDuration,
-            easing: 'easeOutCubic',
-            // Handle modal onOpenEnd callback
-            complete: () => {
+        this.el.style.display = 'block';
+        this.el.style.opacity = '0';
+        const duration = this.options.inDuration;
+        const isBottomSheet = this.el.classList.contains('bottom-sheet');
+        if (!isBottomSheet) {
+            this.el.style.top = this.options.startingTop;
+            this.el.style.transform = 'scaleX(0.9) scaleY(0.9)';
+        }
+        // Overlay
+        this._overlay.style.transition = `opacity ${duration}ms ease-out`; // v1: easeOutQuad
+        // Modal
+        this.el.style.transition = `
+      top ${duration}ms ease-out,
+      bottom ${duration}ms ease-out,
+      opacity ${duration}ms ease-out,
+      transform ${duration}ms ease-out
+    `;
+        setTimeout(() => {
+            this._overlay.style.opacity = this.options.opacity.toString();
+            this.el.style.opacity = '1';
+            if (isBottomSheet) {
+                this.el.style.bottom = '0';
+            }
+            else {
+                this.el.style.top = this.options.endingTop;
+                this.el.style.transform = 'scaleX(1) scaleY(1)';
+            }
+            setTimeout(() => {
                 if (typeof this.options.onOpenEnd === 'function') {
                     this.options.onOpenEnd.call(this, this.el, this._openingTrigger);
                 }
-            }
-        };
-        // Bottom sheet animation
-        if (this.el.classList.contains('bottom-sheet')) {
-            enterAnimOptions['bottom'] = 0;
-            enterAnimOptions['opacity'] = 1;
-        }
-        // Normal modal animation
-        else {
-            enterAnimOptions['top'] = [this.options.startingTop, this.options.endingTop];
-            enterAnimOptions['opacity'] = 1;
-            enterAnimOptions['scaleX'] = [0.8, 1];
-            enterAnimOptions['scaleY'] = [0.8, 1];
-        }
-        (0, animejs_1.default)(enterAnimOptions);
+            }, duration);
+        }, 1);
     }
     _animateOut() {
-        // Animate overlay
-        (0, animejs_1.default)({
-            targets: this._overlay,
-            opacity: 0,
-            duration: this.options.outDuration,
-            easing: 'easeOutQuart'
-        });
-        // Define modal animation options
-        const exitAnimOptions = {
-            targets: this.el,
-            duration: this.options.outDuration,
-            easing: 'easeOutCubic',
-            // Handle modal ready callback
-            complete: () => {
+        const duration = this.options.outDuration;
+        const isBottomSheet = this.el.classList.contains('bottom-sheet');
+        if (!isBottomSheet) {
+            this.el.style.top = this.options.endingTop;
+        }
+        // Overlay
+        this._overlay.style.transition = `opacity ${duration}ms ease-out`; // v1: easeOutQuart
+        // Modal // easeOutCubic
+        this.el.style.transition = `
+      top ${duration}ms ease-out,
+      bottom ${duration}ms ease-out,
+      opacity ${duration}ms ease-out,
+      transform ${duration}ms ease-out
+    `;
+        setTimeout(() => {
+            this._overlay.style.opacity = '0';
+            this.el.style.opacity = '0';
+            if (isBottomSheet) {
+                this.el.style.bottom = '-100%';
+            }
+            else {
+                this.el.style.top = this.options.startingTop;
+                this.el.style.transform = 'scaleX(0.9) scaleY(0.9)';
+            }
+            setTimeout(() => {
                 this.el.style.display = 'none';
                 this._overlay.remove();
-                // Call onCloseEnd callback
                 if (typeof this.options.onCloseEnd === 'function') {
                     this.options.onCloseEnd.call(this, this.el);
                 }
-            }
-        };
-        // Bottom sheet animation
-        if (this.el.classList.contains('bottom-sheet')) {
-            exitAnimOptions['bottom'] = '-100%';
-            exitAnimOptions['opacity'] = 0;
-        }
-        // Normal modal animation
-        else {
-            exitAnimOptions['top'] = [this.options.endingTop, this.options.startingTop];
-            exitAnimOptions['opacity'] = 0;
-            exitAnimOptions['scaleX'] = 0.8;
-            exitAnimOptions['scaleY'] = 0.8;
-        }
-        (0, animejs_1.default)(exitAnimOptions);
+            }, duration);
+        }, 1);
     }
 }
 exports.Modal = Modal;
@@ -5472,15 +4097,11 @@ exports.Pushpin = Pushpin;
 /*!**********************!*\
   !*** ./src/range.ts ***!
   \**********************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Range = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 ;
 const _defaults = {};
@@ -5529,18 +4150,24 @@ class Range extends component_1.Component {
         this._handleRangeBlurMouseoutTouchleave = () => {
             if (!this._mousedown) {
                 const paddingLeft = parseInt(getComputedStyle(this.el).paddingLeft);
-                const marginLeft = 7 + paddingLeft + 'px';
+                const marginLeftText = 7 + paddingLeft + 'px';
                 if (this.thumb.classList.contains('active')) {
-                    animejs_1.default.remove(this.thumb);
-                    (0, animejs_1.default)({
-                        targets: this.thumb,
-                        height: 0,
-                        width: 0,
-                        top: 10,
-                        easing: 'easeOutQuad',
-                        marginLeft: marginLeft,
-                        duration: 100
-                    });
+                    const duration = 100;
+                    // from
+                    this.thumb.style.transition = 'none';
+                    setTimeout(() => {
+                        this.thumb.style.transition = `
+            height ${duration}ms ease,
+            width ${duration}ms ease,
+            top ${duration}ms ease,
+            margin ${duration}ms ease
+          `;
+                        // to          
+                        this.thumb.style.height = '0';
+                        this.thumb.style.width = '0';
+                        this.thumb.style.top = '0';
+                        this.thumb.style.marginLeft = marginLeftText;
+                    }, 1);
                 }
                 this.thumb.classList.remove('active');
             }
@@ -5609,17 +4236,20 @@ class Range extends component_1.Component {
     }
     _showRangeBubble() {
         const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
-        const marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
-        animejs_1.default.remove(this.thumb);
-        (0, animejs_1.default)({
-            targets: this.thumb,
-            height: 30,
-            width: 30,
-            top: -30,
-            marginLeft: marginLeft,
-            duration: 300,
-            easing: 'easeOutQuint'
-        });
+        const marginLeftText = -7 + paddingLeft + 'px'; // TODO: fix magic number?
+        const duration = 300;
+        // easeOutQuint
+        this.thumb.style.transition = `
+      height ${duration}ms ease,
+      width ${duration}ms ease,
+      top ${duration}ms ease,
+      margin ${duration}ms ease
+    `;
+        // to
+        this.thumb.style.height = '30px';
+        this.thumb.style.width = '30px';
+        this.thumb.style.top = '-30px';
+        this.thumb.style.marginLeft = marginLeftText;
     }
     _calcRangeOffset() {
         const width = this.el.getBoundingClientRect().width - 15;
@@ -5644,15 +4274,11 @@ exports.Range = Range;
 /*!**************************!*\
   !*** ./src/scrollspy.ts ***!
   \**************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.ScrollSpy = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 ;
@@ -5673,13 +4299,7 @@ class ScrollSpy extends component_1.Component {
                 const x = document.querySelector('a[href="#' + scrollspy.el.id + '"]');
                 if (trigger === x) {
                     e.preventDefault();
-                    const offset = ScrollSpy._offset(scrollspy.el).top + 1;
-                    (0, animejs_1.default)({
-                        targets: [document.documentElement, document.body],
-                        scrollTop: offset - scrollspy.options.scrollOffset,
-                        duration: 400,
-                        easing: 'easeOutCubic'
-                    });
+                    scrollspy.el.scrollIntoView({ behavior: 'smooth' });
                     break;
                 }
             }
@@ -6254,15 +4874,11 @@ exports.FormSelect = FormSelect;
 /*!************************!*\
   !*** ./src/sidenav.ts ***!
   \************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Sidenav = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 const _defaults = {
@@ -6406,24 +5022,17 @@ class Sidenav extends component_1.Component {
             }
             // Handle fixed Sidenav
             if (this._isCurrentlyFixed()) {
-                animejs_1.default.remove(this.el);
-                (0, animejs_1.default)({
-                    targets: this.el,
-                    translateX: 0,
-                    duration: 0,
-                    easing: 'easeOutQuad'
-                });
+                // Show if fixed
+                this.el.style.transform = 'translateX(0)';
                 this._enableBodyScrolling();
                 this._overlay.style.display = 'none';
             }
             // Handle non-fixed Sidenav
             else {
-                if (this.options.preventScrolling) {
+                if (this.options.preventScrolling)
                     this._preventBodyScrolling();
-                }
-                if (!this.isDragged || this.percentOpen != 1) {
+                if (!this.isDragged || this.percentOpen != 1)
                     this._animateIn();
-                }
             }
         };
         /**
@@ -6556,8 +5165,6 @@ class Sidenav extends component_1.Component {
         this._overlay.style.display = 'block';
         this._initialScrollTop = this.isOpen ? this.el.scrollTop : utils_1.Utils.getDocumentScrollTop();
         this._verticallyScrolling = false;
-        animejs_1.default.remove(this.el);
-        animejs_1.default.remove(this._overlay);
     }
     //Set variables needed at each drag move update tick
     _dragMoveUpdate(e) {
@@ -6605,6 +5212,10 @@ class Sidenav extends component_1.Component {
         this._animateSidenavIn();
         this._animateOverlayIn();
     }
+    _animateOut() {
+        this._animateSidenavOut();
+        this._animateOverlayOut();
+    }
     _animateSidenavIn() {
         let slideOutPercent = this.options.edge === 'left' ? -1 : 1;
         if (this.isDragged) {
@@ -6613,39 +5224,19 @@ class Sidenav extends component_1.Component {
                     ? slideOutPercent + this.percentOpen
                     : slideOutPercent - this.percentOpen;
         }
-        animejs_1.default.remove(this.el);
-        (0, animejs_1.default)({
-            targets: this.el,
-            translateX: [`${slideOutPercent * 100}%`, 0],
-            duration: this.options.inDuration,
-            easing: 'easeOutQuad',
-            complete: () => {
-                // Run onOpenEnd callback
-                if (typeof this.options.onOpenEnd === 'function') {
-                    this.options.onOpenEnd.call(this, this.el);
-                }
-            }
-        });
-    }
-    _animateOverlayIn() {
-        let start = 0;
-        if (this.isDragged) {
-            start = this.percentOpen;
-        }
-        else {
-            this._overlay.style.display = 'block';
-        }
-        animejs_1.default.remove(this._overlay);
-        (0, animejs_1.default)({
-            targets: this._overlay,
-            opacity: [start, 1],
-            duration: this.options.inDuration,
-            easing: 'easeOutQuad'
-        });
-    }
-    _animateOut() {
-        this._animateSidenavOut();
-        this._animateOverlayOut();
+        const duration = this.options.inDuration;
+        // from
+        this.el.style.transition = 'none';
+        this.el.style.transform = 'translateX(' + (slideOutPercent * 100) + '%)';
+        setTimeout(() => {
+            this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+            // to
+            this.el.style.transform = 'translateX(0)';
+        }, 1);
+        setTimeout(() => {
+            if (typeof this.options.onOpenEnd === 'function')
+                this.options.onOpenEnd.call(this, this.el);
+        }, duration);
     }
     _animateSidenavOut() {
         const endPercent = this.options.edge === 'left' ? -1 : 1;
@@ -6656,31 +5247,42 @@ class Sidenav extends component_1.Component {
                     ? endPercent + this.percentOpen
                     : endPercent - this.percentOpen;
         }
-        animejs_1.default.remove(this.el);
-        (0, animejs_1.default)({
-            targets: this.el,
-            translateX: [`${slideOutPercent * 100}%`, `${endPercent * 105}%`],
-            duration: this.options.outDuration,
-            easing: 'easeOutQuad',
-            complete: () => {
-                // Run onOpenEnd callback
-                if (typeof this.options.onCloseEnd === 'function') {
-                    this.options.onCloseEnd.call(this, this.el);
-                }
-            }
-        });
+        const duration = this.options.outDuration;
+        this.el.style.transition = `transform ${duration}ms ease`; // easeOutQuad
+        // to
+        this.el.style.transform = 'translateX(' + (endPercent * 100) + '%)';
+        setTimeout(() => {
+            if (typeof this.options.onCloseEnd === 'function')
+                this.options.onCloseEnd.call(this, this.el);
+        }, duration);
+    }
+    _animateOverlayIn() {
+        let start = 0;
+        if (this.isDragged)
+            start = this.percentOpen;
+        else
+            this._overlay.style.display = 'block';
+        // Animation
+        const duration = this.options.inDuration;
+        // from
+        this._overlay.style.transition = 'none';
+        this._overlay.style.opacity = start.toString();
+        // easeOutQuad
+        setTimeout(() => {
+            this._overlay.style.transition = `opacity ${duration}ms ease`;
+            // to
+            this._overlay.style.opacity = '1';
+        }, 1);
     }
     _animateOverlayOut() {
-        animejs_1.default.remove(this._overlay);
-        (0, animejs_1.default)({
-            targets: this._overlay,
-            opacity: 0,
-            duration: this.options.outDuration,
-            easing: 'easeOutQuad',
-            complete: () => {
-                this._overlay.style.display = 'none';
-            }
-        });
+        const duration = this.options.outDuration;
+        // easeOutQuad
+        this._overlay.style.transition = `opacity ${duration}ms ease`;
+        // to
+        this._overlay.style.opacity = '0';
+        setTimeout(() => {
+            this._overlay.style.display = 'none';
+        }, duration);
     }
 }
 exports.Sidenav = Sidenav;
@@ -6695,15 +5297,11 @@ exports.Sidenav = Sidenav;
 /*!***********************!*\
   !*** ./src/slider.ts ***!
   \***********************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Slider = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 let _defaults = {
@@ -6850,32 +5448,11 @@ class Slider extends component_1.Component {
             this._slides[0].style.visibility = 'visible';
             this._activeSlide = this._slides[0];
             this._animateSlide(this._slides[0], true);
-            /*anim({
-              targets: this._slides[0],
-              opacity: 1,
-              duration: this.options.duration,
-              easing: 'easeOutQuad'
-            });
-            */
             // Update indicators
             if (this.options.indicators) {
                 this._indicators[this.activeIndex].children[0].classList.add('active');
             }
         }
-        // Adjust height to current slide
-        // TODO: ??? Code does not do what it says in comment
-        /*
-        this._activeSlide.querySelectorAll('img').forEach(el => {
-          anim({
-            targets: this._activeSlide.querySelector('.caption'),
-            opacity: 1,
-            translateX: 0,
-            translateY: 0,
-            duration: this.options.duration,
-            easing: 'easeOutQuad'
-          });
-        });
-        */
         this._setupEventHandlers();
         // auto scroll
         this.start();
@@ -6932,12 +5509,14 @@ class Slider extends component_1.Component {
     }
     _animateSlide(slide, isDirectionIn) {
         let dx = 0, dy = 0;
-        (0, animejs_1.default)({
-            targets: slide,
-            opacity: isDirectionIn ? [0, 1] : [1, 0],
-            duration: this.options.duration,
-            easing: 'easeOutQuad'
-        });
+        // from
+        slide.style.opacity = isDirectionIn ? '0' : '1';
+        setTimeout(() => {
+            slide.style.transition = `opacity ${this.options.duration}ms ease`;
+            // to
+            slide.style.opacity = isDirectionIn ? '1' : '0';
+        }, 1);
+        // Caption
         const caption = slide.querySelector('.caption');
         if (!caption)
             return;
@@ -6947,15 +5526,15 @@ class Slider extends component_1.Component {
             dx = 100;
         else if (caption.classList.contains('left-align'))
             dx = -100;
-        (0, animejs_1.default)({
-            targets: caption,
-            opacity: isDirectionIn ? [0, 1] : [1, 0],
-            translateX: isDirectionIn ? [dx, 0] : [0, dx],
-            translateY: isDirectionIn ? [dy, 0] : [0, dy],
-            duration: this.options.duration,
-            delay: this.options.duration,
-            easing: 'easeOutQuad'
-        });
+        // from
+        caption.style.opacity = isDirectionIn ? '0' : '1';
+        caption.style.transform = isDirectionIn ? `translate(${dx}px, ${dy}px)` : `translate(0, 0)`;
+        setTimeout(() => {
+            caption.style.transition = `opacity ${this.options.duration}ms ease, transform ${this.options.duration}ms ease`;
+            // to
+            caption.style.opacity = isDirectionIn ? '1' : '0';
+            caption.style.transform = isDirectionIn ? `translate(0, 0)` : `translate(${dx}px, ${dy}px)`;
+        }, this.options.duration); // delay
     }
     _setSliderHeight() {
         // If fullscreen, do nothing
@@ -7007,29 +5586,17 @@ class Slider extends component_1.Component {
         // Enables every slide
         this._slides.forEach(slide => slide.style.visibility = 'visible');
         //--- Hide active Slide + Caption
-        // TODO: What does this do?
-        (0, animejs_1.default)({
-            targets: this._activeSlide,
-            opacity: 0,
-            duration: this.options.duration,
-            easing: 'easeOutQuad',
-            complete: () => {
-                this._slides.forEach(el => {
-                    if (el.classList.contains('active'))
-                        return;
-                    (0, animejs_1.default)({
-                        targets: el,
-                        opacity: 0,
-                        translateX: 0,
-                        translateY: 0,
-                        duration: 0,
-                        easing: 'easeOutQuad'
-                    });
-                    // Disables invisible slides (for assistive technologies)
-                    el.style.visibility = 'hidden';
-                });
-            }
-        });
+        this._activeSlide.style.opacity = '0';
+        setTimeout(() => {
+            this._slides.forEach(slide => {
+                if (slide.classList.contains('active'))
+                    return;
+                slide.style.opacity = '0';
+                slide.style.transform = 'translate(0, 0)';
+                // Disables invisible slides (for assistive technologies)
+                slide.style.visibility = 'hidden';
+            });
+        }, this.options.duration);
         // Hide active Caption
         //this._animateCaptionIn(_caption, this.options.duration);
         _caption.style.opacity = '0';
@@ -7047,13 +5614,6 @@ class Slider extends component_1.Component {
         //--- Show new Slide + Caption
         this._animateSlide(this._slides[index], true);
         this._slides[index].classList.add('active');
-        // TODO: Why focus? => causes uncontrollable page scroll
-        /*
-        if (this._focusCurrent) {
-          this._slides[index].focus();
-          this._focusCurrent = false;
-        }
-        */
         this.activeIndex = index;
         // Reset interval, if allowed. This check prevents autostart
         // when slider is paused, since it can be changed though indicators.
@@ -7076,15 +5636,11 @@ exports.Slider = Slider;
 /*!*********************!*\
   !*** ./src/tabs.ts ***!
   \*********************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Tabs = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const carousel_1 = __webpack_require__(/*! ./carousel */ "./src/carousel.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 ;
@@ -7325,25 +5881,17 @@ class Tabs extends component_1.Component {
     }
     _animateIndicator(prevIndex) {
         let leftDelay = 0, rightDelay = 0;
-        if (this._index - prevIndex >= 0)
+        const isMovingLeftOrStaying = (this._index - prevIndex >= 0);
+        if (isMovingLeftOrStaying)
             leftDelay = 90;
         else
             rightDelay = 90;
-        const animOptions = {
-            targets: this._indicator,
-            left: {
-                value: this._calcLeftPos(this._activeTabLink),
-                delay: leftDelay
-            },
-            right: {
-                value: this._calcRightPos(this._activeTabLink),
-                delay: rightDelay
-            },
-            duration: this.options.duration,
-            easing: 'easeOutQuad'
-        };
-        animejs_1.default.remove(this._indicator);
-        (0, animejs_1.default)(animOptions);
+        // in v1: easeOutQuad
+        this._indicator.style.transition = `
+      left ${this.options.duration}ms ease-out ${leftDelay}ms,
+      right ${this.options.duration}ms ease-out ${rightDelay}ms`;
+        this._indicator.style.left = this._calcLeftPos(this._activeTabLink) + 'px';
+        this._indicator.style.right = this._calcRightPos(this._activeTabLink) + 'px';
     }
     /**
      * Show tab content that corresponds to the tab with the id.
@@ -8198,15 +6746,11 @@ exports.Timepicker = Timepicker;
 /*!***********************!*\
   !*** ./src/toasts.ts ***!
   \***********************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Toast = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 let _defaults = {
     text: '',
     displayLength: 4000,
@@ -8323,7 +6867,9 @@ class Toast {
         }
     }
     _createToast() {
-        const toast = document.createElement('div');
+        const toast = this.options.toastId
+            ? document.getElementById(this.options.toastId)
+            : document.createElement('div');
         toast.classList.add('toast');
         toast.setAttribute('role', 'alert');
         toast.setAttribute('aria-live', 'assertive');
@@ -8332,22 +6878,24 @@ class Toast {
         if (this.options.classes.length > 0) {
             toast.classList.add(...this.options.classes.split(' '));
         }
-        // Set text content
-        else
+        if (this.message)
             toast.innerText = this.message;
-        // Append toast
         Toast._container.appendChild(toast);
         return toast;
     }
     _animateIn() {
         // Animate toast in
-        (0, animejs_1.default)({
-            targets: this.el,
-            top: 0,
-            opacity: 1,
-            duration: this.options.inDuration,
-            easing: 'easeOutCubic'
-        });
+        this.el.style.display = "";
+        this.el.style.opacity = '0';
+        // easeOutCubic
+        this.el.style.transition = `
+      top ${this.options.inDuration}ms ease,
+      opacity ${this.options.inDuration}ms ease
+    `;
+        setTimeout(() => {
+            this.el.style.top = '0';
+            this.el.style.opacity = '1';
+        }, 1);
     }
     /**
      * Create setInterval which automatically removes toast when timeRemaining >= 0
@@ -8378,25 +6926,28 @@ class Toast {
             this.el.style.transform = `translateX(${activationDistance}px)`;
             this.el.style.opacity = '0';
         }
-        (0, animejs_1.default)({
-            targets: this.el,
-            opacity: 0,
-            marginTop: -40,
-            duration: this.options.outDuration,
-            easing: 'easeOutExpo',
-            complete: () => {
-                // Call the optional callback
-                if (typeof this.options.completeCallback === 'function') {
-                    this.options.completeCallback();
-                }
-                // Remove toast from DOM
+        // easeOutExpo
+        this.el.style.transition = `
+      margin ${this.options.outDuration}ms ease,
+      opacity ${this.options.outDuration}ms ease`;
+        setTimeout(() => {
+            this.el.style.opacity = '0';
+            this.el.style.marginTop = '-40px';
+        }, 1);
+        setTimeout(() => {
+            // Call the optional callback
+            if (typeof this.options.completeCallback === 'function') {
+                this.options.completeCallback();
+            }
+            // Remove toast from DOM
+            if (!this.options.toastId) {
                 this.el.remove();
                 Toast._toasts.splice(Toast._toasts.indexOf(this), 1);
                 if (Toast._toasts.length === 0) {
                     Toast._removeContainer();
                 }
             }
-        });
+        }, this.options.outDuration);
     }
 }
 exports.Toast = Toast;
@@ -8413,15 +6964,11 @@ exports.Toast = Toast;
 /*!************************!*\
   !*** ./src/tooltip.ts ***!
   \************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Tooltip = void 0;
-const animejs_1 = __importDefault(__webpack_require__(/*! animejs */ "./node_modules/animejs/lib/anime.es.js"));
 const utils_1 = __webpack_require__(/*! ./utils */ "./src/utils.ts");
 const component_1 = __webpack_require__(/*! ./component */ "./src/component.ts");
 const _defaults = {
@@ -8621,26 +7168,37 @@ class Tooltip extends component_1.Component {
     _animateIn() {
         this._positionTooltip();
         this.tooltipEl.style.visibility = 'visible';
-        animejs_1.default.remove(this.tooltipEl);
-        (0, animejs_1.default)({
-            targets: this.tooltipEl,
-            opacity: this.options.opacity || 1,
-            translateX: this.xMovement,
-            translateY: this.yMovement,
-            duration: this.options.inDuration,
-            easing: 'easeOutCubic'
-        });
+        const duration = this.options.inDuration;
+        // easeOutCubic
+        this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+        setTimeout(() => {
+            this.tooltipEl.style.transform = `translateX(${this.xMovement}px) translateY(${this.yMovement}px)`;
+            this.tooltipEl.style.opacity = (this.options.opacity || 1).toString();
+        }, 1);
     }
     _animateOut() {
-        animejs_1.default.remove(this.tooltipEl);
-        (0, animejs_1.default)({
-            targets: this.tooltipEl,
-            opacity: 0,
-            translateX: 0,
-            translateY: 0,
-            duration: this.options.outDuration,
-            easing: 'easeOutCubic'
+        const duration = this.options.outDuration;
+        // easeOutCubic
+        this.tooltipEl.style.transition = `
+      transform ${duration}ms ease-out,
+      opacity ${duration}ms ease-out`;
+        setTimeout(() => {
+            this.tooltipEl.style.transform = `translateX(0px) translateY(0px)`;
+            this.tooltipEl.style.opacity = '0';
+        }, 1);
+        /*
+        anim.remove(this.tooltipEl);
+        anim({
+          targets: this.tooltipEl,
+          opacity: 0,
+          translateX: 0,
+          translateY: 0,
+          duration: this.options.outDuration,
+          easing: 'easeOutCubic'
         });
+        */
     }
     _getAttributeOptions() {
         let attributeOptions = {};
@@ -8993,42 +7551,13 @@ exports.Waves = Waves;
 /******/ 		};
 /******/ 	
 /******/ 		// Execute the module function
-/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
 /******/ 	
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
 /******/ 	
 /************************************************************************/
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
 var __webpack_exports__ = {};
 // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 (() => {
@@ -9112,7 +7641,7 @@ class M {
     }
 }
 exports.M = M;
-M.version = '2.0.3-beta';
+M.version = '2.0.3';
 M.Autocomplete = autocomplete_1.Autocomplete;
 M.Tabs = tabs_1.Tabs;
 M.Carousel = carousel_1.Carousel;