@animini/core - npm Package Compare versions

Comparing version 0.0.6 to 0.1.0

algorithms/dist/animini-core-algorithms.cjs.dev.js

@@ -5,8 +5,155 @@ 'use strict';
 
-var lerp = require('../../dist/lerp-1e77081f.cjs.dev.js');
-require('memoize-one');
+var lerp = require('../../dist/lerp-d42f3733.cjs.dev.js');
 
+const NEWTON_ITERATIONS = 4;
+const NEWTON_MIN_SLOPE = 0.001;
+const SUBDIVISION_PRECISION = 0.0000001;
+const SUBDIVISION_MAX_ITERATIONS = 10;
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
 
+const A = (aA1, aA2) => 1.0 - 3.0 * aA2 + 3.0 * aA1;
 
+const B = (aA1, aA2) => 3.0 * aA2 - 6.0 * aA1;
+
+const C = aA1 => 3.0 * aA1;
+
+const calcBezier = (aT, aA1, aA2) => {
+  return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+};
+
+const getSlope = (aT, aA1, aA2) => {
+  return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+};
+
+const binarySubdivide = (aX, aA, aB, mX1, mX2) => {
+  let 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) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+
+  return currentT;
+};
+
+const newtonRaphsonIterate = (aX, aGuessT, mX1, mX2) => {
+  for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+    const currentSlope = getSlope(aGuessT, mX1, mX2);
+
+    if (currentSlope === 0.0) {
+      return aGuessT;
+    }
+
+    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+
+  return aGuessT;
+};
+
+const LinearEasing = x => {
+  return x;
+};
+
+const bezier = (mX1, mY1, mX2, mY2) => {
+  if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+    throw new Error('bezier x values must be in [0, 1] range');
+  }
+
+  if (mX1 === mY1 && mX2 === mY2) {
+    return LinearEasing;
+  }
+
+  const sampleValues = new Float32Array(kSplineTableSize);
+
+  for (let i = 0; i < kSplineTableSize; ++i) {
+    sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+  }
+
+  const getTForX = aX => {
+    let intervalStart = 0.0;
+    let currentSample = 1;
+    let lastSample = kSplineTableSize - 1;
+
+    for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+      intervalStart += kSampleStepSize;
+    }
+
+    --currentSample;
+    const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * kSampleStepSize;
+    const initialSlope = getSlope(guessForT, mX1, mX2);
+
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+    } else if (initialSlope === 0.0) {
+      return guessForT;
+    } else {
+      return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+    }
+  };
+
+  return x => {
+    if (x === 0 || x === 1) {
+      return x;
+    }
+
+    return calcBezier(getTForX(x), mY1, mY2);
+  };
+};
+function ease(duration, [m1X, m1Y, m2X, m2Y] = [0.25, 0.1, 0.25, 1]) {
+  const bezierCurve = bezier(m1X, m1Y, m2X, m2Y);
+  return {
+    update(a) {
+      const t = Math.min(1, a.time.elapsed / duration);
+      const p = bezierCurve(t);
+      return lerp.lerp$1(a.from, a.to, p);
+    }
+
+  };
+}
+
+function inertia({
+  momentum = 0.998,
+  velocity,
+  min = -Infinity,
+  max = Infinity,
+  rubberband = 0.15
+} = {}) {
+  const springEase = lerp.spring();
+  return {
+    wanders: true,
+
+    update(a) {
+      const v0 = velocity !== null && velocity !== void 0 ? velocity : a.startVelocity;
+      if (!v0) return a.value;
+
+      if (a.value < min || a.value > max) {
+        a.start(a.value < min ? min : max, {
+          immediate: false,
+          easing: springEase
+        });
+        return a.update();
+      }
+
+      const e = Math.exp(-(1 - momentum) * a.time.elapsed);
+      const value = a.from + v0 / (1 - momentum) * (1 - e);
+      return lerp.rubberbandIfOutOfBounds(value, min, max, rubberband);
+    }
+
+  };
+}
+
 exports.lerp = lerp.lerp;
 exports.spring = lerp.spring;
+exports.ease = ease;
+exports.inertia = inertia;

algorithms/dist/animini-core-algorithms.cjs.prod.js

@@ -5,8 +5,155 @@ 'use strict';
 
-var lerp = require('../../dist/lerp-a02113f7.cjs.prod.js');
-require('memoize-one');
+var lerp = require('../../dist/lerp-65d16c52.cjs.prod.js');
 
+const NEWTON_ITERATIONS = 4;
+const NEWTON_MIN_SLOPE = 0.001;
+const SUBDIVISION_PRECISION = 0.0000001;
+const SUBDIVISION_MAX_ITERATIONS = 10;
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
 
+const A = (aA1, aA2) => 1.0 - 3.0 * aA2 + 3.0 * aA1;
 
+const B = (aA1, aA2) => 3.0 * aA2 - 6.0 * aA1;
+
+const C = aA1 => 3.0 * aA1;
+
+const calcBezier = (aT, aA1, aA2) => {
+  return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+};
+
+const getSlope = (aT, aA1, aA2) => {
+  return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+};
+
+const binarySubdivide = (aX, aA, aB, mX1, mX2) => {
+  let 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) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+
+  return currentT;
+};
+
+const newtonRaphsonIterate = (aX, aGuessT, mX1, mX2) => {
+  for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+    const currentSlope = getSlope(aGuessT, mX1, mX2);
+
+    if (currentSlope === 0.0) {
+      return aGuessT;
+    }
+
+    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+
+  return aGuessT;
+};
+
+const LinearEasing = x => {
+  return x;
+};
+
+const bezier = (mX1, mY1, mX2, mY2) => {
+  if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+    throw new Error('bezier x values must be in [0, 1] range');
+  }
+
+  if (mX1 === mY1 && mX2 === mY2) {
+    return LinearEasing;
+  }
+
+  const sampleValues = new Float32Array(kSplineTableSize);
+
+  for (let i = 0; i < kSplineTableSize; ++i) {
+    sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+  }
+
+  const getTForX = aX => {
+    let intervalStart = 0.0;
+    let currentSample = 1;
+    let lastSample = kSplineTableSize - 1;
+
+    for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+      intervalStart += kSampleStepSize;
+    }
+
+    --currentSample;
+    const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * kSampleStepSize;
+    const initialSlope = getSlope(guessForT, mX1, mX2);
+
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+    } else if (initialSlope === 0.0) {
+      return guessForT;
+    } else {
+      return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+    }
+  };
+
+  return x => {
+    if (x === 0 || x === 1) {
+      return x;
+    }
+
+    return calcBezier(getTForX(x), mY1, mY2);
+  };
+};
+function ease(duration, [m1X, m1Y, m2X, m2Y] = [0.25, 0.1, 0.25, 1]) {
+  const bezierCurve = bezier(m1X, m1Y, m2X, m2Y);
+  return {
+    update(a) {
+      const t = Math.min(1, a.time.elapsed / duration);
+      const p = bezierCurve(t);
+      return lerp.lerp$1(a.from, a.to, p);
+    }
+
+  };
+}
+
+function inertia({
+  momentum = 0.998,
+  velocity,
+  min = -Infinity,
+  max = Infinity,
+  rubberband = 0.15
+} = {}) {
+  const springEase = lerp.spring();
+  return {
+    wanders: true,
+
+    update(a) {
+      const v0 = velocity !== null && velocity !== void 0 ? velocity : a.startVelocity;
+      if (!v0) return a.value;
+
+      if (a.value < min || a.value > max) {
+        a.start(a.value < min ? min : max, {
+          immediate: false,
+          easing: springEase
+        });
+        return a.update();
+      }
+
+      const e = Math.exp(-(1 - momentum) * a.time.elapsed);
+      const value = a.from + v0 / (1 - momentum) * (1 - e);
+      return lerp.rubberbandIfOutOfBounds(value, min, max, rubberband);
+    }
+
+  };
+}
+
 exports.lerp = lerp.lerp;
 exports.spring = lerp.spring;
+exports.ease = ease;
+exports.inertia = inertia;

algorithms/dist/animini-core-algorithms.esm.js

