@popmotion/popcorn - npm Package Compare versions

Comparing version 0.3.9 to 0.4.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # Changelog
 
+## [0.4.0] 2019-05-01
+
+### Added
+
+- Added `mixObject` to interpolate objects, added capability to `interpolate`.
+- Made handling of complex value types more permissive.
+
 ## [0.3.9] 2019-04-30
@@ -7,0 +14,0 @@

dist/popcorn.es.js

@@ -152,17 +152,17 @@ import { hsla, rgba, hex, color, complex } from 'style-value-types';
 
+function getMixer(origin, target) {
+    if (isNum(origin)) {
+        return function (v) { return mix(origin, target, v); };
+    }
+    else if (color.test(origin)) {
+        return mixColor(origin, target);
+    }
+    else {
+        return mixComplex(origin, target);
+    }
+}
 var mixArray = function (from, to) {
     var output = from.slice();
     var numValues = output.length;
-    var blendValue = from.map(function (fromThis, i) {
-        var toThis = to[i];
-        if (isNum(fromThis)) {
-            return function (v) { return mix(fromThis, toThis, v); };
-        }
-        else if (color.test(fromThis)) {
-            return mixColor(fromThis, toThis);
-        }
-        else {
-            return mixComplex(fromThis, toThis);
-        }
-    });
+    var blendValue = from.map(function (fromThis, i) { return getMixer(fromThis, to[i]); });
     return function (v) {
@@ -175,8 +175,47 @@ for (var i = 0; i < numValues; i++) {
 };
-var mixComplex = function (from, to) {
-    var template = complex.createTransformer(from);
-    var parsedFrom = complex.parse(from);
-    invariant(from === complex.createTransformer(to)(parsedFrom), "Complex values '" + from + "' and '" + to + "' are of different format.");
-    return pipe(mixArray(parsedFrom, complex.parse(to)), template);
+var mixObject = function (origin, target) {
+    var output = __assign({}, origin, target);
+    var blendValue = {};
+    for (var key in output) {
+        if (origin[key] !== undefined && target[key] !== undefined) {
+            blendValue[key] = getMixer(origin[key], target[key]);
+        }
+    }
+    return function (v) {
+        for (var key in blendValue) {
+            output[key] = blendValue[key](v);
+        }
+        return output;
+    };
 };
+function analyse(value) {
+    var parsed = complex.parse(value);
+    var numValues = parsed.length;
+    var numNumbers = 0;
+    var numRGB = 0;
+    var numHSL = 0;
+    for (var i = 0; i < numValues; i++) {
+        if (numNumbers || typeof parsed[i] === 'number') {
+            numNumbers++;
+        }
+        else {
+            if (parsed[i].hue !== undefined) {
+                numHSL++;
+            }
+            else {
+                numRGB++;
+            }
+        }
+    }
+    return { parsed: parsed, numNumbers: numNumbers, numRGB: numRGB, numHSL: numHSL };
+}
+var mixComplex = function (origin, target) {
+    var template = complex.createTransformer(target);
+    var originStats = analyse(origin);
+    var targetStats = analyse(target);
+    invariant(originStats.numHSL === targetStats.numHSL &&
+        originStats.numRGB === targetStats.numRGB &&
+        originStats.numNumbers >= targetStats.numNumbers, "Complex values '" + origin + "' and '" + target + "' too different to mix. Ensure all colors are of the same type.");
+    return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+};
 
@@ -188,8 +227,16 @@ var mixNumber = function (from, to) { return function (p) { return mix(from, to, p); }; };
     }
-    if (color.test(v)) {
-        return mixColor;
+    else if (typeof v === 'string') {
+        if (color.test(v)) {
+            return mixColor;
+        }
+        else {
+            return mixComplex;
+        }
     }
-    else {
-        return mixComplex;
+    else if (Array.isArray(v)) {
+        return mixArray;
     }
+    else if (typeof v === 'object') {
+        return mixObject;
+    }
 }
@@ -241,3 +288,3 @@ function createMixers(output, ease, customMixer) {
 }
-function interpolate(input, output, _a) {
+function interpolate$$1(input, output, _a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.clamp, clamp = _c === void 0 ? true : _c, ease = _b.ease, mixer = _b.mixer;
@@ -362,2 +409,2 @@ var inputLength = input.length;
 
-export { angle, applyOffset, clamp$1 as clamp, conditional, degreesToRadians, distance, interpolate, isPoint, isPoint3D, mix, mixArray, mixColor, mixComplex, pipe, pointFromVector, progress, radiansToDegrees, smooth, smoothFrame, snap, springForce, springForceExpo, springForceLinear, steps, toDecimal, velocityPerFrame, velocityPerSecond, wrap$1 as wrap };
+export { angle, applyOffset, clamp$1 as clamp, conditional, degreesToRadians, distance, interpolate$$1 as interpolate, isPoint, isPoint3D, mix, mixArray, mixColor, mixComplex, mixObject, pipe, pointFromVector, progress, radiansToDegrees, smooth, smoothFrame, snap, springForce, springForceExpo, springForceLinear, steps, toDecimal, velocityPerFrame, velocityPerSecond, wrap$1 as wrap };

dist/popcorn.js

@@ -139,12 +139,6 @@ (function (global, factory) {
   }; };
-  var isFirstChars = function (term) { return function (v) {
-      return typeof v === 'string' && v.indexOf(term) === 0;
-  }; };
-  var getValueFromFunctionString = function (value) {
-      return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
-  };
-  var splitCommaDelimited = function (value) {
-      return typeof value === 'string' ? value.split(/,\s*/) : [value];
-  };
   var sanitize = function (v) { return (v % 1 ? Number(v.toFixed(5)) : v); };
+  var floatRegex = /(-)?(\d[\d\.]*)/g;
+  var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
+  var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i;
 
@@ -169,8 +163,9 @@ var number = {
 
+  var getValueFromFunctionString = function (value) {
+      return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
+  };
   var clampRgbUnit = clamp$2(0, 255);
-  var onlyColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i;
   var isRgba = function (v) { return v.red !== undefined; };
   var isHsla = function (v) { return v.hue !== undefined; };
   var splitColorValues = function (terms) {
-      var numTerms = terms.length;
       return function (v) {
@@ -180,4 +175,4 @@ if (typeof v !== 'string')
           var values = {};
-          var valuesArray = splitCommaDelimited(getValueFromFunctionString(v));
-          for (var i = 0; i < numTerms; i++) {
+          var valuesArray = getValueFromFunctionString(v).split(/,\s*/);
+          for (var i = 0; i < 4; i++) {
               values[terms[i]] =
@@ -198,5 +193,7 @@ valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;
   var rgbUnit = __assign$1({}, number, { transform: function (v) { return Math.round(clampRgbUnit(v)); } });
-  var testRgbaString = isFirstChars('rgb');
+  function isColorString(color, colorType) {
+      return color.startsWith(colorType) && singleColorRegex.test(color);
+  }
   var rgba = {
-      test: function (v) { return (typeof v === 'string' ? testRgbaString(v) : isRgba(v)); },
+      test: function (v) { return (typeof v === 'string' ? isColorString(v, 'rgb') : isRgba(v)); },
       parse: splitColorValues(['red', 'green', 'blue', 'alpha']),
@@ -213,5 +210,4 @@ transform: function (_a) {
   };
-  var testHslaString = isFirstChars('hsl');
   var hsla = {
-      test: function (v) { return (typeof v === 'string' ? testHslaString(v) : isHsla(v)); },
+      test: function (v) { return (typeof v === 'string' ? isColorString(v, 'hsl') : isHsla(v)); },
       parse: splitColorValues(['hue', 'saturation', 'lightness', 'alpha']),
@@ -228,3 +224,3 @@ transform: function (_a) {
   };
-  var hex = __assign$1({}, rgba, { test: isFirstChars('#'), parse: function (v) {
+  var hex = __assign$1({}, rgba, { test: function (v) { return typeof v === 'string' && isColorString(v, '#'); }, parse: function (v) {
           var r = '';
@@ -255,6 +251,5 @@ var g = '';
       test: function (v) {
-          return (typeof v === 'string' && onlyColorRegex.test(v)) ||
-              rgba.test(v) ||
-              hsla.test(v) ||
-              hex.test(v);
+          return (typeof v === 'string' && singleColorRegex.test(v)) ||
+              isRgba(v) ||
+              isHsla(v);
       },
@@ -284,4 +279,2 @@ parse: function (v) {
 
-  var floatRegex = /(-)?(\d[\d\.]*)/g;
-  var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi;
   var COLOR_TOKEN = '${c}';
@@ -404,17 +397,17 @@ var NUMBER_TOKEN = '${n}';
 
+  function getMixer(origin, target) {
+      if (isNum(origin)) {
+          return function (v) { return mix(origin, target, v); };
+      }
+      else if (color.test(origin)) {
+          return mixColor(origin, target);
+      }
+      else {
+          return mixComplex(origin, target);
+      }
+  }
   var mixArray = function (from, to) {
       var output = from.slice();
       var numValues = output.length;
-      var blendValue = from.map(function (fromThis, i) {
-          var toThis = to[i];
-          if (isNum(fromThis)) {
-              return function (v) { return mix(fromThis, toThis, v); };
-          }
-          else if (color.test(fromThis)) {
-              return mixColor(fromThis, toThis);
-          }
-          else {
-              return mixComplex(fromThis, toThis);
-          }
-      });
+      var blendValue = from.map(function (fromThis, i) { return getMixer(fromThis, to[i]); });
       return function (v) {
@@ -427,8 +420,47 @@ for (var i = 0; i < numValues; i++) {
   };
-  var mixComplex = function (from, to) {
-      var template = complex.createTransformer(from);
-      var parsedFrom = complex.parse(from);
-      invariant(from === complex.createTransformer(to)(parsedFrom), "Complex values '" + from + "' and '" + to + "' are of different format.");
-      return pipe(mixArray(parsedFrom, complex.parse(to)), template);
+  var mixObject = function (origin, target) {
+      var output = __assign({}, origin, target);
+      var blendValue = {};
+      for (var key in output) {
+          if (origin[key] !== undefined && target[key] !== undefined) {
+              blendValue[key] = getMixer(origin[key], target[key]);
+          }
+      }
+      return function (v) {
+          for (var key in blendValue) {
+              output[key] = blendValue[key](v);
+          }
+          return output;
+      };
   };
+  function analyse(value) {
+      var parsed = complex.parse(value);
+      var numValues = parsed.length;
+      var numNumbers = 0;
+      var numRGB = 0;
+      var numHSL = 0;
+      for (var i = 0; i < numValues; i++) {
+          if (numNumbers || typeof parsed[i] === 'number') {
+              numNumbers++;
+          }
+          else {
+              if (parsed[i].hue !== undefined) {
+                  numHSL++;
+              }
+              else {
+                  numRGB++;
+              }
+          }
+      }
+      return { parsed: parsed, numNumbers: numNumbers, numRGB: numRGB, numHSL: numHSL };
+  }
+  var mixComplex = function (origin, target) {
+      var template = complex.createTransformer(target);
+      var originStats = analyse(origin);
+      var targetStats = analyse(target);
+      invariant(originStats.numHSL === targetStats.numHSL &&
+          originStats.numRGB === targetStats.numRGB &&
+          originStats.numNumbers >= targetStats.numNumbers, "Complex values '" + origin + "' and '" + target + "' too different to mix. Ensure all colors are of the same type.");
+      return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+  };
 
@@ -440,8 +472,16 @@ var mixNumber = function (from, to) { return function (p) { return mix(from, to, p); }; };
       }
-      if (color.test(v)) {
-          return mixColor;
+      else if (typeof v === 'string') {
+          if (color.test(v)) {
+              return mixColor;
+          }
+          else {
+              return mixComplex;
+          }
       }
-      else {
-          return mixComplex;
+      else if (Array.isArray(v)) {
+          return mixArray;
       }
+      else if (typeof v === 'object') {
+          return mixObject;
+      }
   }
@@ -493,3 +533,3 @@ function createMixers(output, ease, customMixer) {
   }
-  function interpolate(input, output, _a) {
+  function interpolate$$1(input, output, _a) {
       var _b = _a === void 0 ? {} : _a, _c = _b.clamp, clamp = _c === void 0 ? true : _c, ease = _b.ease, mixer = _b.mixer;
@@ -904,3 +944,3 @@ var inputLength = input.length;
   exports.distance = distance;
-  exports.interpolate = interpolate;
+  exports.interpolate = interpolate$$1;
   exports.isPoint = isPoint;
@@ -912,2 +952,3 @@ exports.isPoint3D = isPoint3D;
   exports.mixComplex = mixComplex;
+  exports.mixObject = mixObject;
   exports.pipe = pipe;
@@ -914,0 +955,0 @@ exports.pointFromVector = pointFromVector;

dist/popcorn.min.js

@@ -1,1 +0,1 @@
-!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(n.popcorn={})}(this,function(n){"use strict";var r,t={x:0,y:0,z:0},e=function(n){return"number"==typeof n},a=function(n){return 180*n/Math.PI},u=function(n){return function(r,t,e){return void 0!==e?n(r,t,e):function(e){return n(r,t,e)}}},o=u(function(n,r,t){return Math.min(Math.max(t,n),r)}),i=function(n){return n*Math.PI/180},f=function(n){return n.hasOwnProperty("x")&&n.hasOwnProperty("y")},c=function(n){return f(n)&&n.hasOwnProperty("z")},s=function(n,r){return Math.abs(n-r)},p=function(n,r,t){var e=r-n;return 0===e?1:(t-n)/e},h=function(n,r,t){return-t*n+t*r+n},l=function(){return(l=Object.assign||function(n){for(var r,t=1,e=arguments.length;t<e;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(n[a]=r[a]);return n}).apply(this,arguments)},d=function(){return(d=Object.assign||function(n){for(var r,t=1,e=arguments.length;t<e;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(n[a]=r[a]);return n}).apply(this,arguments)},v=function(n,r){return function(t){return Math.max(Math.min(t,r),n)}},m=function(n){return function(r){return"string"==typeof r&&0===r.indexOf(n)}},g=function(n){return n%1?Number(n.toFixed(5)):n},y={test:function(n){return"number"==typeof n},parse:parseFloat,transform:function(n){return n}},b=(d({},y,{transform:v(0,1)}),d({},y,{default:1}),r="%",{test:function(n){return"string"==typeof n&&n.endsWith(r)&&1===n.split(" ").length},parse:parseFloat,transform:function(n){return""+n+r}}),M=(d({},b,{parse:function(n){return b.parse(n)/100},transform:function(n){return b.transform(100*n)}}),v(0,255)),x=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,w=function(n){return void 0!==n.red},O=function(n){return void 0!==n.hue},A=function(n){var r=n.length;return function(t){if("string"!=typeof t)return t;for(var e,a={},u=function(n){return"string"==typeof n?n.split(/,\s*/):[n]}((e=t).substring(e.indexOf("(")+1,e.lastIndexOf(")"))),o=0;o<r;o++)a[n[o]]=void 0!==u[o]?parseFloat(u[o]):1;return a}},F=d({},y,{transform:function(n){return Math.round(M(n))}}),I=m("rgb"),P={test:function(n){return"string"==typeof n?I(n):w(n)},parse:A(["red","green","blue","alpha"]),transform:function(n){var r=n.red,t=n.green,e=n.blue,a=n.alpha;return function(n){var r=n.red,t=n.green,e=n.blue,a=n.alpha;return"rgba("+r+", "+t+", "+e+", "+(void 0===a?1:a)+")"}({red:F.transform(r),green:F.transform(t),blue:F.transform(e),alpha:g(a)})}},E=m("hsl"),R={test:function(n){return"string"==typeof n?E(n):O(n)},parse:A(["hue","saturation","lightness","alpha"]),transform:function(n){var r=n.hue,t=n.saturation,e=n.lightness,a=n.alpha;return function(n){var r=n.hue,t=n.saturation,e=n.lightness,a=n.alpha;return"hsla("+r+", "+t+", "+e+", "+(void 0===a?1:a)+")"}({hue:Math.round(r),saturation:b.transform(g(t)),lightness:b.transform(g(e)),alpha:g(a)})}},N=d({},P,{test:m("#"),parse:function(n){var r="",t="",e="";return n.length>4?(r=n.substr(1,2),t=n.substr(3,2),e=n.substr(5,2)):(r=n.substr(1,1),t=n.substr(2,1),e=n.substr(3,1),r+=r,t+=t,e+=e),{red:parseInt(r,16),green:parseInt(t,16),blue:parseInt(e,16),alpha:1}}}),S={test:function(n){return"string"==typeof n&&x.test(n)||P.test(n)||R.test(n)||N.test(n)},parse:function(n){return P.test(n)?P.parse(n):R.test(n)?R.parse(n):N.test(n)?N.parse(n):n},transform:function(n){return w(n)?P.transform(n):O(n)?R.transform(n):n}},T=/(-)?(\d[\d\.]*)/g,j=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi,k=function(n){return"number"==typeof n?0:n},q={test:function(n){if("string"!=typeof n||!isNaN(n))return!1;var r=0,t=n.match(T),e=n.match(j);return t&&(r+=t.length),e&&(r+=e.length),r>0},parse:function(n){var r=n,t=[],e=r.match(j);e&&(r=r.replace(j,"${c}"),t.push.apply(t,e.map(S.parse)));var a=r.match(T);return a&&t.push.apply(t,a.map(y.parse)),t},createTransformer:function(n){var r=n,t=0,e=n.match(j),a=e?e.length:0;if(e)for(var u=0;u<a;u++)r=r.replace(e[u],"${c}"),t++;var o=r.match(T),i=o?o.length:0;if(o)for(u=0;u<i;u++)r=r.replace(o[u],"${n}"),t++;return function(n){for(var e=r,u=0;u<t;u++)e=e.replace(u<a?"${c}":"${n}",u<a?S.transform(n[u]):g(n[u]));return e}},getAnimatableNone:function(n){var r=q.parse(n);return q.createTransformer(n)(r.map(k))}},D=function(){};"production"!==process.env.NODE_ENV&&(D=function(n,r){if(!n)throw new Error(r)});var U=function(n,r,t){var e=n*n,a=r*r;return Math.sqrt(Math.max(0,t*(a-e)+e))},$=[N,P,R],z=function(n){return $.find(function(r){return r.test(n)})},B=function(n){return"'"+n+"' is not an animatable color. Use the equivalent color code instead."},C=function(n,r){var t=z(n),e=z(r);D(!!t,B(n)),D(!!e,B(r)),D(t.transform===e.transform,"Both colors must be hex/RGBA, OR both must be HSLA.");var a=t.parse(n),u=e.parse(r),o=l({},a),i=t===R?h:U;return function(n){for(var r in o)"alpha"!==r&&(o[r]=i(a[r],u[r],n));return o.alpha=h(a.alpha,u.alpha,n),t.transform(o)}},_=function(n,r){return function(t){return r(n(t))}},V=function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return n.reduce(_)},W=function(n,r){var t=n.slice(),a=t.length,u=n.map(function(n,t){var a=r[t];return e(n)?function(r){return h(n,a,r)}:S.test(n)?C(n,a):H(n,a)});return function(n){for(var r=0;r<a;r++)t[r]=u[r](n);return t}},H=function(n,r){var t=q.createTransformer(n),e=q.parse(n);return D(n===q.createTransformer(r)(e),"Complex values '"+n+"' and '"+r+"' are of different format."),V(W(e,q.parse(r)),t)},L=function(n,r){return function(t){return h(n,r,t)}};function G(n,r,t){for(var e,a=[],u=t||("number"==typeof(e=n[0])?L:S.test(e)?C:H),o=n.length-1,i=0;i<o;i++){var f=u(n[i],n[i+1]);if(r){var c=Array.isArray(r)?r[i]:r;f=V(c,f)}a.push(f)}return a}var J=function(n,r){return void 0===r&&(r=2),r=Math.pow(10,r),Math.round(n*r)/r},K=function(n,r,t,e){return void 0===e&&(e=0),J(n+t*(r-n)/Math.max(e,t))},Q=function(){};"production"!==process.env.NODE_ENV&&(Q=function(n,r){if(!n)throw new Error("Hey, listen! ".toUpperCase()+r)});var X,Y=0,Z="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(n){return window.requestAnimationFrame(n)}:function(n){var r=Date.now(),t=Math.max(0,16.7-(r-Y));Y=r+t,setTimeout(function(){return n(Y)},t)};!function(n){n.Read="read",n.Update="update",n.Render="render",n.PostRender="postRender",n.FixedUpdate="fixedUpdate"}(X||(X={}));var nn=1/60*1e3,rn=!0,tn=!1,en=!1,an={delta:0,timestamp:0},un=[X.Read,X.Update,X.Render,X.PostRender],on=function(n){return tn=n},fn=un.reduce(function(n,r){var t,e,a,u,o,i,f,c,s,p=(t=on,e=[],a=[],u=0,o=!1,i=0,f=new WeakSet,c=new WeakSet,s={cancel:function(n){var r=a.indexOf(n);f.add(n),-1!==r&&a.splice(r,1)},process:function(n){var r,p;if(o=!0,e=(r=[a,e])[0],(a=r[1]).length=0,u=e.length)for(i=0;i<u;i++)(p=e[i])(n),!0!==c.has(p)||f.has(p)||(s.schedule(p),t(!0));o=!1},schedule:function(n,r,t){void 0===r&&(r=!1),void 0===t&&(t=!1),Q("function"==typeof n,"Argument must be a function");var i=t&&o,s=i?e:a;f.delete(n),r&&c.add(n),-1===s.indexOf(n)&&(s.push(n),i&&(u=e.length))}});return n.sync[r]=function(n,r,t){return void 0===r&&(r=!1),void 0===t&&(t=!1),tn||hn(),p.schedule(n,r,t),n},n.cancelSync[r]=function(n){return p.cancel(n)},n.steps[r]=p,n},{steps:{},sync:{},cancelSync:{}}),cn=fn.steps,sn=(fn.sync,fn.cancelSync,function(n){return cn[n].process(an)}),pn=function(n){tn=!1,an.delta=rn?nn:Math.max(Math.min(n-an.timestamp,40),1),rn||(nn=an.delta),an.timestamp=n,en=!0,un.forEach(sn),en=!1,tn&&(rn=!1,Z(pn))},hn=function(){tn=!0,rn=!0,en||Z(pn)},ln=function(n){return n},dn=function(n){return void 0===n&&(n=ln),u(function(r,t,e){var a=t-e,u=-(0-r+1)*(0-n(Math.abs(a)));return a<=0?t+u:t-u})},vn=dn(),mn=dn(Math.sqrt),gn=u(function(n,r,t){var e=r-n;return((t-n)%e+e)%e+n}),yn=o(0,1),bn=function(n){return function(r){return 1-n(1-r)}},Mn=function(n){return function(r){return r<=.5?n(2*r)/2:(2-n(2*(1-r)))/2}},xn=function(n){return function(r){return Math.pow(r,n)}},wn=function(n){return function(r){return r*r*((n+1)*r-n)}},On=function(n){var r=wn(n);return function(n){return(n*=2)<1?.5*r(n):.5*(2-Math.pow(2,-10*(n-1)))}},An=xn(2),Fn=bn(An),In=Mn(An),Pn=function(n){return 1-Math.sin(Math.acos(n))},En=bn(Pn),Rn=Mn(En),Nn=wn(1.525),Sn=bn(Nn),Tn=Mn(Nn),jn=On(1.525),kn=8,qn=.001,Dn=1e-7,Un=10,$n=11,zn=1/($n-1),Bn="undefined"!=typeof Float32Array,Cn=function(n,r){return 1-3*r+3*n},_n=function(n,r){return 3*r-6*n},Vn=function(n){return 3*n},Wn=function(n,r,t){return 3*Cn(r,t)*n*n+2*_n(r,t)*n+Vn(r)},Hn=function(n,r,t){return((Cn(r,t)*n+_n(r,t))*n+Vn(r))*n};n.angle=function(n,r){return void 0===r&&(r=t),a(Math.atan2(r.y-n.y,r.x-n.x))},n.applyOffset=function(n,r){var t=!0;return void 0===r&&(r=n,t=!1),function(e){return t?e-n+r:(n=e,t=!0,r)}},n.clamp=o,n.conditional=function(n,r){return function(t){return n(t)?r(t):t}},n.degreesToRadians=i,n.distance=function(n,r){if(void 0===r&&(r=t),e(n)&&e(r))return s(n,r);if(f(n)&&f(r)){var a=s(n.x,r.x),u=s(n.y,r.y),o=c(n)&&c(r)?s(n.z,r.z):0;return Math.sqrt(Math.pow(a,2)+Math.pow(u,2)+Math.pow(o,2))}return 0},n.interpolate=function(n,r,t){var e=void 0===t?{}:t,a=e.clamp,u=void 0===a||a,i=e.ease,f=e.mixer,c=n.length;D(c===r.length,"Both input and output ranges must be the same length"),D(!i||!Array.isArray(i)||i.length===c-1,"Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values."),n[0]>n[c-1]&&(n=[].concat(n),r=[].concat(r),n.reverse(),r.reverse());var s=G(r,i,f),h=2===c?function(n,r){var t=n[0],e=n[1],a=r[0];return function(n){return a(p(t,e,n))}}(n,s):function(n,r){var t=n.length,e=t-1;return function(a){var u=0,o=!1;if(a<=n[0]?o=!0:a>=n[e]&&(u=e-1,o=!0),!o){for(var i=1;i<t&&!(n[i]>a||i===e);i++);u=i-1}var f=p(n[u],n[u+1],a);return r[u](f)}}(n,s);return u?V(o(n[0],n[c-1]),h):h},n.isPoint=f,n.isPoint3D=c,n.mix=h,n.mixArray=W,n.mixColor=C,n.mixComplex=H,n.pipe=V,n.pointFromVector=function(n,r,t){return r=i(r),{x:t*Math.cos(r)+n.x,y:t*Math.sin(r)+n.y}},n.progress=p,n.radiansToDegrees=a,n.smooth=function(n){void 0===n&&(n=50);var r=0,t=0;return function(e){var a=an.timestamp,u=a!==t?a-t:0,o=u?K(r,e,u,n):r;return t=a,r=o,o}},n.smoothFrame=K,n.snap=function(n){if("number"==typeof n)return function(r){return Math.round(r/n)*n};var r=0,t=n.length;return function(e){var a=Math.abs(n[0]-e);for(r=1;r<t;r++){var u=n[r],o=Math.abs(u-e);if(0===o)return u;if(o>a)return n[r-1];if(r===t-1)return u;a=o}}},n.springForce=dn,n.springForceExpo=mn,n.springForceLinear=vn,n.steps=function(n,r){return void 0===r&&(r="end"),function(t){var e=(t="end"===r?Math.min(t,.999):Math.max(t,.001))*n,a="end"===r?Math.floor(e):Math.ceil(e);return yn(a/n)}},n.toDecimal=J,n.velocityPerFrame=function(n,r){return e(n)?n/(1e3/r):0},n.velocityPerSecond=function(n,r){return r?n*(1e3/r):0},n.wrap=gn,n.createAnticipateEasing=On,n.createBackIn=wn,n.createExpoIn=xn,n.cubicBezier=function(n,r,t,e){var a=Bn?new Float32Array($n):new Array($n),u=function(r){for(var e,u,o,i=0,f=1,c=$n-1;f!==c&&a[f]<=r;++f)i+=zn;return e=(r-a[--f])/(a[f+1]-a[f]),(o=Wn(u=i+e*zn,n,t))>=qn?function(r,e){for(var a=0,u=0;a<kn;++a){if(0===(u=Wn(e,n,t)))return e;e-=(Hn(e,n,t)-r)/u}return e}(r,u):0===o?u:function(r,e,a){var u,o,i=0;do{(u=Hn(o=e+(a-e)/2,n,t)-r)>0?a=o:e=o}while(Math.abs(u)>Dn&&++i<Un);return o}(r,i,i+zn)};return function(){for(var r=0;r<$n;++r)a[r]=Hn(r*zn,n,t)}(),function(a){return n===r&&t===e?a:0===a?0:1===a?1:Hn(u(a),r,e)}},n.linear=function(n){return n},n.easeIn=An,n.easeOut=Fn,n.easeInOut=In,n.circIn=Pn,n.circOut=En,n.circInOut=Rn,n.backIn=Nn,n.backOut=Sn,n.backInOut=Tn,n.anticipate=jn,n.reversed=bn,n.mirrored=Mn,Object.defineProperty(n,"__esModule",{value:!0})});
+!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(n.popcorn={})}(this,function(n){"use strict";var r,t={x:0,y:0,z:0},e=function(n){return"number"==typeof n},u=function(n){return 180*n/Math.PI},a=function(n){return function(r,t,e){return void 0!==e?n(r,t,e):function(e){return n(r,t,e)}}},o=a(function(n,r,t){return Math.min(Math.max(t,n),r)}),i=function(n){return n*Math.PI/180},f=function(n){return n.hasOwnProperty("x")&&n.hasOwnProperty("y")},c=function(n){return f(n)&&n.hasOwnProperty("z")},s=function(n,r){return Math.abs(n-r)},p=function(n,r,t){var e=r-n;return 0===e?1:(t-n)/e},h=function(n,r,t){return-t*n+t*r+n},d=function(){return(d=Object.assign||function(n){for(var r,t=1,e=arguments.length;t<e;t++)for(var u in r=arguments[t])Object.prototype.hasOwnProperty.call(r,u)&&(n[u]=r[u]);return n}).apply(this,arguments)},l=function(){return(l=Object.assign||function(n){for(var r,t=1,e=arguments.length;t<e;t++)for(var u in r=arguments[t])Object.prototype.hasOwnProperty.call(r,u)&&(n[u]=r[u]);return n}).apply(this,arguments)},m=function(n,r){return function(t){return Math.max(Math.min(t,r),n)}},v=function(n){return n%1?Number(n.toFixed(5)):n},y=/(-)?(\d[\d\.]*)/g,g=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))/gi,b=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d\.]+%?\))$/i,M={test:function(n){return"number"==typeof n},parse:parseFloat,transform:function(n){return n}},x=(l({},M,{transform:m(0,1)}),l({},M,{default:1}),r="%",{test:function(n){return"string"==typeof n&&n.endsWith(r)&&1===n.split(" ").length},parse:parseFloat,transform:function(n){return""+n+r}}),w=(l({},x,{parse:function(n){return x.parse(n)/100},transform:function(n){return x.transform(100*n)}}),m(0,255)),O=function(n){return void 0!==n.red},A=function(n){return void 0!==n.hue},F=function(n){return function(r){if("string"!=typeof r)return r;for(var t,e={},u=(t=r,t.substring(t.indexOf("(")+1,t.lastIndexOf(")"))).split(/,\s*/),a=0;a<4;a++)e[n[a]]=void 0!==u[a]?parseFloat(u[a]):1;return e}},I=l({},M,{transform:function(n){return Math.round(w(n))}});function P(n,r){return n.startsWith(r)&&b.test(n)}var R={test:function(n){return"string"==typeof n?P(n,"rgb"):O(n)},parse:F(["red","green","blue","alpha"]),transform:function(n){var r=n.red,t=n.green,e=n.blue,u=n.alpha;return function(n){var r=n.red,t=n.green,e=n.blue,u=n.alpha;return"rgba("+r+", "+t+", "+e+", "+(void 0===u?1:u)+")"}({red:I.transform(r),green:I.transform(t),blue:I.transform(e),alpha:v(u)})}},E={test:function(n){return"string"==typeof n?P(n,"hsl"):A(n)},parse:F(["hue","saturation","lightness","alpha"]),transform:function(n){var r=n.hue,t=n.saturation,e=n.lightness,u=n.alpha;return function(n){var r=n.hue,t=n.saturation,e=n.lightness,u=n.alpha;return"hsla("+r+", "+t+", "+e+", "+(void 0===u?1:u)+")"}({hue:Math.round(r),saturation:x.transform(v(t)),lightness:x.transform(v(e)),alpha:v(u)})}},N=l({},R,{test:function(n){return"string"==typeof n&&P(n,"#")},parse:function(n){var r="",t="",e="";return n.length>4?(r=n.substr(1,2),t=n.substr(3,2),e=n.substr(5,2)):(r=n.substr(1,1),t=n.substr(2,1),e=n.substr(3,1),r+=r,t+=t,e+=e),{red:parseInt(r,16),green:parseInt(t,16),blue:parseInt(e,16),alpha:1}}}),S={test:function(n){return"string"==typeof n&&b.test(n)||O(n)||A(n)},parse:function(n){return R.test(n)?R.parse(n):E.test(n)?E.parse(n):N.test(n)?N.parse(n):n},transform:function(n){return O(n)?R.transform(n):A(n)?E.transform(n):n}},j=function(n){return"number"==typeof n?0:n},B={test:function(n){if("string"!=typeof n||!isNaN(n))return!1;var r=0,t=n.match(y),e=n.match(g);return t&&(r+=t.length),e&&(r+=e.length),r>0},parse:function(n){var r=n,t=[],e=r.match(g);e&&(r=r.replace(g,"${c}"),t.push.apply(t,e.map(S.parse)));var u=r.match(y);return u&&t.push.apply(t,u.map(M.parse)),t},createTransformer:function(n){var r=n,t=0,e=n.match(g),u=e?e.length:0;if(e)for(var a=0;a<u;a++)r=r.replace(e[a],"${c}"),t++;var o=r.match(y),i=o?o.length:0;if(o)for(a=0;a<i;a++)r=r.replace(o[a],"${n}"),t++;return function(n){for(var e=r,a=0;a<t;a++)e=e.replace(a<u?"${c}":"${n}",a<u?S.transform(n[a]):v(n[a]));return e}},getAnimatableNone:function(n){var r=B.parse(n);return B.createTransformer(n)(r.map(j))}},k=function(){};"production"!==process.env.NODE_ENV&&(k=function(n,r){if(!n)throw new Error(r)});var q=function(n,r,t){var e=n*n,u=r*r;return Math.sqrt(Math.max(0,t*(u-e)+e))},D=[N,R,E],T=function(n){return D.find(function(r){return r.test(n)})},U=function(n){return"'"+n+"' is not an animatable color. Use the equivalent color code instead."},$=function(n,r){var t=T(n),e=T(r);k(!!t,U(n)),k(!!e,U(r)),k(t.transform===e.transform,"Both colors must be hex/RGBA, OR both must be HSLA.");var u=t.parse(n),a=e.parse(r),o=d({},u),i=t===E?h:q;return function(n){for(var r in o)"alpha"!==r&&(o[r]=i(u[r],a[r],n));return o.alpha=h(u.alpha,a.alpha,n),t.transform(o)}},z=function(n,r){return function(t){return r(n(t))}},H=function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return n.reduce(z)};function L(n,r){return e(n)?function(t){return h(n,r,t)}:S.test(n)?$(n,r):_(n,r)}var C=function(n,r){var t=n.slice(),e=t.length,u=n.map(function(n,t){return L(n,r[t])});return function(n){for(var r=0;r<e;r++)t[r]=u[r](n);return t}},G=function(n,r){var t=d({},n,r),e={};for(var u in t)void 0!==n[u]&&void 0!==r[u]&&(e[u]=L(n[u],r[u]));return function(n){for(var r in e)t[r]=e[r](n);return t}};function W(n){for(var r=B.parse(n),t=r.length,e=0,u=0,a=0,o=0;o<t;o++)e||"number"==typeof r[o]?e++:void 0!==r[o].hue?a++:u++;return{parsed:r,numNumbers:e,numRGB:u,numHSL:a}}var _=function(n,r){var t=B.createTransformer(r),e=W(n),u=W(r);return k(e.numHSL===u.numHSL&&e.numRGB===u.numRGB&&e.numNumbers>=u.numNumbers,"Complex values '"+n+"' and '"+r+"' too different to mix. Ensure all colors are of the same type."),H(C(e.parsed,u.parsed),t)},V=function(n,r){return function(t){return h(n,r,t)}};function J(n,r,t){for(var e,u=[],a=t||("number"==typeof(e=n[0])?V:"string"==typeof e?S.test(e)?$:_:Array.isArray(e)?C:"object"==typeof e?G:void 0),o=n.length-1,i=0;i<o;i++){var f=a(n[i],n[i+1]);if(r){var c=Array.isArray(r)?r[i]:r;f=H(c,f)}u.push(f)}return u}var K=function(n,r){return void 0===r&&(r=2),r=Math.pow(10,r),Math.round(n*r)/r},Q=function(n,r,t,e){return void 0===e&&(e=0),K(n+t*(r-n)/Math.max(e,t))},X=function(){};"production"!==process.env.NODE_ENV&&(X=function(n,r){if(!n)throw new Error("Hey, listen! ".toUpperCase()+r)});var Y,Z=0,nn="undefined"!=typeof window&&void 0!==window.requestAnimationFrame?function(n){return window.requestAnimationFrame(n)}:function(n){var r=Date.now(),t=Math.max(0,16.7-(r-Z));Z=r+t,setTimeout(function(){return n(Z)},t)};!function(n){n.Read="read",n.Update="update",n.Render="render",n.PostRender="postRender",n.FixedUpdate="fixedUpdate"}(Y||(Y={}));var rn=1/60*1e3,tn=!0,en=!1,un=!1,an={delta:0,timestamp:0},on=[Y.Read,Y.Update,Y.Render,Y.PostRender],fn=function(n){return en=n},cn=on.reduce(function(n,r){var t,e,u,a,o,i,f,c,s,p=(t=fn,e=[],u=[],a=0,o=!1,i=0,f=new WeakSet,c=new WeakSet,s={cancel:function(n){var r=u.indexOf(n);f.add(n),-1!==r&&u.splice(r,1)},process:function(n){var r,p;if(o=!0,e=(r=[u,e])[0],(u=r[1]).length=0,a=e.length)for(i=0;i<a;i++)(p=e[i])(n),!0!==c.has(p)||f.has(p)||(s.schedule(p),t(!0));o=!1},schedule:function(n,r,t){void 0===r&&(r=!1),void 0===t&&(t=!1),X("function"==typeof n,"Argument must be a function");var i=t&&o,s=i?e:u;f.delete(n),r&&c.add(n),-1===s.indexOf(n)&&(s.push(n),i&&(a=e.length))}});return n.sync[r]=function(n,r,t){return void 0===r&&(r=!1),void 0===t&&(t=!1),en||dn(),p.schedule(n,r,t),n},n.cancelSync[r]=function(n){return p.cancel(n)},n.steps[r]=p,n},{steps:{},sync:{},cancelSync:{}}),sn=cn.steps,pn=(cn.sync,cn.cancelSync,function(n){return sn[n].process(an)}),hn=function(n){en=!1,an.delta=tn?rn:Math.max(Math.min(n-an.timestamp,40),1),tn||(rn=an.delta),an.timestamp=n,un=!0,on.forEach(pn),un=!1,en&&(tn=!1,nn(hn))},dn=function(){en=!0,tn=!0,un||nn(hn)},ln=function(n){return n},mn=function(n){return void 0===n&&(n=ln),a(function(r,t,e){var u=t-e,a=-(0-r+1)*(0-n(Math.abs(u)));return u<=0?t+a:t-a})},vn=mn(),yn=mn(Math.sqrt),gn=a(function(n,r,t){var e=r-n;return((t-n)%e+e)%e+n}),bn=o(0,1),Mn=function(n){return function(r){return 1-n(1-r)}},xn=function(n){return function(r){return r<=.5?n(2*r)/2:(2-n(2*(1-r)))/2}},wn=function(n){return function(r){return Math.pow(r,n)}},On=function(n){return function(r){return r*r*((n+1)*r-n)}},An=function(n){var r=On(n);return function(n){return(n*=2)<1?.5*r(n):.5*(2-Math.pow(2,-10*(n-1)))}},Fn=wn(2),In=Mn(Fn),Pn=xn(Fn),Rn=function(n){return 1-Math.sin(Math.acos(n))},En=Mn(Rn),Nn=xn(En),Sn=On(1.525),jn=Mn(Sn),Bn=xn(Sn),kn=An(1.525),qn=8,Dn=.001,Tn=1e-7,Un=10,$n=11,zn=1/($n-1),Hn="undefined"!=typeof Float32Array,Ln=function(n,r){return 1-3*r+3*n},Cn=function(n,r){return 3*r-6*n},Gn=function(n){return 3*n},Wn=function(n,r,t){return 3*Ln(r,t)*n*n+2*Cn(r,t)*n+Gn(r)},_n=function(n,r,t){return((Ln(r,t)*n+Cn(r,t))*n+Gn(r))*n};n.angle=function(n,r){return void 0===r&&(r=t),u(Math.atan2(r.y-n.y,r.x-n.x))},n.applyOffset=function(n,r){var t=!0;return void 0===r&&(r=n,t=!1),function(e){return t?e-n+r:(n=e,t=!0,r)}},n.clamp=o,n.conditional=function(n,r){return function(t){return n(t)?r(t):t}},n.degreesToRadians=i,n.distance=function(n,r){if(void 0===r&&(r=t),e(n)&&e(r))return s(n,r);if(f(n)&&f(r)){var u=s(n.x,r.x),a=s(n.y,r.y),o=c(n)&&c(r)?s(n.z,r.z):0;return Math.sqrt(Math.pow(u,2)+Math.pow(a,2)+Math.pow(o,2))}return 0},n.interpolate=function(n,r,t){var e=void 0===t?{}:t,u=e.clamp,a=void 0===u||u,i=e.ease,f=e.mixer,c=n.length;k(c===r.length,"Both input and output ranges must be the same length"),k(!i||!Array.isArray(i)||i.length===c-1,"Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values."),n[0]>n[c-1]&&(n=[].concat(n),r=[].concat(r),n.reverse(),r.reverse());var s=J(r,i,f),h=2===c?function(n,r){var t=n[0],e=n[1],u=r[0];return function(n){return u(p(t,e,n))}}(n,s):function(n,r){var t=n.length,e=t-1;return function(u){var a=0,o=!1;if(u<=n[0]?o=!0:u>=n[e]&&(a=e-1,o=!0),!o){for(var i=1;i<t&&!(n[i]>u||i===e);i++);a=i-1}var f=p(n[a],n[a+1],u);return r[a](f)}}(n,s);return a?H(o(n[0],n[c-1]),h):h},n.isPoint=f,n.isPoint3D=c,n.mix=h,n.mixArray=C,n.mixColor=$,n.mixComplex=_,n.mixObject=G,n.pipe=H,n.pointFromVector=function(n,r,t){return r=i(r),{x:t*Math.cos(r)+n.x,y:t*Math.sin(r)+n.y}},n.progress=p,n.radiansToDegrees=u,n.smooth=function(n){void 0===n&&(n=50);var r=0,t=0;return function(e){var u=an.timestamp,a=u!==t?u-t:0,o=a?Q(r,e,a,n):r;return t=u,r=o,o}},n.smoothFrame=Q,n.snap=function(n){if("number"==typeof n)return function(r){return Math.round(r/n)*n};var r=0,t=n.length;return function(e){var u=Math.abs(n[0]-e);for(r=1;r<t;r++){var a=n[r],o=Math.abs(a-e);if(0===o)return a;if(o>u)return n[r-1];if(r===t-1)return a;u=o}}},n.springForce=mn,n.springForceExpo=yn,n.springForceLinear=vn,n.steps=function(n,r){return void 0===r&&(r="end"),function(t){var e=(t="end"===r?Math.min(t,.999):Math.max(t,.001))*n,u="end"===r?Math.floor(e):Math.ceil(e);return bn(u/n)}},n.toDecimal=K,n.velocityPerFrame=function(n,r){return e(n)?n/(1e3/r):0},n.velocityPerSecond=function(n,r){return r?n*(1e3/r):0},n.wrap=gn,n.createAnticipateEasing=An,n.createBackIn=On,n.createExpoIn=wn,n.cubicBezier=function(n,r,t,e){var u=Hn?new Float32Array($n):new Array($n),a=function(r){for(var e,a,o,i=0,f=1,c=$n-1;f!==c&&u[f]<=r;++f)i+=zn;return e=(r-u[--f])/(u[f+1]-u[f]),(o=Wn(a=i+e*zn,n,t))>=Dn?function(r,e){for(var u=0,a=0;u<qn;++u){if(0===(a=Wn(e,n,t)))return e;e-=(_n(e,n,t)-r)/a}return e}(r,a):0===o?a:function(r,e,u){var a,o,i=0;do{(a=_n(o=e+(u-e)/2,n,t)-r)>0?u=o:e=o}while(Math.abs(a)>Tn&&++i<Un);return o}(r,i,i+zn)};return function(){for(var r=0;r<$n;++r)u[r]=_n(r*zn,n,t)}(),function(u){return n===r&&t===e?u:0===u?0:1===u?1:_n(a(u),r,e)}},n.linear=function(n){return n},n.easeIn=Fn,n.easeOut=In,n.easeInOut=Pn,n.circIn=Rn,n.circOut=En,n.circInOut=Nn,n.backIn=Sn,n.backOut=jn,n.backInOut=Bn,n.anticipate=kn,n.reversed=Mn,n.mirrored=xn,Object.defineProperty(n,"__esModule",{value:!0})});

lib/inc.d.ts

 import { Point } from './types';
 export declare const zeroPoint: Point;
-export declare const isNum: (v: any) => v is Number;
+export declare const isNum: (v: any) => v is number;

lib/index.d.ts

@@ -12,3 +12,3 @@ import angle from './utils/angle';
 import mixColor from './utils/mix-color';
-import { mixComplex, mixArray } from './utils/mix-complex';
+import { mixComplex, mixArray, mixObject } from './utils/mix-complex';
 import pipe from './utils/pipe';
@@ -28,3 +28,3 @@ import pointFromVector from './utils/point-from-vector';
 import { createAnticipateEasing, createBackIn, createExpoIn, cubicBezier, linear, easeIn, easeOut, easeInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, anticipate, reversed, mirrored } from '@popmotion/easing';
-export { angle, applyOffset, clamp, conditional, degreesToRadians, distance, interpolate, isPoint, isPoint3D, mix, mixArray, mixColor, mixComplex, pipe, pointFromVector, progress, radiansToDegrees, smooth, smoothFrame, snap, springForce, springForceExpo, springForceLinear, steps, toDecimal, velocityPerFrame, velocityPerSecond, wrap, createAnticipateEasing, createBackIn, createExpoIn, cubicBezier, linear, easeIn, easeOut, easeInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, anticipate, reversed, mirrored };
+export { angle, applyOffset, clamp, conditional, degreesToRadians, distance, interpolate, isPoint, isPoint3D, mix, mixArray, mixColor, mixComplex, mixObject, pipe, pointFromVector, progress, radiansToDegrees, smooth, smoothFrame, snap, springForce, springForceExpo, springForceLinear, steps, toDecimal, velocityPerFrame, velocityPerSecond, wrap, createAnticipateEasing, createBackIn, createExpoIn, cubicBezier, linear, easeIn, easeOut, easeInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, anticipate, reversed, mirrored };
 export * from './types';

lib/index.js

@@ -155,17 +155,17 @@ 'use strict';
 
+function getMixer(origin, target) {
+    if (isNum(origin)) {
+        return function (v) { return mix(origin, target, v); };
+    }
+    else if (styleValueTypes.color.test(origin)) {
+        return mixColor(origin, target);
+    }
+    else {
+        return mixComplex(origin, target);
+    }
+}
 var mixArray = function (from, to) {
     var output = from.slice();
     var numValues = output.length;
-    var blendValue = from.map(function (fromThis, i) {
-        var toThis = to[i];
-        if (isNum(fromThis)) {
-            return function (v) { return mix(fromThis, toThis, v); };
-        }
-        else if (styleValueTypes.color.test(fromThis)) {
-            return mixColor(fromThis, toThis);
-        }
-        else {
-            return mixComplex(fromThis, toThis);
-        }
-    });
+    var blendValue = from.map(function (fromThis, i) { return getMixer(fromThis, to[i]); });
     return function (v) {
@@ -178,8 +178,47 @@ for (var i = 0; i < numValues; i++) {
 };
-var mixComplex = function (from, to) {
-    var template = styleValueTypes.complex.createTransformer(from);
-    var parsedFrom = styleValueTypes.complex.parse(from);
-    heyListen.invariant(from === styleValueTypes.complex.createTransformer(to)(parsedFrom), "Complex values '" + from + "' and '" + to + "' are of different format.");
-    return pipe(mixArray(parsedFrom, styleValueTypes.complex.parse(to)), template);
+var mixObject = function (origin, target) {
+    var output = __assign({}, origin, target);
+    var blendValue = {};
+    for (var key in output) {
+        if (origin[key] !== undefined && target[key] !== undefined) {
+            blendValue[key] = getMixer(origin[key], target[key]);
+        }
+    }
+    return function (v) {
+        for (var key in blendValue) {
+            output[key] = blendValue[key](v);
+        }
+        return output;
+    };
 };
+function analyse(value) {
+    var parsed = styleValueTypes.complex.parse(value);
+    var numValues = parsed.length;
+    var numNumbers = 0;
+    var numRGB = 0;
+    var numHSL = 0;
+    for (var i = 0; i < numValues; i++) {
+        if (numNumbers || typeof parsed[i] === 'number') {
+            numNumbers++;
+        }
+        else {
+            if (parsed[i].hue !== undefined) {
+                numHSL++;
+            }
+            else {
+                numRGB++;
+            }
+        }
+    }
+    return { parsed: parsed, numNumbers: numNumbers, numRGB: numRGB, numHSL: numHSL };
+}
+var mixComplex = function (origin, target) {
+    var template = styleValueTypes.complex.createTransformer(target);
+    var originStats = analyse(origin);
+    var targetStats = analyse(target);
+    heyListen.invariant(originStats.numHSL === targetStats.numHSL &&
+        originStats.numRGB === targetStats.numRGB &&
+        originStats.numNumbers >= targetStats.numNumbers, "Complex values '" + origin + "' and '" + target + "' too different to mix. Ensure all colors are of the same type.");
+    return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+};
 
@@ -191,8 +230,16 @@ var mixNumber = function (from, to) { return function (p) { return mix(from, to, p); }; };
     }
-    if (styleValueTypes.color.test(v)) {
-        return mixColor;
+    else if (typeof v === 'string') {
+        if (styleValueTypes.color.test(v)) {
+            return mixColor;
+        }
+        else {
+            return mixComplex;
+        }
     }
-    else {
-        return mixComplex;
+    else if (Array.isArray(v)) {
+        return mixArray;
     }
+    else if (typeof v === 'object') {
+        return mixObject;
+    }
 }
@@ -244,3 +291,3 @@ function createMixers(output, ease, customMixer) {
 }
-function interpolate(input, output, _a) {
+function interpolate$$1(input, output, _a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.clamp, clamp = _c === void 0 ? true : _c, ease = _b.ease, mixer = _b.mixer;
@@ -388,3 +435,3 @@ var inputLength = input.length;
 exports.distance = distance;
-exports.interpolate = interpolate;
+exports.interpolate = interpolate$$1;
 exports.isPoint = isPoint;
@@ -396,2 +443,3 @@ exports.isPoint3D = isPoint3D;
 exports.mixComplex = mixComplex;
+exports.mixObject = mixObject;
 exports.pipe = pipe;
@@ -398,0 +446,0 @@ exports.pointFromVector = pointFromVector;

lib/utils/mix-complex.d.ts

 import { RGBA, HSLA } from 'style-value-types';
 declare type MixComplex = (p: number) => string;
+declare type BlendableObject = {
+    [key: string]: string | number | RGBA | HSLA;
+};
 export declare const mixArray: (from: (string | number | RGBA | HSLA)[], to: (string | number | RGBA | HSLA)[]) => (v: number) => (string | number | RGBA | HSLA)[];
-export declare const mixComplex: (from: string, to: string) => MixComplex;
+export declare const mixObject: (origin: BlendableObject, target: BlendableObject) => (v: number) => {
+    [x: string]: string | number | RGBA | HSLA;
+};
+export declare const mixComplex: (origin: string, target: string) => MixComplex;
 export {};

package.json

 {
   "name": "@popmotion/popcorn",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "Utility functions for animation and interactions.",
@@ -59,3 +59,3 @@ "main": "lib/index.js",
     "hey-listen": "^1.0.8",
-    "style-value-types": "^3.1.3"
+    "style-value-types": "^3.1.4"
   },
@@ -62,0 +62,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

90571

increased by6.11%

Lines of code

1892

increased by8.24%

Dependency changes

• Updatedstyle-value-types@^3.1.4