motion - npm Package Compare versions

Comparing version 6.0.1-alpha.13 to 6.0.1-alpha.14

dist/es/targets/dom/animate-value.js

 import { getAnimationData } from './data.js';
-import { isCssVar, browserSupportsCssRegisterProperty, registerCssVariable } from './utils/css-var.js';
+import { isCssVar, registerCssVariable } from './utils/css-var.js';
 import { noop } from '../../utils/noop.js';
@@ -9,2 +9,3 @@ import { ms } from './utils/time.js';
 import { isAnimationGenerator } from '../../generators/index.js';
+import { supports } from './utils/feature-detection.js';
 
@@ -69,3 +70,3 @@ /**
         };
-        if (browserSupportsCssRegisterProperty) {
+        if (supports.cssRegisterProperty()) {
             registerCssVariable(name);
@@ -84,5 +85,5 @@ }
      */
-    if (canAnimateNatively) {
+    if (supports.waapi() && canAnimateNatively) {
         var animation = element.animate((_b = {},
-            _b[name] = keyframes,
+            _b[name] = keyframes.length === 1 ? keyframes[0] : keyframes,
             _b.offset = offset,
@@ -89,0 +90,0 @@ _b.easing = isEasingList(easing) ? convertEasingList(easing) : undefined,

dist/es/targets/dom/utils/css-var.js

 import { transformPropertyDefinitions } from './transforms.js';
 
-var browserSupportsCssRegisterProperty = typeof CSS !== "undefined" &&
-    Object.hasOwnProperty.call(CSS, "registerProperty");
 var isCssVar = function (name) { return name.startsWith("--"); };
@@ -25,2 +23,2 @@ var registeredProperties = new Set();
 
-export { browserSupportsCssRegisterProperty, isCssVar, registerCssVariable, registeredProperties };
+export { isCssVar, registerCssVariable, registeredProperties };

dist/motion.cjs.js

@@ -96,4 +96,2 @@ 'use strict';
 
-var browserSupportsCssRegisterProperty = typeof CSS !== "undefined" &&
-    Object.hasOwnProperty.call(CSS, "registerProperty");
 var isCssVar = function (name) { return name.startsWith("--"); };
@@ -148,2 +146,19 @@ var registeredProperties = new Set();
 
+var featureTests = {
+    cssRegisterProperty: function () {
+        return typeof CSS !== "undefined" &&
+            Object.hasOwnProperty.call(CSS, "registerProperty");
+    },
+    waapi: function () { return Object.hasOwnProperty.call(Element.prototype, "animate"); },
+};
+var results = {};
+var supports = Object.keys(featureTests).reduce(function (acc, key) {
+    acc[key] = function () {
+        if (results[key] === undefined)
+            results[key] = featureTests[key]();
+        return results[key];
+    };
+    return acc;
+}, {});
+
 /**
@@ -207,3 +222,3 @@ * TODO:
         };
-        if (browserSupportsCssRegisterProperty) {
+        if (supports.cssRegisterProperty()) {
             registerCssVariable(name);
@@ -222,5 +237,5 @@ }
      */
-    if (canAnimateNatively) {
+    if (supports.waapi() && canAnimateNatively) {
         var animation = element.animate((_b = {},
-            _b[name] = keyframes,
+            _b[name] = keyframes.length === 1 ? keyframes[0] : keyframes,
             _b.offset = offset,
@@ -227,0 +242,0 @@ _b.easing = isEasingList(easing) ? convertEasingList(easing) : undefined,

dist/motion.min.js

@@ -1,1 +0,1 @@
-!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((n="undefined"!=typeof globalThis?globalThis:n||self).Motion={},n.React)}(this,(function(n,r){"use strict";var t=new WeakMap;function e(n){return t.has(n)||t.set(n,{activeTransforms:[],activeAnimations:{}}),t.get(n)}var a=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},i={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:i,scale:{syntax:"<number>",initialValue:1},skew:i},s=new Map,f=function(n){return"--motion-"+n},c=["x","y","z"];function l(n,r){return c.indexOf(n)-c.indexOf(r)}["translate","scale","rotate","skew"].forEach((function(n){a.forEach((function(r){c.push(n+r),s.set(f(n+r),u[n])}))}));var v=new Set(c),p=function(n){return v.has(n)},d=function(n){return n.sort(l).reduce(m,"").trim()},m=function(n,r){return n+" "+r+"(var("+f(r)+"))"},h="undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),y=new Set;var g=function(){},b=function(n){return 1e3*n};var x=function(){return(x=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)};function w(n,r){var t="function"==typeof Symbol&&n[Symbol.iterator];if(!t)return n;var e,a,o=t.call(n),i=[];try{for(;(void 0===r||r-- >0)&&!(e=o.next()).done;)i.push(e.value)}catch(n){a={error:n}}finally{try{e&&!e.done&&(t=o.return)&&t.call(o)}finally{if(a)throw a.error}}return i}function O(n,r,t){if(t||2===arguments.length)for(var e,a=0,o=r.length;a<o;a++)!e&&a in r||(e||(e=Array.prototype.slice.call(r,0,a)),e[a]=r[a]);return n.concat(e||r)}var P=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},A=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?M(n):n},M=function(n){var r=w(n,4);return"cubic-bezier("+r[0]+", "+r[1]+", "+r[2]+", "+r[3]+")"};function S(n,r,t,a){var i,u=void 0===a?{}:a,c=u.duration,l=void 0===c?.3:c,v=u.delay,m=void 0===v?0:v,x=u.endDelay,w=void 0===x?0:x,O=u.repeat,M=void 0===O?0:O,S=u.easing,j=void 0===S?"ease":S,E=u.direction,k=u.offset,D=e(n),F=!0,T=g;if(t=Array.isArray(t)?t:[t],p(r)&&(o[r]&&(r=o[r]),function(n,r){var t,a,o=e(n).activeTransforms;a=r,-1===(t=o).indexOf(a)&&t.push(a),n.style.transform=d(o)}(n,r),r=f(r)),function(n,r){n.activeAnimations[r]&&(!function(n){n.commitStyles(),n.cancel()}(n.activeAnimations[r]),n.activeAnimations[r]=void 0)}(D,r),function(n){return"object"==typeof n&&n.isAnimationGenerator}(j)){var C=j.generate(t);j="linear",!1!==C&&(t=C.keyframes,l=C.duration)}var R=s.get(r);R&&R.toDefaultUnit&&(t=t.map((function(n){return"number"==typeof n?R.toDefaultUnit(n):n})));var V=t[t.length-1];if(!function(n){return n.startsWith("--")}(r)?T=function(){return n.style[r]=V}:(T=function(){return n.style.setProperty(r,V)},h?function(n){if(!y.has(n)){y.add(n);try{var r=s.has(n)?s.get(n):{},t=r.syntax,e=r.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:t,initialValue:e})}catch(n){}}}(r):F=!1),F){var N=n.animate(((i={})[r]=t,i.offset=k,i.easing=P(j)?function(n){return n.map(A)}(j):void 0,i),{delay:b(m),duration:b(l),endDelay:b(w),easing:P(j)?void 0:A(j),direction:E,iterations:M+1});return D.activeAnimations[r]=N,N.finished.then(T).catch(g),N}T()}var j=function(n,r){return n[r]?x(x({},n),n[r]):n};var E={get:function(n,r){var t;switch(r){case"finished":return n.finished;case"currentTime":case"playbackRate":return null===(t=n.animations[0])||void 0===t?void 0:t[r];case"stop":return function(){return n.animations.forEach(stop)};default:return function(){return n.animations.forEach((function(n){return n[r]()}))}}},set:function(n,r,t){switch(r){case"currentTime":case"playbackRate":for(var e=0;e<n.animations.length;e++)n.animations[e][r]=t;return!0}return!1}},k=function(n,r,t){return-t*n+t*r+n},D=function(n,r){return function(t){return Math.max(Math.min(t,r),n)}},F=function(n){return n%1?Number(n.toFixed(5)):n},T=/(-)?([\d]*\.?[\d])+/g,C=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,R=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function V(n){return"string"==typeof n}var N={test:function(n){return"number"==typeof n},parse:parseFloat,transform:function(n){return n}},U=x(x({},N),{transform:D(0,1)});x(x({},N),{default:1});var q,I=(q="%",{test:function(n){return V(n)&&n.endsWith(q)&&1===n.split(" ").length},parse:parseFloat,transform:function(n){return""+n+q}});x(x({},I),{parse:function(n){return I.parse(n)/100},transform:function(n){return I.transform(100*n)}});var L=function(n,r){return function(t){return Boolean(V(t)&&R.test(t)&&t.startsWith(n)||r&&Object.prototype.hasOwnProperty.call(t,r))}},W=function(n,r,t){return function(e){var a;if(!V(e))return e;var o=e.match(T),i=o[0],u=o[1],s=o[2],f=o[3];return(a={})[n]=parseFloat(i),a[r]=parseFloat(u),a[t]=parseFloat(s),a.alpha=void 0!==f?parseFloat(f):1,a}},z={test:L("hsl","hue"),parse:W("hue","saturation","lightness"),transform:function(n){var r=n.hue,t=n.saturation,e=n.lightness,a=n.alpha,o=void 0===a?1:a;return"hsla("+Math.round(r)+", "+I.transform(F(t))+", "+I.transform(F(e))+", "+F(U.transform(o))+")"}},G=D(0,255),$=x(x({},N),{transform:function(n){return Math.round(G(n))}}),B={test:L("rgb","red"),parse:W("red","green","blue"),transform:function(n){var r=n.red,t=n.green,e=n.blue,a=n.alpha,o=void 0===a?1:a;return"rgba("+$.transform(r)+", "+$.transform(t)+", "+$.transform(e)+", "+F(U.transform(o))+")"}};var X={test:L("#"),parse:function(n){var r="",t="",e="",a="";return n.length>5?(r=n.substr(1,2),t=n.substr(3,2),e=n.substr(5,2),a=n.substr(7,2)):(r=n.substr(1,1),t=n.substr(2,1),e=n.substr(3,1),a=n.substr(4,1),r+=r,t+=t,e+=e,a+=a),{red:parseInt(r,16),green:parseInt(t,16),blue:parseInt(e,16),alpha:a?parseInt(a,16)/255:1}},transform:B.transform},Y=function(n){return B.test(n)||X.test(n)||z.test(n)},Z=function(n){return B.test(n)?B.parse(n):z.test(n)?z.parse(n):X.parse(n)},_=function(n){return V(n)?n:n.hasOwnProperty("red")?B.transform(n):z.transform(n)},H="${c}",J="${n}";function K(n){var r=[],t=0,e=n.match(C);e&&(t=e.length,n=n.replace(C,H),r.push.apply(r,e.map(Z)));var a=n.match(T);return a&&(n=n.replace(T,J),r.push.apply(r,a.map(N.parse))),{values:r,numColors:t,tokenised:n}}function Q(n){return K(n).values}function nn(n){var r=K(n),t=r.values,e=r.numColors,a=r.tokenised,o=t.length;return function(n){for(var r=a,t=0;t<o;t++)r=r.replace(t<e?H:J,t<e?_(n[t]):F(n[t]));return r}}var rn=function(n){return"number"==typeof n?0:n};var tn={test:function(n){var r,t,e,a;return isNaN(n)&&V(n)&&(null!==(t=null===(r=n.match(T))||void 0===r?void 0:r.length)&&void 0!==t?t:0)+(null!==(a=null===(e=n.match(C))||void 0===e?void 0:e.length)&&void 0!==a?a:0)>0},parse:Q,createTransformer:nn,getAnimatableNone:function(n){var r=Q(n);return nn(n)(r.map(rn))}},en=function(n,r,t){var e=n*n,a=r*r;return Math.sqrt(Math.max(0,t*(a-e)+e))},an=[X,B,z],on=function(n){return an.find((function(r){return r.test(n)}))},un=function(n,r){return function(t){return r(n(t))}};function sn(n,r){return"number"==typeof n?function(t){return k(n,r,t)}:Y(n)?function(n,r){var t=on(n),e=on(r);t.transform,e.transform;var a=t.parse(n),o=e.parse(r),i=x({},a),u=t===z?k:en;return function(n){for(var r in i)"alpha"!==r&&(i[r]=u(a[r],o[r],n));return i.alpha=k(a.alpha,o.alpha,n),t.transform(i)}}(n,r):cn(n,r)}function fn(n){for(var r=tn.parse(n),t=r.length,e=0,a=0,o=0,i=0;i<t;i++)e||"number"==typeof r[i]?e++:void 0!==r[i].hue?o++:a++;return{parsed:r,numNumbers:e,numRGB:a,numHSL:o}}var cn=function(n,r){var t,e,a,o,i,u=tn.createTransformer(r),s=fn(n),f=fn(r);return function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return n.reduce(un)}((t=s.parsed,e=f.parsed,a=O([],t),o=a.length,i=t.map((function(n,r){return sn(n,e[r])})),function(n){for(var r=0;r<o;r++)a[r]=i[r](n);return a}),u)};var ln=/(-)?([\d]*\.?[\d])+/g;function vn(n){return"string"==typeof n&&parseFloat(n).toString()===n?parseFloat(n):n}function pn(n,r){if(n=vn(n),r=vn(r),"number"==typeof n&&"number"==typeof r)return{from:n,to:r};if("number"==typeof n&&"number"!=typeof r&&!isNaN(parseFloat(r))){var t=r.replace(ln,"");return{from:n,to:parseFloat(r),toValueType:function(n){return n+t}}}if("string"==typeof n){var e=cn(n,r);return{from:0,to:100,toValueType:function(n){return e(n/100)}}}return!1}var dn=function(n){var r=void 0===n?{}:n,t=r.stiffness,e=void 0===t?100:t,a=r.damping,o=void 0===a?10:a,i=r.mass,u=void 0===i?1:i,s=r.from,f=void 0===s?0:s,c=r.to,l=void 0===c?1:c,v=r.velocity,p=void 0===v?0:v,d=r.restSpeed,m=void 0===d?2:d,h=r.restDelta,y=void 0===h?.1:h;p=p?-p/1e3:0;var g,b=function(n,r,t){return void 0===n&&(n=100),void 0===r&&(r=10),void 0===t&&(t=1),r/(2*Math.sqrt(n*t))}(e,o,u),x=l-f,w=Math.sqrt(e/u)/1e3,O=function(n,r){return n*Math.sqrt(1-r*r)}(w,b),P={done:!1,value:f,velocity:p};return g=b<1?function(n){return l-Math.exp(-b*w*n)*((b*w*x-p)/O*Math.sin(O*n)+x*Math.cos(O*n))}:function(n){return l-Math.exp(-w*n)*(x+(p+w*x)*n)},{next:function(n){P.value=g(n),P.velocity=0===n?p:function(n,r,t){var e=Math.max(r-5,0);return function(n,r){return r?n*(1e3/r):0}(t-n(e),5)}(g,n,P.value);var r=Math.abs(P.velocity)<=m,t=Math.abs(l-P.value)<=y;return P.done=r&&t,P}}};function mn(n,t,e,a,o,i){var u=r.useRef(t);r.useEffect((function(){if(e){var r={};if(new Set(O(O([],w(Object.keys(e)),!1),w(Object.keys(u.current)),!1)).forEach((function(n){var t,a,o=e[n];(t=o,a=u.current[n],typeof t==typeof a&&(Array.isArray(t)&&Array.isArray(a)?function(n,r){var t=r.length;if(t!==n.length)return!1;for(var e=0;e<t;e++)if(r[e]!==n[e])return!1;return!0}(t,a):t===a))||(r[n]=o)})),Object.keys(r).length&&n.current){null==o||o(r);var t=[];for(var s in r){var f=S(n.current,s,r[s],a);f&&t.push(f)}Promise.all(t.map((function(n){return n.finished}))).then((function(){return null==i?void 0:i(r)})).catch(g)}u.current=e}}))}function hn(n,t){var e=w(r.useState(!1),2),a=e[0],o=e[1];return a&&Object.assign(n,t),o}var yn=r.createContext(null);var gn=0,bn=function(){return gn++},xn=function(){return n=bn,null===(t=r.useRef(null)).current&&(t.current=n()),t.current;var n,t};function wn(n,t){var e=w(function(){var n=r.useContext(yn);if(null===n)return[!0,null];var t=n.isPresent,e=n.onExitComplete,a=n.register,o=xn();return r.useEffect((function(){return a(o)}),[]),!t&&e?[!1,function(){return null==e?void 0:e(o)}]:[!0]}(),2),a=e[0],o=e[1];if(r.useEffect((function(){t||null==o||o()}),[a]),t&&!a)return Object.assign(n,t),o}function On(n){return r.forwardRef((function(t,e){var a=t.options,i=void 0===a?{}:a,u=t.style,c=t.initial,l=t.hover,v=t.press,m=t.exit,h=t.onStart,y=t.onComplete,g=function(n,r){var t={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&r.indexOf(e)<0&&(t[e]=n[e]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(e=Object.getOwnPropertySymbols(n);a<e.length;a++)r.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(n,e[a])&&(t[e[a]]=n[e[a]])}return t}(t,["options","style","initial","hover","press","exit","onStart","onComplete"]),b=r.useRef(null);b.current||(b.current=function(n){var r={},t=[];for(var e in n){var a=n[e];p(e)&&(o[e]&&(e=o[e]),t.push(e),e=f(e));var i=Array.isArray(a)?a[0]:a,u=s.get(e);u&&u.toDefaultUnit&&(i="number"==typeof a?u.toDefaultUnit(a):a),r[e]=i}return t.length&&(r.transform=d(t)),r}(x(x({},c),u)));var w=x(x({},c),u),O=function(n,r,t){var e=void 0===t?{}:t,a=e.onPointerEnter,o=e.onPointerLeave,i=hn(n,r);return r?{onPointerEnter:function(n){null==a||a(n),i(!0)},onPointerLeave:function(n){null==o||o(n),i(!1)}}:{}}(w,l,g),P=function(n,r,t){var e=(void 0===t?{}:t).onPointerDown,a=hn(n,r);if(!r)return{};var o=function(){a(!1),window.removeEventListener("pointerup",o)};return{onPointerDown:function(n){null==e||e(n),a(!0),window.addEventListener("pointerup",o)}}}(w,v,g),A=wn(w,m),M=r.useRef(null);return mn(M,x(x({},u),c),w,i,h,(function(n){y&&y(n),A&&A()})),r.createElement(n,Object.assign({},g,O,P,{style:b.current,ref:M}))}))}var Pn=new Map,An=new Proxy({},{get:function(n,r){return Pn.has(r)||Pn.set(r,On(r)),Pn.get(r)}});n.animate=function(n,r,t){var e={animations:[]};for(var a in r){var o=j(t,a),i=S(n,a,r[a],o);i&&e.animations.push(i)}return e.finished=Promise.all(e.animations.map((function(n){return n.finished}))),new Proxy(e,E)},n.animateValue=S,n.animated=An,n.spring=function(n,r,t,e){return void 0===n&&(n=200),void 0===r&&(r=15),void 0===t&&(t=1),{isAnimationGenerator:!0,generate:function(a){var o;if(a.length>2)return!1;var i=[],u=pn(1===a.length?0:a[0],null!==(o=a[1])&&void 0!==o?o:a[0]);if(!1===u)return!1;for(var s=u.from,f=u.to,c=u.toValueType,l=dn({stiffness:n,damping:r,mass:t,velocity:e,from:s,to:f}),v=!1,p=0,d=0;!v;){p++;var m=l.next(d),h=m.value,y=m.done;i.push(c?c(h):h),d+=10,v=p>200||y}return{keyframes:i,duration:d}}}},Object.defineProperty(n,"__esModule",{value:!0})}));
+!function(n,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],r):r((n="undefined"!=typeof globalThis?globalThis:n||self).Motion={},n.React)}(this,(function(n,r){"use strict";var t=new WeakMap;function e(n){return t.has(n)||t.set(n,{activeTransforms:[],activeAnimations:{}}),t.get(n)}var a=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},i={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:i,scale:{syntax:"<number>",initialValue:1},skew:i},s=new Map,f=function(n){return"--motion-"+n},c=["x","y","z"];function l(n,r){return c.indexOf(n)-c.indexOf(r)}["translate","scale","rotate","skew"].forEach((function(n){a.forEach((function(r){c.push(n+r),s.set(f(n+r),u[n])}))}));var v=new Set(c),p=function(n){return v.has(n)},d=function(n){return n.sort(l).reduce(m,"").trim()},m=function(n,r){return n+" "+r+"(var("+f(r)+"))"},h=new Set;var y=function(){},g=function(n){return 1e3*n};var b=function(){return(b=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)};function x(n,r){var t="function"==typeof Symbol&&n[Symbol.iterator];if(!t)return n;var e,a,o=t.call(n),i=[];try{for(;(void 0===r||r-- >0)&&!(e=o.next()).done;)i.push(e.value)}catch(n){a={error:n}}finally{try{e&&!e.done&&(t=o.return)&&t.call(o)}finally{if(a)throw a.error}}return i}function w(n,r,t){if(t||2===arguments.length)for(var e,a=0,o=r.length;a<o;a++)!e&&a in r||(e||(e=Array.prototype.slice.call(r,0,a)),e[a]=r[a]);return n.concat(e||r)}var O=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},P=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?A(n):n},A=function(n){var r=x(n,4);return"cubic-bezier("+r[0]+", "+r[1]+", "+r[2]+", "+r[3]+")"};var M={cssRegisterProperty:function(){return"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty")},waapi:function(){return Object.hasOwnProperty.call(Element.prototype,"animate")}},S={},j=Object.keys(M).reduce((function(n,r){return n[r]=function(){return void 0===S[r]&&(S[r]=M[r]()),S[r]},n}),{});function E(n,r,t,a){var i,u=void 0===a?{}:a,c=u.duration,l=void 0===c?.3:c,v=u.delay,m=void 0===v?0:v,b=u.endDelay,x=void 0===b?0:b,w=u.repeat,A=void 0===w?0:w,M=u.easing,S=void 0===M?"ease":M,E=u.direction,k=u.offset,D=e(n),F=!0,R=y;if(t=Array.isArray(t)?t:[t],p(r)&&(o[r]&&(r=o[r]),function(n,r){var t,a,o=e(n).activeTransforms;a=r,-1===(t=o).indexOf(a)&&t.push(a),n.style.transform=d(o)}(n,r),r=f(r)),function(n,r){n.activeAnimations[r]&&(!function(n){n.commitStyles(),n.cancel()}(n.activeAnimations[r]),n.activeAnimations[r]=void 0)}(D,r),function(n){return"object"==typeof n&&n.isAnimationGenerator}(S)){var T=S.generate(t);S="linear",!1!==T&&(t=T.keyframes,l=T.duration)}var C=s.get(r);C&&C.toDefaultUnit&&(t=t.map((function(n){return"number"==typeof n?C.toDefaultUnit(n):n})));var V=t[t.length-1];if(!function(n){return n.startsWith("--")}(r)?R=function(){return n.style[r]=V}:(R=function(){return n.style.setProperty(r,V)},j.cssRegisterProperty()?function(n){if(!h.has(n)){h.add(n);try{var r=s.has(n)?s.get(n):{},t=r.syntax,e=r.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:t,initialValue:e})}catch(n){}}}(r):F=!1),j.waapi()&&F){var N=n.animate(((i={})[r]=1===t.length?t[0]:t,i.offset=k,i.easing=O(S)?function(n){return n.map(P)}(S):void 0,i),{delay:g(m),duration:g(l),endDelay:g(x),easing:O(S)?void 0:P(S),direction:E,iterations:A+1});return D.activeAnimations[r]=N,N.finished.then(R).catch(y),N}R()}var k=function(n,r){return n[r]?b(b({},n),n[r]):n};var D={get:function(n,r){var t;switch(r){case"finished":return n.finished;case"currentTime":case"playbackRate":return null===(t=n.animations[0])||void 0===t?void 0:t[r];case"stop":return function(){return n.animations.forEach(stop)};default:return function(){return n.animations.forEach((function(n){return n[r]()}))}}},set:function(n,r,t){switch(r){case"currentTime":case"playbackRate":for(var e=0;e<n.animations.length;e++)n.animations[e][r]=t;return!0}return!1}},F=function(n,r,t){return-t*n+t*r+n},R=function(n,r){return function(t){return Math.max(Math.min(t,r),n)}},T=function(n){return n%1?Number(n.toFixed(5)):n},C=/(-)?([\d]*\.?[\d])+/g,V=/(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi,N=/^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;function U(n){return"string"==typeof n}var q={test:function(n){return"number"==typeof n},parse:parseFloat,transform:function(n){return n}},I=b(b({},q),{transform:R(0,1)});b(b({},q),{default:1});var L,W=(L="%",{test:function(n){return U(n)&&n.endsWith(L)&&1===n.split(" ").length},parse:parseFloat,transform:function(n){return""+n+L}});b(b({},W),{parse:function(n){return W.parse(n)/100},transform:function(n){return W.transform(100*n)}});var z=function(n,r){return function(t){return Boolean(U(t)&&N.test(t)&&t.startsWith(n)||r&&Object.prototype.hasOwnProperty.call(t,r))}},G=function(n,r,t){return function(e){var a;if(!U(e))return e;var o=e.match(C),i=o[0],u=o[1],s=o[2],f=o[3];return(a={})[n]=parseFloat(i),a[r]=parseFloat(u),a[t]=parseFloat(s),a.alpha=void 0!==f?parseFloat(f):1,a}},$={test:z("hsl","hue"),parse:G("hue","saturation","lightness"),transform:function(n){var r=n.hue,t=n.saturation,e=n.lightness,a=n.alpha,o=void 0===a?1:a;return"hsla("+Math.round(r)+", "+W.transform(T(t))+", "+W.transform(T(e))+", "+T(I.transform(o))+")"}},B=R(0,255),X=b(b({},q),{transform:function(n){return Math.round(B(n))}}),Y={test:z("rgb","red"),parse:G("red","green","blue"),transform:function(n){var r=n.red,t=n.green,e=n.blue,a=n.alpha,o=void 0===a?1:a;return"rgba("+X.transform(r)+", "+X.transform(t)+", "+X.transform(e)+", "+T(I.transform(o))+")"}};var Z={test:z("#"),parse:function(n){var r="",t="",e="",a="";return n.length>5?(r=n.substr(1,2),t=n.substr(3,2),e=n.substr(5,2),a=n.substr(7,2)):(r=n.substr(1,1),t=n.substr(2,1),e=n.substr(3,1),a=n.substr(4,1),r+=r,t+=t,e+=e,a+=a),{red:parseInt(r,16),green:parseInt(t,16),blue:parseInt(e,16),alpha:a?parseInt(a,16)/255:1}},transform:Y.transform},_=function(n){return Y.test(n)||Z.test(n)||$.test(n)},H=function(n){return Y.test(n)?Y.parse(n):$.test(n)?$.parse(n):Z.parse(n)},J=function(n){return U(n)?n:n.hasOwnProperty("red")?Y.transform(n):$.transform(n)},K="${c}",Q="${n}";function nn(n){var r=[],t=0,e=n.match(V);e&&(t=e.length,n=n.replace(V,K),r.push.apply(r,e.map(H)));var a=n.match(C);return a&&(n=n.replace(C,Q),r.push.apply(r,a.map(q.parse))),{values:r,numColors:t,tokenised:n}}function rn(n){return nn(n).values}function tn(n){var r=nn(n),t=r.values,e=r.numColors,a=r.tokenised,o=t.length;return function(n){for(var r=a,t=0;t<o;t++)r=r.replace(t<e?K:Q,t<e?J(n[t]):T(n[t]));return r}}var en=function(n){return"number"==typeof n?0:n};var an={test:function(n){var r,t,e,a;return isNaN(n)&&U(n)&&(null!==(t=null===(r=n.match(C))||void 0===r?void 0:r.length)&&void 0!==t?t:0)+(null!==(a=null===(e=n.match(V))||void 0===e?void 0:e.length)&&void 0!==a?a:0)>0},parse:rn,createTransformer:tn,getAnimatableNone:function(n){var r=rn(n);return tn(n)(r.map(en))}},on=function(n,r,t){var e=n*n,a=r*r;return Math.sqrt(Math.max(0,t*(a-e)+e))},un=[Z,Y,$],sn=function(n){return un.find((function(r){return r.test(n)}))},fn=function(n,r){return function(t){return r(n(t))}};function cn(n,r){return"number"==typeof n?function(t){return F(n,r,t)}:_(n)?function(n,r){var t=sn(n),e=sn(r);t.transform,e.transform;var a=t.parse(n),o=e.parse(r),i=b({},a),u=t===$?F:on;return function(n){for(var r in i)"alpha"!==r&&(i[r]=u(a[r],o[r],n));return i.alpha=F(a.alpha,o.alpha,n),t.transform(i)}}(n,r):vn(n,r)}function ln(n){for(var r=an.parse(n),t=r.length,e=0,a=0,o=0,i=0;i<t;i++)e||"number"==typeof r[i]?e++:void 0!==r[i].hue?o++:a++;return{parsed:r,numNumbers:e,numRGB:a,numHSL:o}}var vn=function(n,r){var t,e,a,o,i,u=an.createTransformer(r),s=ln(n),f=ln(r);return function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return n.reduce(fn)}((t=s.parsed,e=f.parsed,a=w([],t),o=a.length,i=t.map((function(n,r){return cn(n,e[r])})),function(n){for(var r=0;r<o;r++)a[r]=i[r](n);return a}),u)};var pn=/(-)?([\d]*\.?[\d])+/g;function dn(n){return"string"==typeof n&&parseFloat(n).toString()===n?parseFloat(n):n}function mn(n,r){if(n=dn(n),r=dn(r),"number"==typeof n&&"number"==typeof r)return{from:n,to:r};if("number"==typeof n&&"number"!=typeof r&&!isNaN(parseFloat(r))){var t=r.replace(pn,"");return{from:n,to:parseFloat(r),toValueType:function(n){return n+t}}}if("string"==typeof n){var e=vn(n,r);return{from:0,to:100,toValueType:function(n){return e(n/100)}}}return!1}var hn=function(n){var r=void 0===n?{}:n,t=r.stiffness,e=void 0===t?100:t,a=r.damping,o=void 0===a?10:a,i=r.mass,u=void 0===i?1:i,s=r.from,f=void 0===s?0:s,c=r.to,l=void 0===c?1:c,v=r.velocity,p=void 0===v?0:v,d=r.restSpeed,m=void 0===d?2:d,h=r.restDelta,y=void 0===h?.1:h;p=p?-p/1e3:0;var g,b=function(n,r,t){return void 0===n&&(n=100),void 0===r&&(r=10),void 0===t&&(t=1),r/(2*Math.sqrt(n*t))}(e,o,u),x=l-f,w=Math.sqrt(e/u)/1e3,O=function(n,r){return n*Math.sqrt(1-r*r)}(w,b),P={done:!1,value:f,velocity:p};return g=b<1?function(n){return l-Math.exp(-b*w*n)*((b*w*x-p)/O*Math.sin(O*n)+x*Math.cos(O*n))}:function(n){return l-Math.exp(-w*n)*(x+(p+w*x)*n)},{next:function(n){P.value=g(n),P.velocity=0===n?p:function(n,r,t){var e=Math.max(r-5,0);return function(n,r){return r?n*(1e3/r):0}(t-n(e),5)}(g,n,P.value);var r=Math.abs(P.velocity)<=m,t=Math.abs(l-P.value)<=y;return P.done=r&&t,P}}};function yn(n,t,e,a,o,i){var u=r.useRef(t);r.useEffect((function(){if(e){var r={};if(new Set(w(w([],x(Object.keys(e)),!1),x(Object.keys(u.current)),!1)).forEach((function(n){var t,a,o=e[n];(t=o,a=u.current[n],typeof t==typeof a&&(Array.isArray(t)&&Array.isArray(a)?function(n,r){var t=r.length;if(t!==n.length)return!1;for(var e=0;e<t;e++)if(r[e]!==n[e])return!1;return!0}(t,a):t===a))||(r[n]=o)})),Object.keys(r).length&&n.current){null==o||o(r);var t=[];for(var s in r){var f=E(n.current,s,r[s],a);f&&t.push(f)}Promise.all(t.map((function(n){return n.finished}))).then((function(){return null==i?void 0:i(r)})).catch(y)}u.current=e}}))}function gn(n,t){var e=x(r.useState(!1),2),a=e[0],o=e[1];return a&&Object.assign(n,t),o}var bn=r.createContext(null);var xn=0,wn=function(){return xn++},On=function(){return n=wn,null===(t=r.useRef(null)).current&&(t.current=n()),t.current;var n,t};function Pn(n,t){var e=x(function(){var n=r.useContext(bn);if(null===n)return[!0,null];var t=n.isPresent,e=n.onExitComplete,a=n.register,o=On();return r.useEffect((function(){return a(o)}),[]),!t&&e?[!1,function(){return null==e?void 0:e(o)}]:[!0]}(),2),a=e[0],o=e[1];if(r.useEffect((function(){t||null==o||o()}),[a]),t&&!a)return Object.assign(n,t),o}function An(n){return r.forwardRef((function(t,e){var a=t.options,i=void 0===a?{}:a,u=t.style,c=t.initial,l=t.hover,v=t.press,m=t.exit,h=t.onStart,y=t.onComplete,g=function(n,r){var t={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&r.indexOf(e)<0&&(t[e]=n[e]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(e=Object.getOwnPropertySymbols(n);a<e.length;a++)r.indexOf(e[a])<0&&Object.prototype.propertyIsEnumerable.call(n,e[a])&&(t[e[a]]=n[e[a]])}return t}(t,["options","style","initial","hover","press","exit","onStart","onComplete"]),x=r.useRef(null);x.current||(x.current=function(n){var r={},t=[];for(var e in n){var a=n[e];p(e)&&(o[e]&&(e=o[e]),t.push(e),e=f(e));var i=Array.isArray(a)?a[0]:a,u=s.get(e);u&&u.toDefaultUnit&&(i="number"==typeof a?u.toDefaultUnit(a):a),r[e]=i}return t.length&&(r.transform=d(t)),r}(b(b({},c),u)));var w=b(b({},c),u),O=function(n,r,t){var e=void 0===t?{}:t,a=e.onPointerEnter,o=e.onPointerLeave,i=gn(n,r);return r?{onPointerEnter:function(n){null==a||a(n),i(!0)},onPointerLeave:function(n){null==o||o(n),i(!1)}}:{}}(w,l,g),P=function(n,r,t){var e=(void 0===t?{}:t).onPointerDown,a=gn(n,r);if(!r)return{};var o=function(){a(!1),window.removeEventListener("pointerup",o)};return{onPointerDown:function(n){null==e||e(n),a(!0),window.addEventListener("pointerup",o)}}}(w,v,g),A=Pn(w,m),M=r.useRef(null);return yn(M,b(b({},u),c),w,i,h,(function(n){y&&y(n),A&&A()})),r.createElement(n,Object.assign({},g,O,P,{style:x.current,ref:M}))}))}var Mn=new Map,Sn=new Proxy({},{get:function(n,r){return Mn.has(r)||Mn.set(r,An(r)),Mn.get(r)}});n.animate=function(n,r,t){var e={animations:[]};for(var a in r){var o=k(t,a),i=E(n,a,r[a],o);i&&e.animations.push(i)}return e.finished=Promise.all(e.animations.map((function(n){return n.finished}))),new Proxy(e,D)},n.animateValue=E,n.animated=Sn,n.spring=function(n,r,t,e){return void 0===n&&(n=200),void 0===r&&(r=15),void 0===t&&(t=1),{isAnimationGenerator:!0,generate:function(a){var o;if(a.length>2)return!1;var i=[],u=mn(1===a.length?0:a[0],null!==(o=a[1])&&void 0!==o?o:a[0]);if(!1===u)return!1;for(var s=u.from,f=u.to,c=u.toValueType,l=hn({stiffness:n,damping:r,mass:t,velocity:e,from:s,to:f}),v=!1,p=0,d=0;!v;){p++;var m=l.next(d),h=m.value,y=m.done;i.push(c?c(h):h),d+=10,v=p>200||y}return{keyframes:i,duration:d}}}},Object.defineProperty(n,"__esModule",{value:!0})}));

dist/motion.umd.js

@@ -93,4 +93,2 @@ (function (global, factory) {
 
-    var browserSupportsCssRegisterProperty = typeof CSS !== "undefined" &&
-        Object.hasOwnProperty.call(CSS, "registerProperty");
     var isCssVar = function (name) { return name.startsWith("--"); };
@@ -210,2 +208,19 @@ var registeredProperties = new Set();
 
+    var featureTests = {
+        cssRegisterProperty: function () {
+            return typeof CSS !== "undefined" &&
+                Object.hasOwnProperty.call(CSS, "registerProperty");
+        },
+        waapi: function () { return Object.hasOwnProperty.call(Element.prototype, "animate"); },
+    };
+    var results = {};
+    var supports = Object.keys(featureTests).reduce(function (acc, key) {
+        acc[key] = function () {
+            if (results[key] === undefined)
+                results[key] = featureTests[key]();
+            return results[key];
+        };
+        return acc;
+    }, {});
+
     /**
@@ -269,3 +284,3 @@ * TODO:
             };
-            if (browserSupportsCssRegisterProperty) {
+            if (supports.cssRegisterProperty()) {
                 registerCssVariable(name);
@@ -284,5 +299,5 @@ }
          */
-        if (canAnimateNatively) {
+        if (supports.waapi() && canAnimateNatively) {
             var animation = element.animate((_b = {},
-                _b[name] = keyframes,
+                _b[name] = keyframes.length === 1 ? keyframes[0] : keyframes,
                 _b.offset = offset,
@@ -289,0 +304,0 @@ _b.easing = isEasingList(easing) ? convertEasingList(easing) : undefined,

dist/size-animate-dom.js

@@ -1,1 +0,1 @@
-import{__read as n,__assign as t}from"tslib";var e=new WeakMap;function r(n){return e.has(n)||e.set(n,{activeTransforms:[],activeAnimations:{}}),e.get(n)}var i=["","X","Y","Z"],a={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:o,scale:{syntax:"<number>",initialValue:1},skew:o},s=new Map,c=function(n){return"--motion-"+n},f=["x","y","z"];function l(n,t){return f.indexOf(n)-f.indexOf(t)}["translate","scale","rotate","skew"].forEach((function(n){i.forEach((function(t){f.push(n+t),s.set(c(n+t),u[n])}))}));var v=new Set(f),d=function(n){return n.sort(l).reduce(m,"").trim()},m=function(n,t){return n+" "+t+"(var("+c(t)+"))"},y="undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),h=new Set;var p=function(){},g=function(n){return 1e3*n};var x=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},A=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?b(n):n},b=function(t){var e=n(t,4);return"cubic-bezier("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"};function w(n,t,e,i){var o,u=void 0===i?{}:i,f=u.duration,l=void 0===f?.3:f,m=u.delay,b=void 0===m?0:m,w=u.endDelay,S=void 0===w?0:w,k=u.repeat,D=void 0===k?0:k,P=u.easing,O=void 0===P?"ease":P,V=u.direction,E=u.offset,T=r(n),U=!0,z=p;if(e=Array.isArray(e)?e:[e],function(n){return v.has(n)}(t)&&(a[t]&&(t=a[t]),function(n,t){var e,i,a=r(n).activeTransforms;i=t,-1===(e=a).indexOf(i)&&e.push(i),n.style.transform=d(a)}(n,t),t=c(t)),function(n,t){n.activeAnimations[t]&&(!function(n){n.commitStyles(),n.cancel()}(n.activeAnimations[t]),n.activeAnimations[t]=void 0)}(T,t),function(n){return"object"==typeof n&&n.isAnimationGenerator}(O)){var C=O.generate(e);O="linear",!1!==C&&(e=C.keyframes,l=C.duration)}var j=s.get(t);j&&j.toDefaultUnit&&(e=e.map((function(n){return"number"==typeof n?j.toDefaultUnit(n):n})));var M=e[e.length-1];if(!function(n){return n.startsWith("--")}(t)?z=function(){return n.style[t]=M}:(z=function(){return n.style.setProperty(t,M)},y?function(n){if(!h.has(n)){h.add(n);try{var t=s.has(n)?s.get(n):{},e=t.syntax,r=t.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:e,initialValue:r})}catch(n){}}}(t):U=!1),U){var R=n.animate(((o={})[t]=e,o.offset=E,o.easing=x(O)?function(n){return n.map(A)}(O):void 0,o),{delay:g(b),duration:g(l),endDelay:g(S),easing:x(O)?void 0:A(O),direction:V,iterations:D+1});return T.activeAnimations[t]=R,R.finished.then(z).catch(p),R}z()}var S=function(n,e){return n[e]?t(t({},n),n[e]):n};function k(n,t,e){var r={animations:[]};for(var i in t){var a=S(e,i),o=w(n,i,t[i],a);o&&r.animations.push(o)}return r.finished=Promise.all(r.animations.map((function(n){return n.finished}))),new Proxy(r,D)}var D={get:function(n,t){var e;switch(t){case"finished":return n.finished;case"currentTime":case"playbackRate":return null===(e=n.animations[0])||void 0===e?void 0:e[t];case"stop":return function(){return n.animations.forEach(stop)};default:return function(){return n.animations.forEach((function(n){return n[t]()}))}}},set:function(n,t,e){switch(t){case"currentTime":case"playbackRate":for(var r=0;r<n.animations.length;r++)n.animations[r][t]=e;return!0}return!1}};export{k as animate};
+import{__read as n,__assign as t}from"tslib";var e=new WeakMap;function r(n){return e.has(n)||e.set(n,{activeTransforms:[],activeAnimations:{}}),e.get(n)}var i=["","X","Y","Z"],a={x:"translateX",y:"translateY",z:"translateZ"},o={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},u={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:o,scale:{syntax:"<number>",initialValue:1},skew:o},s=new Map,c=function(n){return"--motion-"+n},f=["x","y","z"];function l(n,t){return f.indexOf(n)-f.indexOf(t)}["translate","scale","rotate","skew"].forEach((function(n){i.forEach((function(t){f.push(n+t),s.set(c(n+t),u[n])}))}));var v=new Set(f),y=function(n){return n.sort(l).reduce(d,"").trim()},d=function(n,t){return n+" "+t+"(var("+c(t)+"))"},m=new Set;var p=function(){},h=function(n){return 1e3*n};var g=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},x=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?b(n):n},b=function(t){var e=n(t,4);return"cubic-bezier("+e[0]+", "+e[1]+", "+e[2]+", "+e[3]+")"};var w={cssRegisterProperty:function(){return"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty")},waapi:function(){return Object.hasOwnProperty.call(Element.prototype,"animate")}},A={},P=Object.keys(w).reduce((function(n,t){return n[t]=function(){return void 0===A[t]&&(A[t]=w[t]()),A[t]},n}),{});function S(n,t,e,i){var o,u=void 0===i?{}:i,f=u.duration,l=void 0===f?.3:f,d=u.delay,b=void 0===d?0:d,w=u.endDelay,A=void 0===w?0:w,S=u.repeat,O=void 0===S?0:S,k=u.easing,D=void 0===k?"ease":k,E=u.direction,V=u.offset,j=r(n),R=!0,T=p;if(e=Array.isArray(e)?e:[e],function(n){return v.has(n)}(t)&&(a[t]&&(t=a[t]),function(n,t){var e,i,a=r(n).activeTransforms;i=t,-1===(e=a).indexOf(i)&&e.push(i),n.style.transform=y(a)}(n,t),t=c(t)),function(n,t){n.activeAnimations[t]&&(!function(n){n.commitStyles(),n.cancel()}(n.activeAnimations[t]),n.activeAnimations[t]=void 0)}(j,t),function(n){return"object"==typeof n&&n.isAnimationGenerator}(D)){var U=D.generate(e);D="linear",!1!==U&&(e=U.keyframes,l=U.duration)}var z=s.get(t);z&&z.toDefaultUnit&&(e=e.map((function(n){return"number"==typeof n?z.toDefaultUnit(n):n})));var C=e[e.length-1];if(!function(n){return n.startsWith("--")}(t)?T=function(){return n.style[t]=C}:(T=function(){return n.style.setProperty(t,C)},P.cssRegisterProperty()?function(n){if(!m.has(n)){m.add(n);try{var t=s.has(n)?s.get(n):{},e=t.syntax,r=t.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:e,initialValue:r})}catch(n){}}}(t):R=!1),P.waapi()&&R){var M=n.animate(((o={})[t]=1===e.length?e[0]:e,o.offset=V,o.easing=g(D)?function(n){return n.map(x)}(D):void 0,o),{delay:h(b),duration:h(l),endDelay:h(A),easing:g(D)?void 0:x(D),direction:E,iterations:O+1});return j.activeAnimations[t]=M,M.finished.then(T).catch(p),M}T()}var O=function(n,e){return n[e]?t(t({},n),n[e]):n};function k(n,t,e){var r={animations:[]};for(var i in t){var a=O(e,i),o=S(n,i,t[i],a);o&&r.animations.push(o)}return r.finished=Promise.all(r.animations.map((function(n){return n.finished}))),new Proxy(r,D)}var D={get:function(n,t){var e;switch(t){case"finished":return n.finished;case"currentTime":case"playbackRate":return null===(e=n.animations[0])||void 0===e?void 0:e[t];case"stop":return function(){return n.animations.forEach(stop)};default:return function(){return n.animations.forEach((function(n){return n[t]()}))}}},set:function(n,t,e){switch(t){case"currentTime":case"playbackRate":for(var r=0;r<n.animations.length;r++)n.animations[r][t]=e;return!0}return!1}};export{k as animate};

dist/size-react.js

@@ -1,1 +0,1 @@
-import{useRef as n,useEffect as t,useState as r,createContext as e,useContext as i,forwardRef as o,createElement as a}from"react";var u=function(){return(u=Object.assign||function(n){for(var t,r=1,e=arguments.length;r<e;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n}).apply(this,arguments)};function c(n,t){var r="function"==typeof Symbol&&n[Symbol.iterator];if(!r)return n;var e,i,o=r.call(n),a=[];try{for(;(void 0===t||t-- >0)&&!(e=o.next()).done;)a.push(e.value)}catch(n){i={error:n}}finally{try{e&&!e.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function f(n,t,r){if(r||2===arguments.length)for(var e,i=0,o=t.length;i<o;i++)!e&&i in t||(e||(e=Array.prototype.slice.call(t,0,i)),e[i]=t[i]);return n.concat(e||t)}var l=new WeakMap;function s(n){return l.has(n)||l.set(n,{activeTransforms:[],activeAnimations:{}}),l.get(n)}var v=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},p={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},d={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:p,scale:{syntax:"<number>",initialValue:1},skew:p},h=new Map,m=function(n){return"--motion-"+n},g=["x","y","z"];function b(n,t){return g.indexOf(n)-g.indexOf(t)}["translate","scale","rotate","skew"].forEach((function(n){v.forEach((function(t){g.push(n+t),h.set(m(n+t),d[n])}))}));var O=new Set(g),w=function(n){return O.has(n)},x=function(n){return n.sort(b).reduce(A,"").trim()},A=function(n,t){return n+" "+t+"(var("+m(t)+"))"},P="undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),S=new Set;var j=function(){},D=function(n){return 1e3*n};var E=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},k=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?C(n):n},C=function(n){var t=c(n,4);return"cubic-bezier("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"};function U(n,t,r,e){var i,o=void 0===e?{}:e,a=o.duration,u=void 0===a?.3:a,c=o.delay,f=void 0===c?0:c,l=o.endDelay,v=void 0===l?0:l,p=o.repeat,d=void 0===p?0:p,g=o.easing,b=void 0===g?"ease":g,O=o.direction,A=o.offset,C=s(n),U=!0,V=j;if(r=Array.isArray(r)?r:[r],w(t)&&(y[t]&&(t=y[t]),function(n,t){var r,e,i=s(n).activeTransforms;e=t,-1===(r=i).indexOf(e)&&r.push(e),n.style.transform=x(i)}(n,t),t=m(t)),function(n,t){n.activeAnimations[t]&&(!function(n){n.commitStyles(),n.cancel()}(n.activeAnimations[t]),n.activeAnimations[t]=void 0)}(C,t),function(n){return"object"==typeof n&&n.isAnimationGenerator}(b)){var L=b.generate(r);b="linear",!1!==L&&(r=L.keyframes,u=L.duration)}var z=h.get(t);z&&z.toDefaultUnit&&(r=r.map((function(n){return"number"==typeof n?z.toDefaultUnit(n):n})));var M=r[r.length-1];if(!function(n){return n.startsWith("--")}(t)?V=function(){return n.style[t]=M}:(V=function(){return n.style.setProperty(t,M)},P?function(n){if(!S.has(n)){S.add(n);try{var t=h.has(n)?h.get(n):{},r=t.syntax,e=t.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:r,initialValue:e})}catch(n){}}}(t):U=!1),U){var T=n.animate(((i={})[t]=r,i.offset=A,i.easing=E(b)?function(n){return n.map(k)}(b):void 0,i),{delay:D(f),duration:D(u),endDelay:D(v),easing:E(b)?void 0:k(b),direction:O,iterations:d+1});return C.activeAnimations[t]=T,T.finished.then(V).catch(j),T}V()}function V(r,e,i,o,a,u){var l=n(e);t((function(){if(i){var n={};if(new Set(f(f([],c(Object.keys(i)),!1),c(Object.keys(l.current)),!1)).forEach((function(t){var r,e,o=i[t];(r=o,e=l.current[t],typeof r==typeof e&&(Array.isArray(r)&&Array.isArray(e)?function(n,t){var r=t.length;if(r!==n.length)return!1;for(var e=0;e<r;e++)if(t[e]!==n[e])return!1;return!0}(r,e):r===e))||(n[t]=o)})),Object.keys(n).length&&r.current){null==a||a(n);var t=[];for(var e in n){var s=U(r.current,e,n[e],o);s&&t.push(s)}Promise.all(t.map((function(n){return n.finished}))).then((function(){return null==u?void 0:u(n)})).catch(j)}l.current=i}}))}function L(n,t){var e=c(r(!1),2),i=e[0],o=e[1];return i&&Object.assign(n,t),o}var z=e(null);var M=0,T=function(){return M++},W=function(){return t=T,null===(r=n(null)).current&&(r.current=t()),r.current;var t,r};function X(n,r){var e=c(function(){var n=i(z);if(null===n)return[!0,null];var r=n.isPresent,e=n.onExitComplete,o=n.register,a=W();return t((function(){return o(a)}),[]),!r&&e?[!1,function(){return null==e?void 0:e(a)}]:[!0]}(),2),o=e[0],a=e[1];if(t((function(){r||null==a||a()}),[o]),r&&!o)return Object.assign(n,r),a}function Y(t){return o((function(r,e){var i=r.options,o=void 0===i?{}:i,c=r.style,f=r.initial,l=r.hover,s=r.press,v=r.exit,p=r.onStart,d=r.onComplete,g=function(n,t){var r={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&t.indexOf(e)<0&&(r[e]=n[e]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(e=Object.getOwnPropertySymbols(n);i<e.length;i++)t.indexOf(e[i])<0&&Object.prototype.propertyIsEnumerable.call(n,e[i])&&(r[e[i]]=n[e[i]])}return r}(r,["options","style","initial","hover","press","exit","onStart","onComplete"]),b=n(null);b.current||(b.current=function(n){var t={},r=[];for(var e in n){var i=n[e];w(e)&&(y[e]&&(e=y[e]),r.push(e),e=m(e));var o=Array.isArray(i)?i[0]:i,a=h.get(e);a&&a.toDefaultUnit&&(o="number"==typeof i?a.toDefaultUnit(i):i),t[e]=o}return r.length&&(t.transform=x(r)),t}(u(u({},f),c)));var O=u(u({},f),c),A=function(n,t,r){var e=void 0===r?{}:r,i=e.onPointerEnter,o=e.onPointerLeave,a=L(n,t);return t?{onPointerEnter:function(n){null==i||i(n),a(!0)},onPointerLeave:function(n){null==o||o(n),a(!1)}}:{}}(O,l,g),P=function(n,t,r){var e=(void 0===r?{}:r).onPointerDown,i=L(n,t);if(!t)return{};var o=function(){i(!1),window.removeEventListener("pointerup",o)};return{onPointerDown:function(n){null==e||e(n),i(!0),window.addEventListener("pointerup",o)}}}(O,s,g),S=X(O,v),j=n(null);return V(j,u(u({},c),f),O,o,p,(function(n){d&&d(n),S&&S()})),a(t,Object.assign({},g,A,P,{style:b.current,ref:j}))}))}var Z=new Map,G=new Proxy({},{get:function(n,t){return Z.has(t)||Z.set(t,Y(t)),Z.get(t)}});export{G as animated};
+import{useRef as n,useEffect as t,useState as r,createContext as e,useContext as i,forwardRef as o,createElement as a}from"react";var u=function(){return(u=Object.assign||function(n){for(var t,r=1,e=arguments.length;r<e;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(n[i]=t[i]);return n}).apply(this,arguments)};function c(n,t){var r="function"==typeof Symbol&&n[Symbol.iterator];if(!r)return n;var e,i,o=r.call(n),a=[];try{for(;(void 0===t||t-- >0)&&!(e=o.next()).done;)a.push(e.value)}catch(n){i={error:n}}finally{try{e&&!e.done&&(r=o.return)&&r.call(o)}finally{if(i)throw i.error}}return a}function f(n,t,r){if(r||2===arguments.length)for(var e,i=0,o=t.length;i<o;i++)!e&&i in t||(e||(e=Array.prototype.slice.call(t,0,i)),e[i]=t[i]);return n.concat(e||t)}var l=new WeakMap;function s(n){return l.has(n)||l.set(n,{activeTransforms:[],activeAnimations:{}}),l.get(n)}var v=["","X","Y","Z"],y={x:"translateX",y:"translateY",z:"translateZ"},p={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:function(n){return n+"deg"}},d={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:function(n){return n+"px"}},rotate:p,scale:{syntax:"<number>",initialValue:1},skew:p},h=new Map,m=function(n){return"--motion-"+n},g=["x","y","z"];function b(n,t){return g.indexOf(n)-g.indexOf(t)}["translate","scale","rotate","skew"].forEach((function(n){v.forEach((function(t){g.push(n+t),h.set(m(n+t),d[n])}))}));var O=new Set(g),w=function(n){return O.has(n)},x=function(n){return n.sort(b).reduce(P,"").trim()},P=function(n,t){return n+" "+t+"(var("+m(t)+"))"},A=new Set;var j=function(){},S=function(n){return 1e3*n};var D=function(n){return Array.isArray(n)&&"number"!=typeof n[0]},E=function(n){return function(n){return Array.isArray(n)&&"number"==typeof n[0]}(n)?k(n):n},k=function(n){var t=c(n,4);return"cubic-bezier("+t[0]+", "+t[1]+", "+t[2]+", "+t[3]+")"};var C={cssRegisterProperty:function(){return"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty")},waapi:function(){return Object.hasOwnProperty.call(Element.prototype,"animate")}},U={},V=Object.keys(C).reduce((function(n,t){return n[t]=function(){return void 0===U[t]&&(U[t]=C[t]()),U[t]},n}),{});function L(n,t,r,e){var i,o=void 0===e?{}:e,a=o.duration,u=void 0===a?.3:a,c=o.delay,f=void 0===c?0:c,l=o.endDelay,v=void 0===l?0:l,p=o.repeat,d=void 0===p?0:p,g=o.easing,b=void 0===g?"ease":g,O=o.direction,P=o.offset,k=s(n),C=!0,U=j;if(r=Array.isArray(r)?r:[r],w(t)&&(y[t]&&(t=y[t]),function(n,t){var r,e,i=s(n).activeTransforms;e=t,-1===(r=i).indexOf(e)&&r.push(e),n.style.transform=x(i)}(n,t),t=m(t)),function(n,t){n.activeAnimations[t]&&(!function(n){n.commitStyles(),n.cancel()}(n.activeAnimations[t]),n.activeAnimations[t]=void 0)}(k,t),function(n){return"object"==typeof n&&n.isAnimationGenerator}(b)){var L=b.generate(r);b="linear",!1!==L&&(r=L.keyframes,u=L.duration)}var z=h.get(t);z&&z.toDefaultUnit&&(r=r.map((function(n){return"number"==typeof n?z.toDefaultUnit(n):n})));var M=r[r.length-1];if(!function(n){return n.startsWith("--")}(t)?U=function(){return n.style[t]=M}:(U=function(){return n.style.setProperty(t,M)},V.cssRegisterProperty()?function(n){if(!A.has(n)){A.add(n);try{var t=h.has(n)?h.get(n):{},r=t.syntax,e=t.initialValue;CSS.registerProperty({name:n,inherits:!1,syntax:r,initialValue:e})}catch(n){}}}(t):C=!1),V.waapi()&&C){var R=n.animate(((i={})[t]=1===r.length?r[0]:r,i.offset=P,i.easing=D(b)?function(n){return n.map(E)}(b):void 0,i),{delay:S(f),duration:S(u),endDelay:S(v),easing:D(b)?void 0:E(b),direction:O,iterations:d+1});return k.activeAnimations[t]=R,R.finished.then(U).catch(j),R}U()}function z(r,e,i,o,a,u){var l=n(e);t((function(){if(i){var n={};if(new Set(f(f([],c(Object.keys(i)),!1),c(Object.keys(l.current)),!1)).forEach((function(t){var r,e,o=i[t];(r=o,e=l.current[t],typeof r==typeof e&&(Array.isArray(r)&&Array.isArray(e)?function(n,t){var r=t.length;if(r!==n.length)return!1;for(var e=0;e<r;e++)if(t[e]!==n[e])return!1;return!0}(r,e):r===e))||(n[t]=o)})),Object.keys(n).length&&r.current){null==a||a(n);var t=[];for(var e in n){var s=L(r.current,e,n[e],o);s&&t.push(s)}Promise.all(t.map((function(n){return n.finished}))).then((function(){return null==u?void 0:u(n)})).catch(j)}l.current=i}}))}function M(n,t){var e=c(r(!1),2),i=e[0],o=e[1];return i&&Object.assign(n,t),o}var R=e(null);var T=0,W=function(){return T++},X=function(){return t=W,null===(r=n(null)).current&&(r.current=t()),r.current;var t,r};function Y(n,r){var e=c(function(){var n=i(R);if(null===n)return[!0,null];var r=n.isPresent,e=n.onExitComplete,o=n.register,a=X();return t((function(){return o(a)}),[]),!r&&e?[!1,function(){return null==e?void 0:e(a)}]:[!0]}(),2),o=e[0],a=e[1];if(t((function(){r||null==a||a()}),[o]),r&&!o)return Object.assign(n,r),a}function Z(t){return o((function(r,e){var i=r.options,o=void 0===i?{}:i,c=r.style,f=r.initial,l=r.hover,s=r.press,v=r.exit,p=r.onStart,d=r.onComplete,g=function(n,t){var r={};for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&t.indexOf(e)<0&&(r[e]=n[e]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(e=Object.getOwnPropertySymbols(n);i<e.length;i++)t.indexOf(e[i])<0&&Object.prototype.propertyIsEnumerable.call(n,e[i])&&(r[e[i]]=n[e[i]])}return r}(r,["options","style","initial","hover","press","exit","onStart","onComplete"]),b=n(null);b.current||(b.current=function(n){var t={},r=[];for(var e in n){var i=n[e];w(e)&&(y[e]&&(e=y[e]),r.push(e),e=m(e));var o=Array.isArray(i)?i[0]:i,a=h.get(e);a&&a.toDefaultUnit&&(o="number"==typeof i?a.toDefaultUnit(i):i),t[e]=o}return r.length&&(t.transform=x(r)),t}(u(u({},f),c)));var O=u(u({},f),c),P=function(n,t,r){var e=void 0===r?{}:r,i=e.onPointerEnter,o=e.onPointerLeave,a=M(n,t);return t?{onPointerEnter:function(n){null==i||i(n),a(!0)},onPointerLeave:function(n){null==o||o(n),a(!1)}}:{}}(O,l,g),A=function(n,t,r){var e=(void 0===r?{}:r).onPointerDown,i=M(n,t);if(!t)return{};var o=function(){i(!1),window.removeEventListener("pointerup",o)};return{onPointerDown:function(n){null==e||e(n),i(!0),window.addEventListener("pointerup",o)}}}(O,s,g),j=Y(O,v),S=n(null);return z(S,u(u({},c),f),O,o,p,(function(n){d&&d(n),j&&j()})),a(t,Object.assign({},g,P,A,{style:b.current,ref:S}))}))}var G=new Map,I=new Proxy({},{get:function(n,t){return G.has(t)||G.set(t,Z(t)),G.get(t)}});export{I as animated};

package.json

 {
   "name": "motion",
-  "version": "6.0.1-alpha.13",
+  "version": "6.0.1-alpha.14",
   "description": "The Motion library for the web",
@@ -126,3 +126,3 @@ "author": "Matt Perry",
       "path": "./dist/size-animate-dom.js",
-      "maxSize": "1.5 kB"
+      "maxSize": "1.7 kB"
     },
@@ -135,5 +135,5 @@ {
       "path": "./dist/size-react.js",
-      "maxSize": "2.6 kB"
+      "maxSize": "2.8 kB"
     }
   ]
 }