@@ -1,2 +0,152 @@
-export { l as lerp, s as spring } from '../../dist/lerp-9e8b14d6.esm.js';
-import 'memoize-one';
+import { a as lerp, r as rubberbandIfOutOfBounds, s as spring } from '../../dist/lerp-cd1f0aee.esm.js';
+export { l as lerp, s as spring } from '../../dist/lerp-cd1f0aee.esm.js';
+
+const NEWTON_ITERATIONS = 4;
+const NEWTON_MIN_SLOPE = 0.001;
+const SUBDIVISION_PRECISION = 0.0000001;
+const SUBDIVISION_MAX_ITERATIONS = 10;
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+
+const A = (aA1, aA2) => 1.0 - 3.0 * aA2 + 3.0 * aA1;
+
+const B = (aA1, aA2) => 3.0 * aA2 - 6.0 * aA1;
+
+const C = aA1 => 3.0 * aA1;
+
+const calcBezier = (aT, aA1, aA2) => {
+  return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT;
+};
+
+const getSlope = (aT, aA1, aA2) => {
+  return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1);
+};
+
+const binarySubdivide = (aX, aA, aB, mX1, mX2) => {
+  let 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) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+
+  return currentT;
+};
+
+const newtonRaphsonIterate = (aX, aGuessT, mX1, mX2) => {
+  for (let i = 0; i < NEWTON_ITERATIONS; ++i) {
+    const currentSlope = getSlope(aGuessT, mX1, mX2);
+
+    if (currentSlope === 0.0) {
+      return aGuessT;
+    }
+
+    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
+  }
+
+  return aGuessT;
+};
+
+const LinearEasing = x => {
+  return x;
+};
+
+const bezier = (mX1, mY1, mX2, mY2) => {
+  if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
+    throw new Error('bezier x values must be in [0, 1] range');
+  }
+
+  if (mX1 === mY1 && mX2 === mY2) {
+    return LinearEasing;
+  }
+
+  const sampleValues = new Float32Array(kSplineTableSize);
+
+  for (let i = 0; i < kSplineTableSize; ++i) {
+    sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+  }
+
+  const getTForX = aX => {
+    let intervalStart = 0.0;
+    let currentSample = 1;
+    let lastSample = kSplineTableSize - 1;
+
+    for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+      intervalStart += kSampleStepSize;
+    }
+
+    --currentSample;
+    const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * kSampleStepSize;
+    const initialSlope = getSlope(guessForT, mX1, mX2);
+
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+    } else if (initialSlope === 0.0) {
+      return guessForT;
+    } else {
+      return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+    }
+  };
+
+  return x => {
+    if (x === 0 || x === 1) {
+      return x;
+    }
+
+    return calcBezier(getTForX(x), mY1, mY2);
+  };
+};
+function ease(duration, [m1X, m1Y, m2X, m2Y] = [0.25, 0.1, 0.25, 1]) {
+  const bezierCurve = bezier(m1X, m1Y, m2X, m2Y);
+  return {
+    update(a) {
+      const t = Math.min(1, a.time.elapsed / duration);
+      const p = bezierCurve(t);
+      return lerp(a.from, a.to, p);
+    }
+
+  };
+}
+
+function inertia({
+  momentum = 0.998,
+  velocity,
+  min = -Infinity,
+  max = Infinity,
+  rubberband = 0.15
+} = {}) {
+  const springEase = spring();
+  return {
+    wanders: true,
+
+    update(a) {
+      const v0 = velocity !== null && velocity !== void 0 ? velocity : a.startVelocity;
+      if (!v0) return a.value;
+
+      if (a.value < min || a.value > max) {
+        a.start(a.value < min ? min : max, {
+          immediate: false,
+          easing: springEase
+        });
+        return a.update();
+      }
+
+      const e = Math.exp(-(1 - momentum) * a.time.elapsed);
+      const value = a.from + v0 / (1 - momentum) * (1 - e);
+      return rubberbandIfOutOfBounds(value, min, max, rubberband);
+    }
+
+  };
+}
+
+export { ease, inertia };

CHANGELOG.md

 # @animini/core
 
+## 0.1.0
+
+### Minor Changes
+
+- b442912: - typescript
+  - promise-based
+  - added api.stop
+  - ability to change algorithm per animation call
+  - added ease algorithm
+  - added inertia algorithm
+  - improved color parsing for dom
+  - improved color parsing for three
+  - unit support for dom
+
 ## 0.0.6
@@ -4,0 +18,0 @@

dist/animini-core.cjs.dev.js

@@ -6,190 +6,227 @@ 'use strict';
 var react = require('react');
-var lerp = require('./lerp-1e77081f.cjs.dev.js');
-require('memoize-one');
+var lerp = require('./lerp-d42f3733.cjs.dev.js');
 
-function AnimatedValue(parent, index) {
-  this.distance = this.velocity = 0;
-  this.idle = true;
-  this.parent = parent;
-  this.index = index;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
 }
-AnimatedValue.prototype = {
-  get fn() {
-    return this.parent.fn;
-  },
 
-  get config() {
-    return this.parent.config;
-  },
+class AnimatedValue {
+  constructor(parent, index) {
+    _defineProperty(this, "precision", 1);
 
+    _defineProperty(this, "idle", true);
+
+    _defineProperty(this, "distance", 0);
+
+    _defineProperty(this, "velocity", 0);
+
+    this.parent = parent;
+    this.index = index;
+  }
+
   get time() {
     return this.parent.time;
-  },
+  }
 
-  get target() {
-    return this.index !== -1 ? this.parent.target[this.index] : this.parent.target;
-  },
-
   get value() {
-    return this.index !== -1 ? this.parent._value[this.index] : this.parent._value;
-  },
+    return this.index !== -1 ? this.parent.value[this.index] : this.parent.value;
+  }
 
   set value(value) {
-    this.index !== -1 ? this.parent._value[this.index] = value : this.parent._value = value;
+    this.index !== -1 ? this.parent.value[this.index] = value : this.parent.value = value;
   }
 
-};
+  start(to, config) {
+    this.config = config;
+    this.from = this.value;
+    this.to = this.index === -1 ? to : to[this.index];
+    this.distance = this.to - this.from;
+    this.startVelocity = this.velocity;
+    this.idle = config.immediate && this.to === this.value;
+    this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
+  }
 
-AnimatedValue.prototype.start = function () {
-  this.previousValue = this.value;
-  this.idle = this.target === this.value;
-  this.startVelocity = this.velocity;
+  update() {
+    if (this.idle) return this.value;
+    this.previousValue = this.value;
+    this.value = this.config.immediate ? this.to : this.config.easing.update(this);
+    this.velocity = (this.value - this.previousValue) / this.time.delta;
 
-  if (this.config.immediate) {
-    this.value = this.target;
-  } else if (!this.idle) {
-    this.distance = this.target - this.value;
-    this.precision = Math.min(1, Math.abs(this.distance) * 0.001);
+    if (this.to === this.value) {
+      this.idle = true;
+      return this.value;
+    }
+
+    const isMoving = Math.abs(this.velocity) > this.precision;
+
+    if (!isMoving) {
+      if (!this.config.easing.wanders) {
+        const isTravelling = Math.abs(this.to - this.value) > this.precision;
+
+        if (!isTravelling) {
+          this.idle = true;
+          this.value = this.to;
+        }
+      } else {
+        this.idle = true;
+      }
+    }
+
+    return this.value;
   }
-};
 
-AnimatedValue.prototype.update = function () {
-  if (this.idle) return;
+}
 
-  if (this.value === this.target) {
-    this.idle = true;
-    return;
+function equal(v0, v1) {
+  if (Array.isArray(v0)) {
+    return v0.every((val, index) => val === v1[index]);
   }
 
-  this.previousValue = this.value;
-  this.value = this.fn();
-  this.velocity = (this.value - this.previousValue) / this.time.delta;
-  const isMoving = Math.abs(this.velocity) > this.precision;
-  const isTravelling = Math.abs(this.target - this.value) > this.precision;
-  this.idle = !isMoving && !isTravelling;
-  if (this.idle) this.value = this.target;
-};
+  return v0 === v1;
+}
+function each(array, iterator) {
+  if (Array.isArray(array)) {
+    for (let i = 0; i < array.length; i++) iterator(array[i], i);
+  } else {
+    iterator(array, -1);
+  }
+}
+function map(obj, iterator) {
+  if (typeof obj === 'object') {
+    if (Array.isArray(obj)) {
+      return obj.map(iterator);
+    }
 
-function Animated(value, fn, adapter, loop) {
-  this.config = {};
-  this.time = {};
-  this.loop = loop;
-  this.adapter = adapter;
-  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
-  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
-  this._movingChildren = 0;
-  this.setFn(fn);
-  this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
-  this.children = lerp.map(this._value, (_v, i) => new AnimatedValue(this, i));
+    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  }
+
+  return iterator(obj, -1);
 }
-Animated.prototype = {
-  get idle() {
-    return this._movingChildren <= 0;
-  },
 
-  get value() {
-    var _this$adapter;
+function now() {
+  return typeof performance != 'undefined' ? performance.now() : Date.now();
+}
 
-    return (_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.format ? this.adapter.format(this._value) : this._value;
-  }
+class FrameLoop {
+  constructor() {
+    _defineProperty(this, "rafId", 0);
 
-};
+    _defineProperty(this, "running", false);
 
-Animated.prototype.setFn = function (fn = lerp.lerp) {
-  this.fn = fn.update;
-  if (fn.setup) this.setup = fn.setup;
-  if (fn.memo) this.memo = fn.memo();
-};
+    _defineProperty(this, "queue", new Set());
 
-Animated.prototype.start = function (target, config = {}) {
-  this.time.elapsed = 0;
-  this.target = this.parse ? this.parse(target) : target;
-  this._movingChildren = 0;
-  this.config = config;
+    _defineProperty(this, "time", {});
+  }
 
-  if (!this.config.immediate) {
-    this.setup && this.setup();
+  tick() {
+    if (!this.running) return;
+    this.update();
+    this.rafId = window.requestAnimationFrame(this.tick.bind(this));
   }
 
-  lerp.each(this.children, child => {
-    child.start();
-    if (!child.idle) this._movingChildren++;
-  });
-};
+  update() {
+    this.updateTime();
+    this.queue.forEach(cb => cb());
+  }
 
-Animated.prototype.update = function () {
-  this.time.elapsed += this.loop.time.delta;
-  this.time.delta = this.loop.time.delta;
-  lerp.each(this.children, child => {
-    if (!child.idle) {
-      child.update();
-      if (child.idle) this._movingChildren--;
+  run() {
+    if (!this.running) {
+      this.time = {
+        start: now(),
+        elapsed: 0,
+        delta: 0,
+        _elapsed: 0
+      };
+      this.running = true;
+      this.rafId = window.requestAnimationFrame(this.tick.bind(this));
     }
-  });
-};
+  }
 
-function now() {
-  return typeof performance != 'undefined' ? performance.now() : Date.now();
-}
+  start(cb) {
+    this.queue.add(cb);
+    this.run();
+  }
 
-function FrameLoop() {
-  this.rafId = 0;
-  this.running = false;
-  this.queue = new Set();
-  this.time = {};
-}
+  stop(cb) {
+    if (!cb) return;
+    this.queue.delete(cb);
+    if (!this.queue.size) this.stopAll();
+  }
 
-FrameLoop.prototype.tick = function () {
-  if (!this.running) return;
-  this.update();
-  this.rafId = window.requestAnimationFrame(this.tick.bind(this));
-};
+  stopAll() {
+    this.rafId && window.cancelAnimationFrame(this.rafId);
+    this.running = false;
+  }
 
-FrameLoop.prototype.update = function () {
-  this.updateTime();
-  this.queue.forEach(cb => cb());
-};
+  updateTime() {
+    const ts = now();
 
-FrameLoop.prototype.run = function () {
-  if (!this.running) {
-    this.time = {
-      start: now(),
-      elapsed: 0,
-      delta: 0,
-      _elapsed: 0
-    };
-    this.running = true;
-    this.tick();
+    const _elapsed = ts - this.time.start;
+
+    this.time.delta = Math.max(1, Math.min(64, _elapsed - this.time._elapsed));
+    this.time._elapsed = _elapsed;
+    this.time.elapsed += this.time.delta;
   }
-};
 
-FrameLoop.prototype.start = function (cb) {
-  this.queue.add(cb);
-  this.run();
-};
+}
+const GlobalLoop = new FrameLoop();
 
-FrameLoop.prototype.stop = function (cb) {
-  if (!cb) return;
-  this.queue.delete(cb);
-  if (!this.queue.size) this.stopAll();
-};
+const defaultLerp = lerp.lerp();
+class Animated {
+  constructor(value, loop = GlobalLoop) {
+    _defineProperty(this, "time", {});
 
-FrameLoop.prototype.stopAll = function () {
-  this.rafId && window.cancelAnimationFrame(this.rafId);
-  this.running = false;
-};
+    _defineProperty(this, "_movingChildren", 0);
 
-FrameLoop.prototype.updateTime = function () {
-  const ts = now();
+    this.value = value;
+    this.loop = loop;
+    this.children = map(value, (_v, i) => {
+      return new AnimatedValue(this, i);
+    });
+  }
 
-  const _elapsed = ts - this.time.start;
+  get idle() {
+    return this._movingChildren <= 0;
+  }
 
-  this.time.delta = Math.max(1, Math.min(64, Math.round(_elapsed - this.time._elapsed)));
-  this.time._elapsed = _elapsed;
-  this.time.elapsed += this.time.delta;
-};
+  start(to, {
+    immediate = false,
+    easing = defaultLerp
+  } = {}) {
+    this.time.elapsed = 0;
+    this._movingChildren = 0;
+    each(this.children, (child, key) => {
+      child.start(to, {
+        immediate,
+        easing
+      });
+      if (!child.idle) this._movingChildren++;
+    });
+  }
 
-const GlobalLoop = new FrameLoop();
+  update() {
+    this.time.elapsed += this.loop.time.delta;
+    this.time.delta = this.loop.time.delta;
+    each(this.children, child => {
+      if (!child.idle) {
+        child.update();
+        if (child.idle) this._movingChildren--;
+      }
+    });
+  }
 
-function useAniminiCore(target, elementPayload, fn) {
+}
+
+function useAniminiCore(target, currentValues, masterConfig) {
   const loop = target.loop || GlobalLoop;
@@ -199,5 +236,6 @@ const el = react.useRef(null);
   const animations = react.useMemo(() => new Map(), []);
-  react.useEffect(() => {
-    animations.forEach(animated => animated.setFn(fn));
-  }, [fn, animations]);
+  const resolveRef = react.useRef();
+  const rejectRef = react.useRef();
+  const configRef = react.useRef(masterConfig);
+  configRef.current = masterConfig;
   const update = react.useCallback(() => {
@@ -208,50 +246,163 @@ var _target$setValues;
     let idle = true;
-    animations.forEach((animated, key) => {
-      var _animated$onUpdate;
+    animations.forEach(({
+      animated,
+      adapter
+    }, key) => {
+      var _adapter$onChange;
 
       animated.update();
-      rawValues.current[key] = animated.value;
-      (_animated$onUpdate = animated.onUpdate) === null || _animated$onUpdate === void 0 ? void 0 : _animated$onUpdate.call(animated, el.current, key);
+      const value = adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(animated.value) : animated.value;
+      rawValues.current[key] = value;
+      adapter === null || adapter === void 0 ? void 0 : (_adapter$onChange = adapter.onChange) === null || _adapter$onChange === void 0 ? void 0 : _adapter$onChange.call(adapter, value, key, el.current, currentValues);
       idle && (idle = animated.idle);
     });
-    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, elementPayload);
-    if (idle) loop.stop(update);
+    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, currentValues);
+
+    if (idle) {
+      var _resolveRef$current;
+
+      loop.stop(update);
+      (_resolveRef$current = resolveRef.current) === null || _resolveRef$current === void 0 ? void 0 : _resolveRef$current.call(resolveRef);
+    }
   }, [target, animations]);
-  const start = react.useCallback((to, config) => {
-    let idle = true;
+  const start = react.useCallback((to, config = configRef.current) => {
+    return new Promise((resolve, reject) => {
+      resolveRef.current = resolve;
+      rejectRef.current = reject;
+      let idle = true;
 
-    for (let key in to) {
-      if (!animations.has(key)) {
-        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, elementPayload);
+      for (let key in to) {
+        var _adapter2;
 
-        const _animated = new Animated(value, fn, adapter, loop);
+        const animation = animations.get(key);
+        let animated;
+        let adapter;
 
-        animations.set(key, _animated);
+        if (!animation) {
+          const [_value, _adapter] = target.getInitialValueAndAdapter(el.current, key, currentValues);
+          const value = _adapter !== null && _adapter !== void 0 && _adapter.parseInitial ? _adapter === null || _adapter === void 0 ? void 0 : _adapter.parseInitial(_value, key, el.current, currentValues) : _value;
+          animated = new Animated(value, loop);
+          adapter = _adapter;
+          animations.set(key, {
+            animated,
+            adapter
+          });
+        } else {
+          animated = animation.animated;
+          adapter = animation.adapter;
+        }
+
+        const _to = (_adapter2 = adapter) !== null && _adapter2 !== void 0 && _adapter2.parse ? adapter.parse(to[key], key, el.current, currentValues) : to[key];
+
+        animated.start(_to, typeof config === 'function' ? config(key) : config);
+        idle && (idle = animated.idle);
       }
 
-      const animated = animations.get(key);
-      animated.start(to[key], typeof config === 'function' ? config(key) : config);
-      idle &= animated.idle;
-    }
+      if (!idle) loop.start(update);else resolveRef.current();
+    });
+  }, [update, animations]);
+  const stop = react.useCallback(() => {
+    var _rejectRef$current;
 
-    if (!idle) loop.start(update);
-  }, [update, fn, animations]);
+    loop.stop(update);
+    (_rejectRef$current = rejectRef.current) === null || _rejectRef$current === void 0 ? void 0 : _rejectRef$current.call(rejectRef);
+  }, [update]);
   react.useEffect(() => {
-    return () => loop.stop(update);
+    return () => {
+      var _resolveRef$current2;
+
+      loop.stop(update);
+      (_resolveRef$current2 = resolveRef.current) === null || _resolveRef$current2 === void 0 ? void 0 : _resolveRef$current2.call(resolveRef);
+    };
   }, [update]);
-  const get = react.useCallback(() => rawValues.current, []);
-  return [el, {
+  const get = react.useCallback(key => rawValues.current[key], []);
+  const api = {
     get,
-    start
-  }];
+    start,
+    stop
+  };
+  return [el, api];
 }
 
+function parseUnitValue(value) {
+  if (typeof value === 'number') return [value];
+
+  const _value = parseFloat(value);
+
+  const unit = value.substring(('' + _value).length);
+  return [_value, unit];
+}
+function substringMatch(str, from, to) {
+  const pos = str.indexOf(from);
+
+  if (pos !== -1) {
+    if (to) {
+      return str.substring(pos + from.length, str.indexOf(to));
+    }
+
+    return str.substring(0, pos);
+  }
+
+  return '';
+}
+
+const hexToIntTable = {};
+
+for (let i = 0; i < 256; i++) {
+  let hex = i.toString(16);
+
+  if (hex.length % 2) {
+    hex = '0' + hex;
+  }
+
+  hexToIntTable[hex] = i;
+}
+
+function parseColor(str) {
+  var _a;
+
+  let r, g, b, a, tmp;
+
+  if (str[0] === '#') {
+    str = str.toLowerCase();
+
+    if (str.length === 4) {
+      r = hexToIntTable[(tmp = str[1]) + tmp];
+      g = hexToIntTable[(tmp = str[2]) + tmp];
+      b = hexToIntTable[(tmp = str[3]) + tmp];
+    } else {
+      r = hexToIntTable[str[1] + str[2]];
+      g = hexToIntTable[str[3] + str[4]];
+      b = hexToIntTable[str[5] + str[6]];
+
+      if (str.length === 9) {
+        a = hexToIntTable[str[7] + str[8]] / 255;
+      }
+    }
+  } else {
+    tmp = substringMatch(str, '(', ')').split(',');
+    r = parseInt(tmp[0], 10);
+    g = parseInt(tmp[1], 10);
+    b = parseInt(tmp[2], 10);
+
+    if (tmp.length > 3) {
+      a = parseFloat(tmp[3]);
+    }
+  }
+
+  return [r, g, b, (_a = a) !== null && _a !== void 0 ? _a : 1];
+}
+
 exports.clamp = lerp.clamp;
-exports.each = lerp.each;
-exports.equal = lerp.equal;
 exports.lerp = lerp.lerp$1;
-exports.map = lerp.map;
+exports.rubberbandIfOutOfBounds = lerp.rubberbandIfOutOfBounds;
 exports.spring = lerp.spring;
 exports.FrameLoop = FrameLoop;
 exports.GlobalLoop = GlobalLoop;
+exports.each = each;
+exports.equal = equal;
+exports.map = map;
+exports.parseColor = parseColor;
+exports.parseUnitValue = parseUnitValue;
+exports.substringMatch = substringMatch;
 exports.useAniminiCore = useAniminiCore;

dist/animini-core.cjs.prod.js

@@ -6,190 +6,227 @@ 'use strict';
 var react = require('react');
-var lerp = require('./lerp-a02113f7.cjs.prod.js');
-require('memoize-one');
+var lerp = require('./lerp-65d16c52.cjs.prod.js');
 
-function AnimatedValue(parent, index) {
-  this.distance = this.velocity = 0;
-  this.idle = true;
-  this.parent = parent;
-  this.index = index;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
 }
-AnimatedValue.prototype = {
-  get fn() {
-    return this.parent.fn;
-  },
 
-  get config() {
-    return this.parent.config;
-  },
+class AnimatedValue {
+  constructor(parent, index) {
+    _defineProperty(this, "precision", 1);
 
+    _defineProperty(this, "idle", true);
+
+    _defineProperty(this, "distance", 0);
+
+    _defineProperty(this, "velocity", 0);
+
+    this.parent = parent;
+    this.index = index;
+  }
+
   get time() {
     return this.parent.time;
-  },
+  }
 
-  get target() {
-    return this.index !== -1 ? this.parent.target[this.index] : this.parent.target;
-  },
-
   get value() {
-    return this.index !== -1 ? this.parent._value[this.index] : this.parent._value;
-  },
+    return this.index !== -1 ? this.parent.value[this.index] : this.parent.value;
+  }
 
   set value(value) {
-    this.index !== -1 ? this.parent._value[this.index] = value : this.parent._value = value;
+    this.index !== -1 ? this.parent.value[this.index] = value : this.parent.value = value;
   }
 
-};
+  start(to, config) {
+    this.config = config;
+    this.from = this.value;
+    this.to = this.index === -1 ? to : to[this.index];
+    this.distance = this.to - this.from;
+    this.startVelocity = this.velocity;
+    this.idle = config.immediate && this.to === this.value;
+    this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
+  }
 
-AnimatedValue.prototype.start = function () {
-  this.previousValue = this.value;
-  this.idle = this.target === this.value;
-  this.startVelocity = this.velocity;
+  update() {
+    if (this.idle) return this.value;
+    this.previousValue = this.value;
+    this.value = this.config.immediate ? this.to : this.config.easing.update(this);
+    this.velocity = (this.value - this.previousValue) / this.time.delta;
 
-  if (this.config.immediate) {
-    this.value = this.target;
-  } else if (!this.idle) {
-    this.distance = this.target - this.value;
-    this.precision = Math.min(1, Math.abs(this.distance) * 0.001);
+    if (this.to === this.value) {
+      this.idle = true;
+      return this.value;
+    }
+
+    const isMoving = Math.abs(this.velocity) > this.precision;
+
+    if (!isMoving) {
+      if (!this.config.easing.wanders) {
+        const isTravelling = Math.abs(this.to - this.value) > this.precision;
+
+        if (!isTravelling) {
+          this.idle = true;
+          this.value = this.to;
+        }
+      } else {
+        this.idle = true;
+      }
+    }
+
+    return this.value;
   }
-};
 
-AnimatedValue.prototype.update = function () {
-  if (this.idle) return;
+}
 
-  if (this.value === this.target) {
-    this.idle = true;
-    return;
+function equal(v0, v1) {
+  if (Array.isArray(v0)) {
+    return v0.every((val, index) => val === v1[index]);
   }
 
-  this.previousValue = this.value;
-  this.value = this.fn();
-  this.velocity = (this.value - this.previousValue) / this.time.delta;
-  const isMoving = Math.abs(this.velocity) > this.precision;
-  const isTravelling = Math.abs(this.target - this.value) > this.precision;
-  this.idle = !isMoving && !isTravelling;
-  if (this.idle) this.value = this.target;
-};
+  return v0 === v1;
+}
+function each(array, iterator) {
+  if (Array.isArray(array)) {
+    for (let i = 0; i < array.length; i++) iterator(array[i], i);
+  } else {
+    iterator(array, -1);
+  }
+}
+function map(obj, iterator) {
+  if (typeof obj === 'object') {
+    if (Array.isArray(obj)) {
+      return obj.map(iterator);
+    }
 
-function Animated(value, fn, adapter, loop) {
-  this.config = {};
-  this.time = {};
-  this.loop = loop;
-  this.adapter = adapter;
-  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
-  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
-  this._movingChildren = 0;
-  this.setFn(fn);
-  this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
-  this.children = lerp.map(this._value, (_v, i) => new AnimatedValue(this, i));
+    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  }
+
+  return iterator(obj, -1);
 }
-Animated.prototype = {
-  get idle() {
-    return this._movingChildren <= 0;
-  },
 
-  get value() {
-    var _this$adapter;
+function now() {
+  return typeof performance != 'undefined' ? performance.now() : Date.now();
+}
 
-    return (_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.format ? this.adapter.format(this._value) : this._value;
-  }
+class FrameLoop {
+  constructor() {
+    _defineProperty(this, "rafId", 0);
 
-};
+    _defineProperty(this, "running", false);
 
-Animated.prototype.setFn = function (fn = lerp.lerp) {
-  this.fn = fn.update;
-  if (fn.setup) this.setup = fn.setup;
-  if (fn.memo) this.memo = fn.memo();
-};
+    _defineProperty(this, "queue", new Set());
 
-Animated.prototype.start = function (target, config = {}) {
-  this.time.elapsed = 0;
-  this.target = this.parse ? this.parse(target) : target;
-  this._movingChildren = 0;
-  this.config = config;
+    _defineProperty(this, "time", {});
+  }
 
-  if (!this.config.immediate) {
-    this.setup && this.setup();
+  tick() {
+    if (!this.running) return;
+    this.update();
+    this.rafId = window.requestAnimationFrame(this.tick.bind(this));
   }
 
-  lerp.each(this.children, child => {
-    child.start();
-    if (!child.idle) this._movingChildren++;
-  });
-};
+  update() {
+    this.updateTime();
+    this.queue.forEach(cb => cb());
+  }
 
-Animated.prototype.update = function () {
-  this.time.elapsed += this.loop.time.delta;
-  this.time.delta = this.loop.time.delta;
-  lerp.each(this.children, child => {
-    if (!child.idle) {
-      child.update();
-      if (child.idle) this._movingChildren--;
+  run() {
+    if (!this.running) {
+      this.time = {
+        start: now(),
+        elapsed: 0,
+        delta: 0,
+        _elapsed: 0
+      };
+      this.running = true;
+      this.rafId = window.requestAnimationFrame(this.tick.bind(this));
     }
-  });
-};
+  }
 
-function now() {
-  return typeof performance != 'undefined' ? performance.now() : Date.now();
-}
+  start(cb) {
+    this.queue.add(cb);
+    this.run();
+  }
 
-function FrameLoop() {
-  this.rafId = 0;
-  this.running = false;
-  this.queue = new Set();
-  this.time = {};
-}
+  stop(cb) {
+    if (!cb) return;
+    this.queue.delete(cb);
+    if (!this.queue.size) this.stopAll();
+  }
 
-FrameLoop.prototype.tick = function () {
-  if (!this.running) return;
-  this.update();
-  this.rafId = window.requestAnimationFrame(this.tick.bind(this));
-};
+  stopAll() {
+    this.rafId && window.cancelAnimationFrame(this.rafId);
+    this.running = false;
+  }
 
-FrameLoop.prototype.update = function () {
-  this.updateTime();
-  this.queue.forEach(cb => cb());
-};
+  updateTime() {
+    const ts = now();
 
-FrameLoop.prototype.run = function () {
-  if (!this.running) {
-    this.time = {
-      start: now(),
-      elapsed: 0,
-      delta: 0,
-      _elapsed: 0
-    };
-    this.running = true;
-    this.tick();
+    const _elapsed = ts - this.time.start;
+
+    this.time.delta = Math.max(1, Math.min(64, _elapsed - this.time._elapsed));
+    this.time._elapsed = _elapsed;
+    this.time.elapsed += this.time.delta;
   }
-};
 
-FrameLoop.prototype.start = function (cb) {
-  this.queue.add(cb);
-  this.run();
-};
+}
+const GlobalLoop = new FrameLoop();
 
-FrameLoop.prototype.stop = function (cb) {
-  if (!cb) return;
-  this.queue.delete(cb);
-  if (!this.queue.size) this.stopAll();
-};
+const defaultLerp = lerp.lerp();
+class Animated {
+  constructor(value, loop = GlobalLoop) {
+    _defineProperty(this, "time", {});
 
-FrameLoop.prototype.stopAll = function () {
-  this.rafId && window.cancelAnimationFrame(this.rafId);
-  this.running = false;
-};
+    _defineProperty(this, "_movingChildren", 0);
 
-FrameLoop.prototype.updateTime = function () {
-  const ts = now();
+    this.value = value;
+    this.loop = loop;
+    this.children = map(value, (_v, i) => {
+      return new AnimatedValue(this, i);
+    });
+  }
 
-  const _elapsed = ts - this.time.start;
+  get idle() {
+    return this._movingChildren <= 0;
+  }
 
-  this.time.delta = Math.max(1, Math.min(64, Math.round(_elapsed - this.time._elapsed)));
-  this.time._elapsed = _elapsed;
-  this.time.elapsed += this.time.delta;
-};
+  start(to, {
+    immediate = false,
+    easing = defaultLerp
+  } = {}) {
+    this.time.elapsed = 0;
+    this._movingChildren = 0;
+    each(this.children, (child, key) => {
+      child.start(to, {
+        immediate,
+        easing
+      });
+      if (!child.idle) this._movingChildren++;
+    });
+  }
 
-const GlobalLoop = new FrameLoop();
+  update() {
+    this.time.elapsed += this.loop.time.delta;
+    this.time.delta = this.loop.time.delta;
+    each(this.children, child => {
+      if (!child.idle) {
+        child.update();
+        if (child.idle) this._movingChildren--;
+      }
+    });
+  }
 
-function useAniminiCore(target, elementPayload, fn) {
+}
+
+function useAniminiCore(target, currentValues, masterConfig) {
   const loop = target.loop || GlobalLoop;
@@ -199,5 +236,6 @@ const el = react.useRef(null);
   const animations = react.useMemo(() => new Map(), []);
-  react.useEffect(() => {
-    animations.forEach(animated => animated.setFn(fn));
-  }, [fn, animations]);
+  const resolveRef = react.useRef();
+  const rejectRef = react.useRef();
+  const configRef = react.useRef(masterConfig);
+  configRef.current = masterConfig;
   const update = react.useCallback(() => {
@@ -208,50 +246,163 @@ var _target$setValues;
     let idle = true;
-    animations.forEach((animated, key) => {
-      var _animated$onUpdate;
+    animations.forEach(({
+      animated,
+      adapter
+    }, key) => {
+      var _adapter$onChange;
 
       animated.update();
-      rawValues.current[key] = animated.value;
-      (_animated$onUpdate = animated.onUpdate) === null || _animated$onUpdate === void 0 ? void 0 : _animated$onUpdate.call(animated, el.current, key);
+      const value = adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(animated.value) : animated.value;
+      rawValues.current[key] = value;
+      adapter === null || adapter === void 0 ? void 0 : (_adapter$onChange = adapter.onChange) === null || _adapter$onChange === void 0 ? void 0 : _adapter$onChange.call(adapter, value, key, el.current, currentValues);
       idle && (idle = animated.idle);
     });
-    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, elementPayload);
-    if (idle) loop.stop(update);
+    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, currentValues);
+
+    if (idle) {
+      var _resolveRef$current;
+
+      loop.stop(update);
+      (_resolveRef$current = resolveRef.current) === null || _resolveRef$current === void 0 ? void 0 : _resolveRef$current.call(resolveRef);
+    }
   }, [target, animations]);
-  const start = react.useCallback((to, config) => {
-    let idle = true;
+  const start = react.useCallback((to, config = configRef.current) => {
+    return new Promise((resolve, reject) => {
+      resolveRef.current = resolve;
+      rejectRef.current = reject;
+      let idle = true;
 
-    for (let key in to) {
-      if (!animations.has(key)) {
-        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, elementPayload);
+      for (let key in to) {
+        var _adapter2;
 
-        const _animated = new Animated(value, fn, adapter, loop);
+        const animation = animations.get(key);
+        let animated;
+        let adapter;
 
-        animations.set(key, _animated);
+        if (!animation) {
+          const [_value, _adapter] = target.getInitialValueAndAdapter(el.current, key, currentValues);
+          const value = _adapter !== null && _adapter !== void 0 && _adapter.parseInitial ? _adapter === null || _adapter === void 0 ? void 0 : _adapter.parseInitial(_value, key, el.current, currentValues) : _value;
+          animated = new Animated(value, loop);
+          adapter = _adapter;
+          animations.set(key, {
+            animated,
+            adapter
+          });
+        } else {
+          animated = animation.animated;
+          adapter = animation.adapter;
+        }
+
+        const _to = (_adapter2 = adapter) !== null && _adapter2 !== void 0 && _adapter2.parse ? adapter.parse(to[key], key, el.current, currentValues) : to[key];
+
+        animated.start(_to, typeof config === 'function' ? config(key) : config);
+        idle && (idle = animated.idle);
       }
 
-      const animated = animations.get(key);
-      animated.start(to[key], typeof config === 'function' ? config(key) : config);
-      idle &= animated.idle;
-    }
+      if (!idle) loop.start(update);else resolveRef.current();
+    });
+  }, [update, animations]);
+  const stop = react.useCallback(() => {
+    var _rejectRef$current;
 
-    if (!idle) loop.start(update);
-  }, [update, fn, animations]);
+    loop.stop(update);
+    (_rejectRef$current = rejectRef.current) === null || _rejectRef$current === void 0 ? void 0 : _rejectRef$current.call(rejectRef);
+  }, [update]);
   react.useEffect(() => {
-    return () => loop.stop(update);
+    return () => {
+      var _resolveRef$current2;
+
+      loop.stop(update);
+      (_resolveRef$current2 = resolveRef.current) === null || _resolveRef$current2 === void 0 ? void 0 : _resolveRef$current2.call(resolveRef);
+    };
   }, [update]);
-  const get = react.useCallback(() => rawValues.current, []);
-  return [el, {
+  const get = react.useCallback(key => rawValues.current[key], []);
+  const api = {
     get,
-    start
-  }];
+    start,
+    stop
+  };
+  return [el, api];
 }
 
+function parseUnitValue(value) {
+  if (typeof value === 'number') return [value];
+
+  const _value = parseFloat(value);
+
+  const unit = value.substring(('' + _value).length);
+  return [_value, unit];
+}
+function substringMatch(str, from, to) {
+  const pos = str.indexOf(from);
+
+  if (pos !== -1) {
+    if (to) {
+      return str.substring(pos + from.length, str.indexOf(to));
+    }
+
+    return str.substring(0, pos);
+  }
+
+  return '';
+}
+
+const hexToIntTable = {};
+
+for (let i = 0; i < 256; i++) {
+  let hex = i.toString(16);
+
+  if (hex.length % 2) {
+    hex = '0' + hex;
+  }
+
+  hexToIntTable[hex] = i;
+}
+
+function parseColor(str) {
+  var _a;
+
+  let r, g, b, a, tmp;
+
+  if (str[0] === '#') {
+    str = str.toLowerCase();
+
+    if (str.length === 4) {
+      r = hexToIntTable[(tmp = str[1]) + tmp];
+      g = hexToIntTable[(tmp = str[2]) + tmp];
+      b = hexToIntTable[(tmp = str[3]) + tmp];
+    } else {
+      r = hexToIntTable[str[1] + str[2]];
+      g = hexToIntTable[str[3] + str[4]];
+      b = hexToIntTable[str[5] + str[6]];
+
+      if (str.length === 9) {
+        a = hexToIntTable[str[7] + str[8]] / 255;
+      }
+    }
+  } else {
+    tmp = substringMatch(str, '(', ')').split(',');
+    r = parseInt(tmp[0], 10);
+    g = parseInt(tmp[1], 10);
+    b = parseInt(tmp[2], 10);
+
+    if (tmp.length > 3) {
+      a = parseFloat(tmp[3]);
+    }
+  }
+
+  return [r, g, b, (_a = a) !== null && _a !== void 0 ? _a : 1];
+}
+
 exports.clamp = lerp.clamp;
-exports.each = lerp.each;
-exports.equal = lerp.equal;
 exports.lerp = lerp.lerp$1;
-exports.map = lerp.map;
+exports.rubberbandIfOutOfBounds = lerp.rubberbandIfOutOfBounds;
 exports.spring = lerp.spring;
 exports.FrameLoop = FrameLoop;
 exports.GlobalLoop = GlobalLoop;
+exports.each = each;
+exports.equal = equal;
+exports.map = map;
+exports.parseColor = parseColor;
+exports.parseUnitValue = parseUnitValue;
+exports.substringMatch = substringMatch;
 exports.useAniminiCore = useAniminiCore;

dist/animini-core.esm.js

@@ -1,191 +0,228 @@
-import { useRef, useMemo, useEffect, useCallback } from 'react';
-import { m as map, l as lerp, e as each } from './lerp-9e8b14d6.esm.js';
-export { c as clamp, e as each, b as equal, a as lerp, m as map, s as spring } from './lerp-9e8b14d6.esm.js';
-import 'memoize-one';
+import { useRef, useMemo, useCallback, useEffect } from 'react';
+import { l as lerp } from './lerp-cd1f0aee.esm.js';
+export { c as clamp, a as lerp, r as rubberbandIfOutOfBounds, s as spring } from './lerp-cd1f0aee.esm.js';
 
-function AnimatedValue(parent, index) {
-  this.distance = this.velocity = 0;
-  this.idle = true;
-  this.parent = parent;
-  this.index = index;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
 }
-AnimatedValue.prototype = {
-  get fn() {
-    return this.parent.fn;
-  },
 
-  get config() {
-    return this.parent.config;
-  },
+class AnimatedValue {
+  constructor(parent, index) {
+    _defineProperty(this, "precision", 1);
 
+    _defineProperty(this, "idle", true);
+
+    _defineProperty(this, "distance", 0);
+
+    _defineProperty(this, "velocity", 0);
+
+    this.parent = parent;
+    this.index = index;
+  }
+
   get time() {
     return this.parent.time;
-  },
+  }
 
-  get target() {
-    return this.index !== -1 ? this.parent.target[this.index] : this.parent.target;
-  },
-
   get value() {
-    return this.index !== -1 ? this.parent._value[this.index] : this.parent._value;
-  },
+    return this.index !== -1 ? this.parent.value[this.index] : this.parent.value;
+  }
 
   set value(value) {
-    this.index !== -1 ? this.parent._value[this.index] = value : this.parent._value = value;
+    this.index !== -1 ? this.parent.value[this.index] = value : this.parent.value = value;
   }
 
-};
+  start(to, config) {
+    this.config = config;
+    this.from = this.value;
+    this.to = this.index === -1 ? to : to[this.index];
+    this.distance = this.to - this.from;
+    this.startVelocity = this.velocity;
+    this.idle = config.immediate && this.to === this.value;
+    this.precision = config.easing.wanders ? 0.01 : Math.min(Math.abs(this.distance) * 1e-4, 1);
+  }
 
-AnimatedValue.prototype.start = function () {
-  this.previousValue = this.value;
-  this.idle = this.target === this.value;
-  this.startVelocity = this.velocity;
+  update() {
+    if (this.idle) return this.value;
+    this.previousValue = this.value;
+    this.value = this.config.immediate ? this.to : this.config.easing.update(this);
+    this.velocity = (this.value - this.previousValue) / this.time.delta;
 
-  if (this.config.immediate) {
-    this.value = this.target;
-  } else if (!this.idle) {
-    this.distance = this.target - this.value;
-    this.precision = Math.min(1, Math.abs(this.distance) * 0.001);
+    if (this.to === this.value) {
+      this.idle = true;
+      return this.value;
+    }
+
+    const isMoving = Math.abs(this.velocity) > this.precision;
+
+    if (!isMoving) {
+      if (!this.config.easing.wanders) {
+        const isTravelling = Math.abs(this.to - this.value) > this.precision;
+
+        if (!isTravelling) {
+          this.idle = true;
+          this.value = this.to;
+        }
+      } else {
+        this.idle = true;
+      }
+    }
+
+    return this.value;
   }
-};
 
-AnimatedValue.prototype.update = function () {
-  if (this.idle) return;
+}
 
-  if (this.value === this.target) {
-    this.idle = true;
-    return;
+function equal(v0, v1) {
+  if (Array.isArray(v0)) {
+    return v0.every((val, index) => val === v1[index]);
   }
 
-  this.previousValue = this.value;
-  this.value = this.fn();
-  this.velocity = (this.value - this.previousValue) / this.time.delta;
-  const isMoving = Math.abs(this.velocity) > this.precision;
-  const isTravelling = Math.abs(this.target - this.value) > this.precision;
-  this.idle = !isMoving && !isTravelling;
-  if (this.idle) this.value = this.target;
-};
+  return v0 === v1;
+}
+function each(array, iterator) {
+  if (Array.isArray(array)) {
+    for (let i = 0; i < array.length; i++) iterator(array[i], i);
+  } else {
+    iterator(array, -1);
+  }
+}
+function map(obj, iterator) {
+  if (typeof obj === 'object') {
+    if (Array.isArray(obj)) {
+      return obj.map(iterator);
+    }
 
-function Animated(value, fn, adapter, loop) {
-  this.config = {};
-  this.time = {};
-  this.loop = loop;
-  this.adapter = adapter;
-  this.onUpdate = adapter === null || adapter === void 0 ? void 0 : adapter.onUpdate;
-  this.parse = adapter === null || adapter === void 0 ? void 0 : adapter.parse;
-  this._movingChildren = 0;
-  this.setFn(fn);
-  this._value = adapter !== null && adapter !== void 0 && adapter.parseInitial ? adapter.parseInitial(value) : value;
-  this.children = map(this._value, (_v, i) => new AnimatedValue(this, i));
+    return Object.entries(obj).map(([key, value]) => iterator(value, key));
+  }
+
+  return iterator(obj, -1);
 }
-Animated.prototype = {
-  get idle() {
-    return this._movingChildren <= 0;
-  },
 
-  get value() {
-    var _this$adapter;
+function now() {
+  return typeof performance != 'undefined' ? performance.now() : Date.now();
+}
 
-    return (_this$adapter = this.adapter) !== null && _this$adapter !== void 0 && _this$adapter.format ? this.adapter.format(this._value) : this._value;
-  }
+class FrameLoop {
+  constructor() {
+    _defineProperty(this, "rafId", 0);
 
-};
+    _defineProperty(this, "running", false);
 
-Animated.prototype.setFn = function (fn = lerp) {
-  this.fn = fn.update;
-  if (fn.setup) this.setup = fn.setup;
-  if (fn.memo) this.memo = fn.memo();
-};
+    _defineProperty(this, "queue", new Set());
 
-Animated.prototype.start = function (target, config = {}) {
-  this.time.elapsed = 0;
-  this.target = this.parse ? this.parse(target) : target;
-  this._movingChildren = 0;
-  this.config = config;
+    _defineProperty(this, "time", {});
+  }
 
-  if (!this.config.immediate) {
-    this.setup && this.setup();
+  tick() {
+    if (!this.running) return;
+    this.update();
+    this.rafId = window.requestAnimationFrame(this.tick.bind(this));
   }
 
-  each(this.children, child => {
-    child.start();
-    if (!child.idle) this._movingChildren++;
-  });
-};
+  update() {
+    this.updateTime();
+    this.queue.forEach(cb => cb());
+  }
 
-Animated.prototype.update = function () {
-  this.time.elapsed += this.loop.time.delta;
-  this.time.delta = this.loop.time.delta;
-  each(this.children, child => {
-    if (!child.idle) {
-      child.update();
-      if (child.idle) this._movingChildren--;
+  run() {
+    if (!this.running) {
+      this.time = {
+        start: now(),
+        elapsed: 0,
+        delta: 0,
+        _elapsed: 0
+      };
+      this.running = true;
+      this.rafId = window.requestAnimationFrame(this.tick.bind(this));
     }
-  });
-};
+  }
 
-function now() {
-  return typeof performance != 'undefined' ? performance.now() : Date.now();
-}
+  start(cb) {
+    this.queue.add(cb);
+    this.run();
+  }
 
-function FrameLoop() {
-  this.rafId = 0;
-  this.running = false;
-  this.queue = new Set();
-  this.time = {};
-}
+  stop(cb) {
+    if (!cb) return;
+    this.queue.delete(cb);
+    if (!this.queue.size) this.stopAll();
+  }
 
-FrameLoop.prototype.tick = function () {
-  if (!this.running) return;
-  this.update();
-  this.rafId = window.requestAnimationFrame(this.tick.bind(this));
-};
+  stopAll() {
+    this.rafId && window.cancelAnimationFrame(this.rafId);
+    this.running = false;
+  }
 
-FrameLoop.prototype.update = function () {
-  this.updateTime();
-  this.queue.forEach(cb => cb());
-};
+  updateTime() {
+    const ts = now();
 
-FrameLoop.prototype.run = function () {
-  if (!this.running) {
-    this.time = {
-      start: now(),
-      elapsed: 0,
-      delta: 0,
-      _elapsed: 0
-    };
-    this.running = true;
-    this.tick();
+    const _elapsed = ts - this.time.start;
+
+    this.time.delta = Math.max(1, Math.min(64, _elapsed - this.time._elapsed));
+    this.time._elapsed = _elapsed;
+    this.time.elapsed += this.time.delta;
   }
-};
 
-FrameLoop.prototype.start = function (cb) {
-  this.queue.add(cb);
-  this.run();
-};
+}
+const GlobalLoop = new FrameLoop();
 
-FrameLoop.prototype.stop = function (cb) {
-  if (!cb) return;
-  this.queue.delete(cb);
-  if (!this.queue.size) this.stopAll();
-};
+const defaultLerp = lerp();
+class Animated {
+  constructor(value, loop = GlobalLoop) {
+    _defineProperty(this, "time", {});
 
-FrameLoop.prototype.stopAll = function () {
-  this.rafId && window.cancelAnimationFrame(this.rafId);
-  this.running = false;
-};
+    _defineProperty(this, "_movingChildren", 0);
 
-FrameLoop.prototype.updateTime = function () {
-  const ts = now();
+    this.value = value;
+    this.loop = loop;
+    this.children = map(value, (_v, i) => {
+      return new AnimatedValue(this, i);
+    });
+  }
 
-  const _elapsed = ts - this.time.start;
+  get idle() {
+    return this._movingChildren <= 0;
+  }
 
-  this.time.delta = Math.max(1, Math.min(64, Math.round(_elapsed - this.time._elapsed)));
-  this.time._elapsed = _elapsed;
-  this.time.elapsed += this.time.delta;
-};
+  start(to, {
+    immediate = false,
+    easing = defaultLerp
+  } = {}) {
+    this.time.elapsed = 0;
+    this._movingChildren = 0;
+    each(this.children, (child, key) => {
+      child.start(to, {
+        immediate,
+        easing
+      });
+      if (!child.idle) this._movingChildren++;
+    });
+  }
 
-const GlobalLoop = new FrameLoop();
+  update() {
+    this.time.elapsed += this.loop.time.delta;
+    this.time.delta = this.loop.time.delta;
+    each(this.children, child => {
+      if (!child.idle) {
+        child.update();
+        if (child.idle) this._movingChildren--;
+      }
+    });
+  }
 
-function useAniminiCore(target, elementPayload, fn) {
+}
+
+function useAniminiCore(target, currentValues, masterConfig) {
   const loop = target.loop || GlobalLoop;
@@ -195,5 +232,6 @@ const el = useRef(null);
   const animations = useMemo(() => new Map(), []);
-  useEffect(() => {
-    animations.forEach(animated => animated.setFn(fn));
-  }, [fn, animations]);
+  const resolveRef = useRef();
+  const rejectRef = useRef();
+  const configRef = useRef(masterConfig);
+  configRef.current = masterConfig;
   const update = useCallback(() => {
@@ -204,42 +242,151 @@ var _target$setValues;
     let idle = true;
-    animations.forEach((animated, key) => {
-      var _animated$onUpdate;
+    animations.forEach(({
+      animated,
+      adapter
+    }, key) => {
+      var _adapter$onChange;
 
       animated.update();
-      rawValues.current[key] = animated.value;
-      (_animated$onUpdate = animated.onUpdate) === null || _animated$onUpdate === void 0 ? void 0 : _animated$onUpdate.call(animated, el.current, key);
+      const value = adapter !== null && adapter !== void 0 && adapter.format ? adapter.format(animated.value) : animated.value;
+      rawValues.current[key] = value;
+      adapter === null || adapter === void 0 ? void 0 : (_adapter$onChange = adapter.onChange) === null || _adapter$onChange === void 0 ? void 0 : _adapter$onChange.call(adapter, value, key, el.current, currentValues);
       idle && (idle = animated.idle);
     });
-    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, elementPayload);
-    if (idle) loop.stop(update);
+    (_target$setValues = target.setValues) === null || _target$setValues === void 0 ? void 0 : _target$setValues.call(target, rawValues.current, el.current, currentValues);
+
+    if (idle) {
+      var _resolveRef$current;
+
+      loop.stop(update);
+      (_resolveRef$current = resolveRef.current) === null || _resolveRef$current === void 0 ? void 0 : _resolveRef$current.call(resolveRef);
+    }
   }, [target, animations]);
-  const start = useCallback((to, config) => {
-    let idle = true;
+  const start = useCallback((to, config = configRef.current) => {
+    return new Promise((resolve, reject) => {
+      resolveRef.current = resolve;
+      rejectRef.current = reject;
+      let idle = true;
 
-    for (let key in to) {
-      if (!animations.has(key)) {
-        const [value, adapter] = target.getInitialValueAndAdapter(el.current, key, elementPayload);
+      for (let key in to) {
+        var _adapter2;
 
-        const _animated = new Animated(value, fn, adapter, loop);
+        const animation = animations.get(key);
+        let animated;
+        let adapter;
 
-        animations.set(key, _animated);
+        if (!animation) {
+          const [_value, _adapter] = target.getInitialValueAndAdapter(el.current, key, currentValues);
+          const value = _adapter !== null && _adapter !== void 0 && _adapter.parseInitial ? _adapter === null || _adapter === void 0 ? void 0 : _adapter.parseInitial(_value, key, el.current, currentValues) : _value;
+          animated = new Animated(value, loop);
+          adapter = _adapter;
+          animations.set(key, {
+            animated,
+            adapter
+          });
+        } else {
+          animated = animation.animated;
+          adapter = animation.adapter;
+        }
+
+        const _to = (_adapter2 = adapter) !== null && _adapter2 !== void 0 && _adapter2.parse ? adapter.parse(to[key], key, el.current, currentValues) : to[key];
+
+        animated.start(_to, typeof config === 'function' ? config(key) : config);
+        idle && (idle = animated.idle);
       }
 
-      const animated = animations.get(key);
-      animated.start(to[key], typeof config === 'function' ? config(key) : config);
-      idle &= animated.idle;
-    }
+      if (!idle) loop.start(update);else resolveRef.current();
+    });
+  }, [update, animations]);
+  const stop = useCallback(() => {
+    var _rejectRef$current;
 
-    if (!idle) loop.start(update);
-  }, [update, fn, animations]);
+    loop.stop(update);
+    (_rejectRef$current = rejectRef.current) === null || _rejectRef$current === void 0 ? void 0 : _rejectRef$current.call(rejectRef);
+  }, [update]);
   useEffect(() => {
-    return () => loop.stop(update);
+    return () => {
+      var _resolveRef$current2;
+
+      loop.stop(update);
+      (_resolveRef$current2 = resolveRef.current) === null || _resolveRef$current2 === void 0 ? void 0 : _resolveRef$current2.call(resolveRef);
+    };
   }, [update]);
-  const get = useCallback(() => rawValues.current, []);
-  return [el, {
+  const get = useCallback(key => rawValues.current[key], []);
+  const api = {
     get,
-    start
-  }];
+    start,
+    stop
+  };
+  return [el, api];
 }
 
-export { FrameLoop, GlobalLoop, useAniminiCore };
+function parseUnitValue(value) {
+  if (typeof value === 'number') return [value];
+
+  const _value = parseFloat(value);
+
+  const unit = value.substring(('' + _value).length);
+  return [_value, unit];
+}
+function substringMatch(str, from, to) {
+  const pos = str.indexOf(from);
+
+  if (pos !== -1) {
+    if (to) {
+      return str.substring(pos + from.length, str.indexOf(to));
+    }
+
+    return str.substring(0, pos);
+  }
+
+  return '';
+}
+
+const hexToIntTable = {};
+
+for (let i = 0; i < 256; i++) {
+  let hex = i.toString(16);
+
+  if (hex.length % 2) {
+    hex = '0' + hex;
+  }
+
+  hexToIntTable[hex] = i;
+}
+
+function parseColor(str) {
+  var _a;
+
+  let r, g, b, a, tmp;
+
+  if (str[0] === '#') {
+    str = str.toLowerCase();
+
+    if (str.length === 4) {
+      r = hexToIntTable[(tmp = str[1]) + tmp];
+      g = hexToIntTable[(tmp = str[2]) + tmp];
+      b = hexToIntTable[(tmp = str[3]) + tmp];
+    } else {
+      r = hexToIntTable[str[1] + str[2]];
+      g = hexToIntTable[str[3] + str[4]];
+      b = hexToIntTable[str[5] + str[6]];
+
+      if (str.length === 9) {
+        a = hexToIntTable[str[7] + str[8]] / 255;
+      }
+    }
+  } else {
+    tmp = substringMatch(str, '(', ')').split(',');
+    r = parseInt(tmp[0], 10);
+    g = parseInt(tmp[1], 10);
+    b = parseInt(tmp[2], 10);
+
+    if (tmp.length > 3) {
+      a = parseFloat(tmp[3]);
+    }
+  }
+
+  return [r, g, b, (_a = a) !== null && _a !== void 0 ? _a : 1];
+}
+
+export { FrameLoop, GlobalLoop, each, equal, map, parseColor, parseUnitValue, substringMatch, useAniminiCore };

package.json

 {
   "name": "@animini/core",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "small animation lib",
@@ -11,4 +11,4 @@ "keywords": [],
     "entrypoints": [
-      "./index.js",
-      "./algorithms/index.js"
+      "./index.ts",
+      "./algorithms/index.ts"
     ]
@@ -24,6 +24,3 @@ },
     "react": ">=16.8.0"
-  },
-  "dependencies": {
-    "memoize-one": "^5.1.1"
   }
-}
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74753

increased by101.02%

Dependency count

1

decreased by-50%

Number of package files

48

increased by108.7%

Lines of code

2256

increased by89.42%

Dependency changes

• - Removedmemoize-one@^5.1.1

• - Removedmemoize-one@5.2.1(transitive)