README.md

@@ -24,1 +24,3 @@ # Motion Concept C\*
 - [Vlad Gorodetsky](https://github.com/bai)
+- [Alex Frazer](https://github.com/AlexFrazer)
+- [Derek Reynolds](https://github.com/derekr)

src/targets/dom/__tests__/animate.test.ts

@@ -16,3 +16,3 @@ import { animate } from "../animate"
       div,
-      { opacity: [0.1, 0.6] },
+      { opacity: 0.6 },
       { duration, x: {}, "--css-var": {} }
@@ -35,3 +35,3 @@ )
     const div = document.createElement("div")
-    const animation = animate(div, { x: [0, 1] }, { duration })
+    const animation = animate(div, { x: 1 }, { duration })
     await animation.finished.then(() => {
@@ -44,3 +44,3 @@ expect(div).toHaveStyle("transform: translateX(var(--motion-translateX))")
     const div = document.createElement("div")
-    const animation = animate(div, { opacity: [0.2, 0.5] }, { duration: 10 })
+    const animation = animate(div, { opacity: 0.5 }, { duration: 10 })
 
@@ -59,3 +59,4 @@ return new Promise<void>((resolve) => {
     const div = document.createElement("div")
-    const animation = animate(div, { opacity: [0.2, 0.5] }, { duration: 10 })
+    div.style.opacity = "0.2"
+    const animation = animate(div, { opacity: 0.5 }, { duration: 10 })
     return new Promise<void>((resolve) => {
@@ -73,3 +74,3 @@ animation.finished.catch(() => {
     const div = document.createElement("div")
-    const animation = animate(div, { opacity: [0.2, 0.5] }, { duration: 10 })
+    const animation = animate(div, { opacity: 0.5 }, { duration: 10 })
 
@@ -76,0 +77,0 @@ expect(animation.currentTime).toBe(0)

src/targets/dom/animate-value.ts

 import { AnimationData, getAnimationData } from "./data"
 import { AnimationOptions, AnimationWithCommitStyles } from "./types"
-import {
-  browserSupportsCssRegisterProperty,
-  isCssVar,
-  registerCssVariable,
-} from "./utils/css-var"
+import { isCssVar, registerCssVariable } from "./utils/css-var"
 import { noop } from "../../utils/noop"
@@ -20,2 +16,3 @@ import { ms } from "./utils/time"
 import { isAnimationGenerator } from "../../generators"
+import { supports } from "./utils/feature-detection"
 
@@ -98,3 +95,3 @@ /**
 
-    if (browserSupportsCssRegisterProperty) {
+    if (supports.cssRegisterProperty()) {
       registerCssVariable(name)
@@ -112,6 +109,6 @@ } else {
    */
-  if (canAnimateNatively) {
+  if (supports.waapi() && canAnimateNatively) {
     const animation = element.animate(
       {
-        [name]: keyframes,
+        [name]: keyframes.length === 1 ? keyframes[0] : keyframes,
         offset,
@@ -118,0 +115,0 @@ easing: isEasingList(easing) ? convertEasingList(easing) : undefined,

src/targets/dom/utils/css-var.ts

 import { transformPropertyDefinitions } from "./transforms"
 
-export const browserSupportsCssRegisterProperty =
-  typeof CSS !== "undefined" &&
-  Object.hasOwnProperty.call(CSS, "registerProperty")
-
 export const isCssVar = (name: string) => name.startsWith("--")
@@ -8,0 +4,0 @@

types/targets/dom/utils/css-var.d.ts

@@ -1,4 +0,3 @@
-export declare const browserSupportsCssRegisterProperty: any;
 export declare const isCssVar: (name: string) => boolean;
 export declare const registeredProperties: Set<string>;
 export declare function registerCssVariable(name: string): void;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

300739

increased by1.01%

Number of package files

111

increased by2.78%

Lines of code

7758

increased by0.84%

Number of lines in readme file

26

increased by8.33%

No dependency changes